[3JS] WebGL & Three.js

공부순서

1. Basic
   • Scene 만들기
   • Object 추가하기
   • Materials 고르기
   • Texture 추가하기
   • Animation 추가하기
2. Classic
   • Geometry 만들기
   • 빛과 그림자
   • 3D와의 인터랙션
   • Particle 추가
3. Advanced
   • Physics, Realistic render 연출
   • Custom shader
   • Post-processing 추가
   • 나만의 Blender model 만들고 사용

What is Three.js?

It’s a 3D JS library that enables devs to create 3D experiences for the web. It works with WebGL(u can make it work with SVG & CSS, but not gonna get the same result)

---

What is WebGL?

Has the access to properties, methods, and etc… to create creative stuffs

• JavaScript API that renders triangles in a canvas at a remarkable speed
• compatible with most modern browsers
• fast cuz it uses the GPU of the visitor
• can also use WebGL to create 2D exp. (like Pixi.js)

---

+++ CPU vs GPU

uses CPU when doing calc. in JS

GPU working when drawing triangles

CPU can do calc. really fast but one by one. BTW GPU can do thousands of parallel calculations in one go

To draw a 3D model, the idea is to draw many tri. at the right position & colorize so that they look the way we want. The GPU will position all those points at once according to many factor.

Once the points are placed, the GPU will draw each visible pixel of those tri. Again, those thousands of pixels will be calculated and drawn in parallel extremely fast.

The instructions to place the points and draw the pixels are written in Shaders (also need to provide data to these shaders)

(ex) points positions, model transformation, the camera coordinates…

Native WebGL benefits from existing at a low level which enables optimizations and more control, cuz u r close to ur GPU to position things and colorize the pixels. BUT SUPER HARD;;

---

THREE.JS TO THE RESCUE!!

• JS library
• under MIT license
• Right above WebGL, close enough to native WebGL
• GOAL = drastically simplify the process of all of above
• you won't have to provide shaders and matrices like native WebGL
• still able to interact with WebGL & create ur own shader & provide ur own info.

---

Documentation

https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

---

Just Out of Curiosity…

• CPU 13-14, 59, 488, 501
• GPU 80, 454

---

✅ 퀴즈 인증