WebGL 프레임 워크 : Three.js 대 Babylon.js

최고의 WebGL 프레임 워크를위한 전투 : 내가 말한 이야기

threejs.org에 소개 된 웹 사이트 CineShader.com

아마도 당신은 slackGithub 에 대해 조사 했고 장단점의 긴 목록을 살펴 보았지만 여전히 무엇이 당신에게 효과가 있을지 확신 할 수 없습니다.

그런 다음 하나만 선택합니다. 대부분의 경우 그다지 중요하지 않습니다. 모든 길은 로마로 통하는 거죠?

Tous les chemins mènent à Rome All Roads Lead to Rome (영화 1949)

그게 내가 한 일입니다. 나는 새 이동 경로에 대한 시각화 프로젝트 마감일이되기 전에 새로운 개발 도구를 선택하는 것이 용감했습니다.

선택하는 방법

동의 할 수 있다면 이것은 완벽한 정보에 기반한 결정이 아닙니다.

결정 이론에 대한 매우 빠른 배경입니다. 체스는 완벽한 정보를 담고있는 게임입니다. Texas Hold'em은 숨겨진 정보가 있기 때문에 다른 플레이어에게 공개되지 않는 카드가 아닙니다.

상황이 복잡하면 수집 한 불완전한 정보를 바탕으로 가장 중요한 것을 결정해야합니다. 이것은 귀하가 내린 결정이 실제로 최고가 아닐 수도 있음을 의미합니다. 하지만 더 많이 알수록 더 나은 결정을 내릴 수 있습니다.

첫인상

웹 사이트는 저에게 첫인상으로 간주됩니다. threejs.org 의 랜딩 페이지 는 깨끗하고 매우 인상적인 프로젝트를 보여줍니다. babylonjs.com 의 사이트 는 미니멀하고 실시간 렌더링의 최고의 기능을 보여 주지만 즉시 매력적이지는 않습니다.

선적 서류 비치

프로젝트에 대해 진지하게 생각하는 경우 소프트웨어 도구 문서에주의를 기울여야합니다. 사실, three.js와 babylon.js는 당신이 찾고있는 것을 찾은 후에 아주 좋은 문서를 가지고 있습니다 .

Three.js는 다른 소프트웨어와 마찬가지로 기대할 수있는 방식으로 문서를 구성합니다. babylon.js는 몇 가지 혁신적인 아이디어를 가지고 있습니다. 특히 Playground가 문서화 예제로 많이 얽혀 있지만 탐색하기가 쉽지 않습니다. CatmullRom을 사용하려면 시도해보십시오. three.js에서 얼마나 쉽게 찾을 수 있는지와 babylon.js의 문서 시스템이 얼마나 혼란 스러운지 비교할 수 있습니다.

시작하기

Babylon.js에는 three.js가 제공하지 않는 Playground가 있습니다. 프로그램이 무엇을 할 수 있는지에 대한 빠른 시작을 제공하지만 즉시 명확하지 않은 한 가지는 Playground 를 자신의 응용 프로그램으로 변환하는 방법 입니다. 개발자의 목표는 자신을 구축하는 것입니다.

Babylon.js는 비선형적인 학습 방법을 제공하는 것 같습니다. 다음에 무엇을 읽을 지 끊임없이 선택해야하지만, 새로운 사람이 무엇을 배워야하는지 알기조차 쉽지 않습니다.

Three.js는 일반적인 학습 단계를 제공합니다. 합리적인 프로그래밍 배경을 가진 사람은 쉽게 따라 할 수 있습니다.

1 장 : Three.js

위의 모든 이유로 나는 three.js를 선택했습니다.

마감일이있어서 프로젝트 작업을 직접 시작했습니다. 프로젝트에 대해 간략히 설명하고 three.js에 대해 다시 설명하겠습니다.

위성 추적기의 데이터에서 새의 비행 경로를 보여주는 대화 형 3D지도를 만들고 싶었습니다. 지형에 대한 3D 모델은 매우 무겁기 때문에 윤곽을 풍경에 대한 스타일 화 된 프리젠 테이션으로 사용하고 싶습니다.

폴란드의 사랑 새 (데이터 시각화, Rebecca Xu, Sean Zhai)

