Three.js 및 Babylon.js : WebGL 프레임 워크 비교

코어 포인트

3.js와 babylon.js는 웹 개발자에게 애니메이션 로고 및 완전 대화 형 3D 게임과 같은 기능이 풍부한 WebGL 작품을 만들기위한 추상적 인 기초를 제공하는 강력한 WebGL 프레임 워크입니다.

3.js (2009 년에 시작)는 웹 기반 렌더러를 사용하여 GPU 향상 3D 그래픽 및 애니메이션을 만들기 위해 Universal Web Animation에 이상적인 도구가됩니다. Babylon.js (2013 년 Microsoft가 출시 한)는 웹 기반 게임 개발 및 충돌 감지 및 반 알리 아스와 같은 기능에 중점을 둔보다 목표적인 접근 방식을 취합니다.

두 프레임 모두 장면, 렌더러, 카메라, 객체 애니메이션 모델을 따르며 유사한 3D 애니메이션을 만드는 데 사용할 수 있습니다. 그러나 Babylon.js는 엔진 및 맞춤형 조명과 같은 전통적인 게임 엔진의 요구에 중점을 두어 3.js와 구별됩니다.
• <.> 3.js와 babylon.js는 모두 고성능을 제공하지만 3.JS는 단순성과 사용 편의성으로 유명하며 초보자 또는 소규모 프로젝트에 적합합니다. 더 복잡한 프로젝트의 경우.
• 
  오늘날의 웹 브라우저는 Tim Berners Lee 경과 Nexus 소프트웨어 시대 이후 큰 진전을 보였습니다. WebGL과 같은 우수한 JavaScript API 덕분에 최신 브라우저는 타사 플러그인없이 고급 2D 및 3D 그래픽을 완전히 렌더링 할 수 있습니다. 전용 그래픽 프로세서의 성능을 활용하여 WebGl을 사용하면 웹 페이지가 동적 음영 및 사실적인 물리적 효과에 액세스 할 수 있습니다. 당신이 추측 할 수 있듯이, 그러한 강력한 API는 일반적으로 단점을 무너 뜨립니다. WebGL은 물론 예외는 아니며, 그 단점은 복잡성에 있습니다. 그러나 걱정하지 마십시오. WebGL을 사용할 때 더 쉽고 효율적으로 만들기 위해 설계된 두 가지 강력한 프레임 워크를 탐색했습니다.
• 3D 프레임 워크의 기원 <.> 인기있는 Three.JS와 새로운 Babylon.js는 웹 개발자가 애니메이션 로고에서 완전히 대화식 3D 게임에 이르는 기능이 풍부한 WebGL 작업을 만들 수있는 추상적 인 기초를 제공합니다. Three.JS는 2009 년 4 월에 시작하여 원래 ActionScript로 작성되었으며 나중에 JavaScript로 번역되었습니다. WebGL이 도입되기 전에 만들어 졌기 때문에 Three.JS는 모듈 식 렌더링 인터페이스의 고유 한 장점을 가지고있어 WebGL 외에도 SVG 및 HTML5의 Canvas 요소와 함께 작동합니다. Babylon.js는 2013 년 여름에 후발 자로 출시되었습니다. Microsoft, Babylon.js 및 Internet Explorer 11은 공식적으로 WebGL API를 처음으로 지원합니다. Redmond의 실험실에서 시작 되었음에도 불구하고 Babylon.js (및 Three.Js)는 여전히 오픈 소스 라이센스를 유지합니다.
• 미묘한 디자인 차이
3.js와 babylon.js는 모두 WebGL 애니메이션의 복잡성을 처리하기 위해 사용하기 쉬운 라이브러리를 제공합니다. 장면, 렌더러, 카메라 및 객체 애니메이션 모델에 따라 이러한 프레임 워크는 WebGL 사용 방식에서 매우 유사합니다. HTML에서 그것들을 사용하는 것은 해당 JavaScript 파일을 연결하는 것만 큼 간단합니다. 참고 : babylon.js에는 몇 가지 종속성이 있으며 오픈 소스 핸드를 포함해야합니다.

3.js :

<🎜>

<.> babylon.js : <🎜 🎜>

이 두 프레임 워크의 주요 차이점은 의도 된 용도입니다. 두 프레임 워크를 모두 사용하여 동일한 3D 애니메이션을 만들 수 있지만 각 프레임 워크의 생성 목표를 이해하는 것이 중요합니다. Three.JS는 웹 기반 렌더러를 사용하여 GPU가 강화 된 3D 그래픽 및 애니메이션 작성의 한 가지 목표 만 있습니다. 따라서이 프레임 워크는 단일 애니메이션 필드에 중점을 두지 않고 웹 그래픽에 대한 매우 광범위한 접근 방식을 채택합니다. 이 유연한 디자인은 3.js가 로고 또는 모델링 응용 프로그램과 같은 범용 웹 애니메이션에 이상적인 도구입니다. Three.JS는 WebGL에 광범위한 애니메이션 기능을 제공하려고하지만 Babylon.js는보다 목표로하는 접근 방식을 취합니다. 원래 Silverlight 게임 엔진으로 설계된 Babylon.js는 여전히 웹 기반 게임 개발 및 충돌 감지 및 앨리어싱과 같은 기능을 선호합니다. 앞에서 언급했듯이 Babylon.js는 여전히 일반적인 웹 그래픽 및 애니메이션이 가능합니다.

