WebGL 및 three.js 학습

나는 새로운 웹 브라우저에서 3D 컴퓨터 그래픽에 대해 배우기 시작했습니다. 브라우저에서 3D 게임을 만들고 싶습니다. WebGL과 three.js를 모두 배운 사람이라면 ...

1. three.js를 사용하려면 WebGL에 대한 지식이 필요합니까?

2. three.js와 WebGL의 장점은 무엇입니까?

야망이 크므로 기본을 배우기 위해 시간을 투자해야합니다. 처음 배우는 것은 중요하지 않습니다. 원한다면 동시에 배울 수 있습니다. (그게 내가 한 일이야.)

이것은 다음을 이해해야 함을 의미합니다.

1. WebGL 개념
2. Three.js
3. 기본 수학적 개념

Three.js. Three.js는 WebGL의 많은 세부 사항을 추상화하는 훌륭한 작업을 수행하므로 개인적으로 프로젝트에 Three.js를 사용하는 것이 좋습니다. 그러나 Three.js는 alpha 이며 자주 변경되므로 준비해야합니다. 대부분의 사람들은 예제를 연구하여 Three.js를 배웁니다. 오래된 서적과 튜토리얼은 피하고 네트에서 구 버전의 라이브러리에 연결되는 예제는 피하십시오.

WebGL. Three.js를 사용하는 경우 WebGL에서 프로그래밍하는 방법을 몰라도 WebGL 개념을 이해하면됩니다. 즉, 다른 사람의 WebGL 코드를 읽고 읽은 내용을 이해할 수 있어야합니다. WebGL 프로그램을 처음부터 직접 작성하는 것보다 훨씬 쉽습니다. WebGLFundamentals.org 의 초보자 용 자습서 및 Learning WebGL 과 같은 인터넷상의 자습서를 사용하여 WebGL 개념을 충분히 배울 수 있습니다 .

수학. 다시 한 번, 개념을 이해해야합니다. 세 가지 좋은 책은 다음과 같습니다.

1. Fletcher Dunn과 Ian Parberry의 그래픽 및 게임 개발 을 위한 3D 수학 입문서

2. 게임 및 대화 형 응용 프로그램을위한 필수 수학 : James M. Van Verth와 Lars M. Bishop 의 프로그래머 안내서

3. Eric Lengyel의 3D 게임 프로그래밍 및 컴퓨터 그래픽 을 위한 수학

이것이 도움이되기를 바랍니다. 행운을 빕니다.

THREE.js의 https://www.udacity.com/course/cs291의 대화 형 3D 그래픽 온라인 교육 과정이 있습니다. 이 과정에는 실습 경험을위한 과제도 포함되어 있습니다. Three.js 및 컴퓨터 그래픽의 모든 기본 개념을 다룹니다.

내 개인적인 생각은 다음과 같습니다.

• 시간이 충분하면 둘 다 배울 수 있지만 WebGL은 Three.js보다 훨씬 낮은 수준입니다.
• 첫 번째 3D 프로젝트의 경우 전문가들은 용어와 일반적인 3D 모델에 익숙해지기 위해 Three.js와 같은 라이브러리를 사용하는 것이 좋습니다.

어느 방향을 선택하든 선형 대수 기술 을 배우고 연마하는 것이 좋습니다 . 그런 다음 MVP 차원 (모델보기 투영)에 대한 이해를 배우거나 개선하십시오 . 3. JS는 그 점을 많이 추상화 할 수 있지만 3D 개발에 대해 진지하게 생각하기 전에 이러한 개념을 잘 이해하는 것이 중요하다고 생각합니다.

OpenGL로 3D 프로그래밍을 처음 배울 때 MVP에 대한 입문 기사를 작성했습니다 . 변환 행렬이 무엇인지, 다양한 차원 / 공간과 어떤 관계가 있는지 설명 할 수있을 때까지 객체를 화면에 렌더링 할 수는 있었지만 3D 프로그래밍을 전혀 몰랐습니다 .