three.js에서 작업하는 동안 다음과 같은 것이 이상적이지 않다는 것을 알았습니다.

  • 여러 단계의 설정이 필요합니다. 또한 최상의 사용자 정의 설정을 얻으려면 새 프로젝트가 이러한 단계를 거쳐야하는 것 같습니다. 아마도 이것이 사람들이이 단계를 반복해서 수행하는 이유입니다. 매우 유용한 튜토리얼 중 하나는 red stapler 이며 그의 three.js 시리즈에서는 매번 새로운 설정이 사용됩니다.
불필요한 근본적인 기술적 복잡성을 드러냅니다. WebGL은 three.js의 기본 지원이지만 개발자가 추가 작업을 수행하거나 OpenGL의 렌더링 루프의 세부 사항을 이해하는 데 부담을주지 않아야합니다. 클래스를 디자인하고 깨끗한 코드를 작성하는 것은 다소 어렵습니다. 이것에 대해 (전적으로) three.js를 비난해서는 안되지만, three.js의 구조와 관련이 있다고 생각합니다.

// https://discoverthreejs.com/book/first-steps/first-scene/
// create a geometry 
const geometry = new THREE.BoxBufferGeometry( 2, 2, 2 );
// create a default (white) Basic material 
const material = new THREE.MeshBasicMaterial();
// create a Mesh containing the geometry and material 
const mesh = new THREE.Mesh( geometry, material );
// add the mesh to the scene 
scene.add( mesh );

// create the renderer 
const renderer = new THREE.WebGLRenderer();  
renderer.setSize( container.clientWidth, container.clientHeight ); renderer.setPixelRatio( window.devicePixelRatio );
// add the automatically created <canvas> element to the page container.appendChild( renderer.domElement );
// render, or 'create a still image', of the scene 
renderer.render( scene, camera );

나는 자바 스크립트에 대한 불평을 피할 방법이 없기 때문에 그만해야한다는 것을 알고 있습니다. 제가 가장 좋아하는 프로그래밍 언어는 실제로 Python입니다. 파이썬으로 일을 할 수있는 방법을 안다면 JavaScript와 사랑에 빠지기가 정말 어려울 것입니다.

즉, three.js로 작업 할 수 있고 새의 비행 경로에 대한 3D 일러스트레이션을 만들 수 있었지만 진행 속도가 예상보다 느 렸습니다. 더 중요한 것은 경험을 즐기지 않고 지저분하다는 것입니다.

2 장 : Babylon.js

디자인 철학을 이해하려고 노력하면서 babylon.js를 다시 살펴보기로했습니다.

마이크로 소프트 프로젝트라는 것은 오픈 소스 커뮤니티에 유리한 이미지가 아니며, 마이크로 소프트조차 오랫동안 훨씬 더 친근 해졌습니다. Babylon.js의 설립자 인 David Catuhe가 말한 재미있는 부수적 인 이야기는 Microsoft가 Babylon.js가 취미 프로젝트로 자체 회사의 사람들에 의해 개발되었다는 것을 몰랐다는 것입니다.

Babylon.js는 TypeScript로 작성되었습니다. Babylon.js가 TypeScript를 채택하기로 한 결정을 설명하는 2014 년에 작성된이 블로그를 읽을 수 있습니다.

디자인 철학

이것이 제가하는 일 중 하나입니다. 오픈 소스 라이브러리를 사용하기 전에 누가 도구를 작성했는지 알아 봅니다. 프로젝트 배후에있는 사람을 아는 것은 자신감을 줄 수 있으며 때때로 다른 것을 찾도록 마음을 바꿀 수 있습니다.

이전에 Ricardo Cabello의이 프레젠테이션을 봤는데 매우 인상적이었습니다. 여기에 발명가의 three.js 이야기가 있습니다.

Babylon.js는 David Catuhe와 Dave Rousset이 아티스트 Michel Rousseau 의 도움을 받아 발명했습니다 .

Microsoft의 SPM David Rousset : 오픈 소스 프로젝트를 추진하는 것은 코드 작성뿐 아니라…

그런 다음 David Rousset의 블로그 Dans ma Bulle 에서 이것을 읽었습니다 . 그는 프랑스어로 썼습니다 (아래에 영어 번역이 있습니다).

우리는 우리 모두가 같은 행성에 살고 있다고 믿는 경향이 있지만 실제로는 우리 각자가 같은 장소에있는 거품 속에 살고있는 것처럼 느껴집니다. 이러한 거품은 때때로 서로 얽히거나 내부에 포함될 수 있으며 때로는 다행스럽게도 또는 불행하게도 다른 거품과 완전히 분리되어 있습니다. 그러면 마치 우리가 평행 우주에 살고있는 것처럼 보입니다. 우리는 그들과 상호 작용하지 않고 약간 흐릿한 먼 거리를 볼 수 있습니다.

