WebGL 및 three.js 학습

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를이에 기억 알파 , 그리고 당신이 준비 할 필요가 그래서 자주 변화하고 있습니다. 대부분의 사람들은 예제를 연구하여 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 중에서 선택의 여지가 없었습니다.

---

나는 하루에 Papervision3D뿐만 아니라 Unity3D 배경에서 왔으므로 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 과 같은 것을 따라갈 수 있습니다 . 3 개의 매트릭스 배열이 이미 설정되어 있으므로 필요할 때 업데이트하기 때문에 매트릭스 형 배열을 설정할 필요가 없습니다. 셰이더는 처음부터 쓸 수 있습니다. 간단한 컬러 렌더링은 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

참고URL : https://stackoverflow.com/questions/11966779/learning-webgl-and-three-js