게임을 만드는 것이 목표이므로 나중에 코드를 작성하는 데 도움이되는 Three.js와 같은 프레임 워크를 사용하더라도 원시 WebGL을 먼저 배우면 많은 이점이 있다고 생각합니다.

"WebGL은 2D API이며 3D API는 아닙니다"

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

이 기사는 three.js와 같은 WebGL과 3d 라이브러리의 근본적인 차이점을 설명합니다.
WebGL 또는 Three.js 중에서 선택의 여지가 없었습니다.

나는 Unity3D 배경과 Papervision3D에서 왔기 때문에 3D 공간을 다루는 방법에 대해 잘 알고있었습니다. Three.js는 WebGL 프로젝트를 처리하는 방법을 배우기위한 첫 단계입니다. API는 매우 훌륭하고 매우 강력하며 다른 3D 기술을 사용하는 경우 시간이 거의 걸리지 않습니다.

나는 Threejs.org의 예제들과 함께 많은 시간을 보냈다-그중 많은 것들이 있으며 그것들을 당신을 올바른 방향으로 이끌어내는 데 매우 능숙합니다. 문서는 다른 webGL 3D API와 비교하는 경우 특히 적합합니다.

또한 앱 스토어 (윈도우> 앱 스토어)에서 Unity3D의 무료 버전과 무료 콜라다 (내가 얻었을 때 무료)를 가져 오는 것도 고려할 수 있습니다. Unity에서 장면을 설정하고 Three.js와 함께 사용할 수 있도록 Collada로 내보내는 것이 쉽다는 것을 알았습니다.

또한 Neo ( http://rockonflash.com/webGL/three/neo.js ) 라는 Three.js와 함께 사용하는이 클래스를 게시했습니다 . 프로젝트에 추가 한 다음 Neo.JackIntoThree ()를 호출하면 프로젝트에서 사용할 메소드 / 속성을 Object3D에 추가합니다. 장면 등을 디버깅 할 때 DrawAllAxis ()와 같은 것들이 매우 중요합니다.

하지만 Three.js는 훌륭한 방법입니다. 자신 만의 셰이더 / 오브젝트 등을 작성할 수있을만큼 유연하고, 목표를 달성하는 데 도움이 될 정도로 강력합니다.

나는 three.js를 집어 들었지만 GLSL로 뛰어 들었고 three.js shaderMaterial로 많은 것을 실험했습니다. 한 가지 방법-three.js는 여전히 많은 것을 추상화하지만 모든 렌더링 (투영, 애니메이션) 기능에 매우 깨끗하고 낮은 수준의 액세스를 제공합니다.

이런 식으로, 당신은 이 멋진 open-gl tutorial 과 같은 것을 따라갈 수 있습니다 . 세 개의 배열이 이미 배열되어 있으므로 필요할 때 업데이트하기 때문에 행렬 형식의 배열을 설정할 필요가 없습니다. 그러나 셰이더는 처음부터 쓸 수 있습니다. 간단한 컬러 렌더링은 GLSL의 두 줄입니다. three.js를위한 포스트 프로세싱 플러그인도 있습니다. 모든 버퍼, 전체 화면 쿼드 및 이펙트를 수행하는 데 필요한 것들을 설정하지만 셰이더는 시작하기가 매우 간단합니다.

프로그래머블 쉐이더는 현대 3D 그래픽의 본질이기 때문에 내 대답에 요점이 없습니다. 또한 균일 한 공간에서 4 차원을 이해하는 것도 중요합니다.

이 책은 WebGL에 유용합니다.

방금 두 가지를 조금 배웠고 webgl의 기본 사항을 이해한다고 생각합니다 .webgl에 대한 소개가 충분하다고 생각한 다음 세 가지 js로 뛰어 들었습니다. WebGL의 기본 개념을 이해하면 매우 쉽습니다. 유용한 링크:

1. 가장 좋은 소개 : http://dev.opera.com/articles/view/an-introduction-to-webgl/
2. 종합 자습서 : http://www.johannes-raida.de/tutorials.htm