이 블로그의 날짜는 2019 년 4 월 5 일, Covid-19 대유행 이전입니다. 그의 개인적인 이야기 였고 기술적 인 것은 아니었지만 저에게 깊은 감동을주었습니다.

TypeScript

Babylon.js가 TypeScript로 코드베이스를 다시 작성하기로 결정한 순간이있었습니다. 여전히 JavaScript를 사용하여 Babylon.js를 개발할 수 있지만 언제 Babylon.js가 그러한 조치를 취했는지 알아볼 가치가 있습니다.

TypeScript는 Anders Hejlsberg가 발명했습니다. 이름으로는 (당신이 얼마나 많은 비트 기억하고, 컴퓨터 프로그래밍에서 엄격하게 적용 데이터 형식에 대한 약간의 고통스러운 감정을 트리거 할 수 부호없는 긴 )하지만, 타이프 라이터는 훨씬 더 사실이다. 강력한 형식의 프로그래밍이 올바르게 수행되었습니다.

아마도 대부분의 책임감있는 자바 스크립트 프로그래머들은 자바 스크립트에 대해 들어봤을 것입니다 : Douglas Crockford의 The Good Parts .

JavaScript에는 아름답고 우아하며 표현력이 뛰어난 언어가 있으며 좋은 의도와 실수로 가득한 더미 아래에 묻혀 있습니다.

TypeScript는 JavaScript의 상위 집합이며 좋은 부분을 기반으로 구축되었습니다. JavaScript는 제대로 처리되지 않으면 매우 혼란 스러울 수 있습니다. 상당히 개선되었지만 프로그래밍하는 동안 언어 자체에주의를 기울여야합니다.

아마 좋은 농담이 아닐 수도 있습니다.

얼마나 많은 사람들이 JavaScript를 즐겨 찾기로 뽑을 지 잘 모르겠습니다. 내 의심은 JavaScript가 선택이지만 다른 선택의 결과라는 것입니다. 이제 TypeScript는 대안을 제공합니다. 시도해 주시겠습니까?

좋은 소식은 학습에 대해 걱정할 필요가 없다는 것입니다. TypeScript와 Babylon.js를 함께 배울 수 있습니다. 제안은 거절 할 수 없습니다.

TypeScript에 대해 조금 이해하면 도움이됩니다. 아마도 간단한 소개 일뿐입니다. 자바 스크립트를 견뎌냈다면 이것은 비교할 수없는 일입니다.

그런 다음 TypeScript에서 Babylon.js를 개발하기위한 환경을 설정할 수 있습니다.

참을성이없는 Babylon.js TypeScript 프로젝트 설정

그 후 놀이터에서 몇 가지 예를 들어보십시오. Babylon.js는 놀이터에서 모든 예제의 JavaScript 및 TypeScript 버전을 나란히 제공합니다.

장면 그래프

사람들이 이미 카메라, 조명 및 재료의 개념을 이해하고 있기 때문에 컴퓨터 그래픽이 영화 스튜디오에서 용어를 빌리는 것은 자연스러운 것처럼 보입니다. 3D 장면은 매우 복잡 할 수 있습니다. 애니메이션 소프트웨어의 인터페이스를 보면 알 수 있습니다.

Maya 및 RenderMan

일반적으로 render 라고하는 최종 이미지를 생성하는 처리 입니다. 3D 장면은 장면 그래프로 설명됩니다. 장면 구성은 프로젝트 생성의 주요 부분입니다. Three.js와 비교할 때 Babylon.js는 장면을 만드는 데 몇 가지 추가 단계를 수행합니다.

Three.js를 먼저 살펴보십시오. Three.js는 프로그래밍에 필요한 모든 수단을 제공하지만 바로 그랬습니다. OpenGL / WebGL 지식이있는 사람이라면 누구나 친숙 함을 기대할 수 있습니다. 그러나 숫자를 조정하기 위해 3D를 프로그래밍하는 워크 플로는 느릴 수 있습니다.

장면 그래프