<🎜>
<🎜>

<<> WebGL 기술의 나란히 시연 <🎜

이 두 프레임 워크의 유사점과 차이점을 추가로 입증하려면 빠른 3D 애니메이션을 구축해 봅시다. 우리가 선택한 항목은 매우 간단한 큐브이며 느린 회전을 적용합니다. 이 두 샘플 프로젝트를 만들 때이 두 기술이 점차적으로 분기되고 고유 한 강점을 보여주는 방법을 이해해야합니다. 시작합시다. 거의 모든 유형의 창의적인 프로젝트를 구축하는 첫 번째 단계는 3D 애니메이션이 포함 된 빈 캔버스를 포함시키는 것입니다.

3.js : <🎜 🎜> <.> babylon.js : <🎜 🎜>

3.js에서는 빈 DIV를 애니메이션 컨테이너로 만들면됩니다. 반면 Babylon.js는 잘 정의 된 HTML5 캔버스를 사용하여 3D 그래픽을 저장합니다. 다음으로 렌더러를로드하여 장면을 준비하고 캔버스에 그려야합니다.

3.js : <🎜 🎜>

<.> babylon.js : <🎜 🎜>

여기에는 너무 멋진 것이 없습니다. 렌더러 (Babylon.js의 경우 엔진)를 초기화하고 캔버스에 부착합니다. 카메라와 큐브를 수용 할 수있는 장면을 설정함에 따라 다음 단계는 조금 더 복잡해졌습니다.

<div style="height:250px; width: 250px;" id="three"></div>

3.js : <🎜 🎜>

var div = document.getElementById('three');

<.> babylon.js : <🎜 🎜>

여기서 우리는 거의 같은 방식으로 장면을 만듭니다. 그런 다음 카메라 (두 프레임 모두 다른 유형의 카메라를 지원 함)를 구현하여 실제로 생성 된 장면을 볼 것입니다. 카메라에 전달 된 매개 변수는 시야, 종횡비 및 깊이와 같은 카메라의 시청각에 대한 다양한 세부 사항을 결정합니다. 우리는 또한 Babylon.js에 대한 방향을 포함 시켰으며 나중에 어두운 애니메이션을 보지 않기 위해 장면에 첨부했습니다.

캔버스, 장면 및 카메라를 사용하면 렌더링과 애니메이션 전에 큐브 자체를 그려야합니다.

<div style="height:250px; width: 250px;" id="babylon">
  <canvas id="babylonCanvas"></canvas>
</div>

3.js : <🎜 🎜>

var canvas = document.getElementById('babylonCanvas');

<.> babylon.js : <🎜 🎜>

<🎜>

먼저, 지정된 크기의 큐브 객체를 만든 다음 큐브에 그릴 재료/메쉬 (텍스처 생각)를 만듭니다. 모든 이미지 파일은 텍스처로 사용할 수 있으며 두 프레임 워크는 블렌더와 같은 3D 모델링 도구의 메쉬 내보내기를 지원합니다. 마지막 단계에서는 약간의 회전을 애니메이션 한 다음 장면을 렌더링합니다.

3.js : <🎜 🎜>

<.> babylon.js : <🎜 🎜>

3.js 및 babylon.js는 모두 애니메이션 또는 렌더링 루프를 사용하여 캔버스를 업데이트하고 새로운 회전 그래픽을 그립니다. 또한 Three.js는 Babylon.js와 약간 다르며 렌더링 할 때 카메라를 부착합니다. 우리의 최종 제품은 공중에서 부드럽게 회전하는 두 개의 큐브입니다. 아주 간단합니까?

<🎜 🎜> <<> 두 프레임의 이야기

<🎜>
<🎜>

<.> 그게 다야. 두 가지 매우 강력한 WebGL 프레임 워크가 동일한 기준으로 구축되었지만 향상된 웹 그래픽의 다양한 측면에 중점을 둡니다. 다음 장면, 렌더러, 카메라, 객체 패러다임 모두에서 애니메이션에서 접근 방식이 얼마나 유사한 지 직접 보았습니다. 유사성에도 불구하고 Babylon.js는 엔진 및 맞춤형 조명과 같은 전통적인 게임 엔진의 요구에 중점을 두어 영리하게 구별됩니다. 궁극적 으로이 두 가지 비교적 젊은 프레임 워크를 사용하면 웹 개발자가 WebGL이 제공하는 강력한 3D 기회를 더 쉽게 활용할 수 있습니다. 따라서 3D 웹 개발에 관심이있는 사람은이 최첨단 기술을 신중하게 연구해야합니다.

<🎜 🎜> <<> (데모 코드 다운로드를위한 zip 파일 링크가 포함되어 있어야 함) <🎜 🎜 🎜>

<div style="height:250px; width: 250px;" id="three"></div>

(3.js 및 babylon.js에 대한 자주 묻는 질문은 여기에 포함되어야합니다)

공간 제한으로 인해 여기에 전체 FAQ 섹션을 추가 할 수 없습니다. 그러나 제공된 원본 텍스트의 FAQ 섹션을 기반으로보다 간결하고 명확한 버전으로 재구성하여 연마 할 수 있습니다.

위 내용은 Three.js 및 Babylon.js : WebGL 프레임 워크 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!