WegGL ( 1)

- . 3D- ( Maxon Cinema 4D), . , - - . :

, .

, 3D, , WebGL. , . , .

WebGL?

WebGL 3D. , - 3D WebGL. , WebGL , :

• . , . .
• . ( WebGL ). , - .
• iOS. . - Apple, , . WebGL , , .
• IE11 WebGL. , , .
• SVG 3D, . , SVG DOM 10 000. SVG.

, , webGL.

OBJ, . - , .

three.js, Babylon.js PixiJS ( 2D-). 3D- , . , 100 react-dom, ? 3D-, - 3D-. webgl obj model render. - - , . CodePen, . - , , . , WebGL, .

WebGL

, WebGL , - @webgl_ru ( ) WebGL ? , , , . , .

, , WebGL Fundamentals, , . , WebGL - , , . , WebGL Canvas , .

WebGL

, , API. API - /, WebGL repl node.js, repl javascript - . webgl OpenGL( - - ) GLSL. GLSL C , es3 javascript.

, webgl :

• webgl ( openGL, webgl).
• - , .
• GLSL. - . , . div absolute 300 .
• webgl -1 1, , -1 1, .
• .
• 2D/3D .

GLSL, 2 . .
(Vertex Shader) (Fragment Shader).

- , - . . , , .
, 1 1 . : " 30 50 , 5050, 7080, ".

:

(Vertex Shader)

// ,       .attribute vec4 a_position;//     mainvoid main() {  // gl_Position -    ,  //       gl_Position = a_position;}

(Fragment Shader)

//       ,    // . mediump    .   " "precision mediump float;void main() {  // gl_FragColor -    .  //     .  gl_FragColor = vec4(1, 0, 0, 1); //  }

attribute. ( webglfundamentals.org):

- , . , , , .., .

, . , 32- . , , ( 32- ), .

. , , .

Uniform-

Uniform- - , .

- , . , - - .

constying-

constying- . - , , .

x,y,z (z , 2D) . . () .

, ?

, , () , .

.

webgl , .

• , , . .
• , .

, . js 9 12 (12 3D). ( ), , . , . , transform: matrix(...n) css.

2D/3D , .

, , , 33 2D , 44 3D .

gl-matrix. webgl fundumentals.

Hello world webgl

hello world webgl? , ?

• canvas .
• webgl , webgl .
• .
• .
• drawArrays webgl.

.

( ), .

, , , , , threejs.

3D .

.