Babylong.js는 정말로 더 많은 도움을 주려고 노력했습니다. Babylon.js로 작업 할 수있는 도구 세트와 더 많은 방법을 제공합니다. 모든 좋은 의도로 인해 Babylon.js로 처음 시작하는 사람에게는 매우 혼란 스러울 수 있습니다.

  • 플레이 그라운드는 라이브 코딩을 할 수있는 곳입니다. 버전 관리 시스템이 내장되어 있으며 지금까지 만들어진 모든 것을 유지하는 것 같습니다. 플레이 그라운드를 저장할 때 몇 가지 태그를 추가해야합니다. 그렇지 않으면 찾지 못할 수도 있습니다.
  • Sandbox는 Maya 또는 Blender와 같은 소프트웨어에서 모델을로드해야하는 경우 3D 모델을 검사 할 수있는 곳입니다.
  • NME (Node Material Editor)는 이미 Babylon.js에 능숙 할 때 정말 훌륭하며 Maya의 Shading Networks와 유사한 셰이더를 개발하기위한 프로덕션 품질의 시각적 프로그래밍 도구입니다.
  • 내보내기를 통해 다른 소프트웨어로 내보낼 수 있습니다.
  • Spector.js는 WebGL 검사 도구입니다.

장면 그래프에 최적화 된 구문

three.js와 비교하면 같은 작업에 대해 babylon.js는 더 적은 코드를 필요로합니다.

이것은 three.js에서 실린더를 만드는 방법입니다.

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 ); 
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); 
var cylinder = new THREE.Mesh( geometry, material ); 
scene.add( cylinder );

babylon.js에서 실린더는 상단과 하단의 크기가 같은 원뿔로 간주됩니다.

var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, tessellation: 4}, scene);

결론

모든 비교에는 결론이 필요합니다.

그러나 그것은 당신이하고 싶은 일에 달려 있습니다. 일부 프로젝트에는 WebGL 래퍼 만 필요합니다. 이를 위해서는별로 중요하지 않습니다. three.js 또는 babylon.js를 자유롭게 사용하십시오.

리틀 스트 도쿄 (글렌 폭스)

Littlest Tokyo 프로젝트 는 three.js의 예입니다. 모델링 및 애니메이션은 외부 소프트웨어에 의해 수행되는 반면 three.js는로드 및 표시 만합니다.

씬을 만들기 위해 많은 양의 프로그래밍을하고 싶다면 three.js보다 babylon.js를 추천합니다. TypeScript로 babylon.js를 프로그래밍하는 것은 babylon.js에서 돌아 다니는 방법을 알고 있으면 즐겁습니다.

처음에는 babylon.js가 다소 낯설게 느껴졌습니다. 아마도 프랑스어 일 것입니다. 조금 길을 잃었다 고 느낄 수 있지만 일이 훨씬 쉬워지고 있습니다. three.js보다 프로그래밍하는 것이 더 빠르며 몇 줄의 코드를 깔끔한 방식으로 작성합니다.

프랑스의 행동, 카프 레츠 방식 (1987)

발문

어느 화창한 오후 (Covid-19 전후)에 누군가가 들어와 WebGL에 대해 물어보기 시작했을 때 저는 테이블 옆에 앉아있었습니다. 나는이 모든 이야기를 들려 주었고 누군가가 나를 이해한다고 느꼈다.

건배.

(특히 저에게 프로그래머 인 경우 경험을 공유해주세요. 프로그래머가 이야기를 나누기를 바랍니다.)

Suggested posts

JavaScript의 이벤트 루프

호출 스택, 웹 API, 이벤트 대기열, 마이크로 작업, 매크로 작업

JavaScript의 이벤트 루프

이벤트 루프는 JavaScript의 비동기 프로그래밍의 비밀입니다. JS는 단일 스레드에서 모든 작업을 실행하지만 몇 가지 스마트 데이터 구조를 사용하면 멀티 스레딩의 환상을 얻을 수 있습니다.

기계 학습 워크 플로를 실행하여 데이터를 변환하고 txtai로 AI 기반 텍스트 인덱스를 구축합니다.

데이터 흐름에 NLP 변환 적용

기계 학습 워크 플로를 실행하여 데이터를 변환하고 txtai로 AI 기반 텍스트 인덱스를 구축합니다.

txtai는 기계 학습 워크 플로우를 실행하여 데이터를 변환하고 AI 기반 텍스트 인덱스를 구축하여 유사성 검색을 수행합니다. txtai는 텍스트 스 니펫, 문서, 오디오 및 이미지 인덱싱을 지원합니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.