WebGL Learning Route Summary

API:HTTPS://DEVELOPER.MOZILLA.ORG/ZH-CN/DOCS/WEB/API/WEBGL_APIWEBGL 3D perspective:https://webglfundamentals.org /webgl/lessons/zh_cn/webgl-3d-orthographic.html#tochttps://webglfundamentals.org/webgl/lessons/ Webgl-3d-perspective.htmlwebgl-examples:https://github.com/mdn/webgl-examples/A library of easy-to-use javascript processing vectors and matrix operations. Sylvester:http://sylvester.jcoglan.com/docs.html Performance Monitor (monitor fps): Https://github.com/mrdoob/stats.js animation engine https:// The github.com/tweenjs/tween.js vertex shader can do other work as needed. For example, decide which coordinates that contain the texel face texture, which can be applied to vertices, and normals to determine the illumination factor applied to the vertex. And so on, this information can be stored in the change (varying) or attribute (attributes) property to share with the fragment shader

<script id= "Shader-vs" type= "X-shader/x-vertex" >      attribute vec3 avertexposition;      Attribute Vec4 Avertexcolor;          Uniform mat4 Umvmatrix;      Uniform mat4 Upmatrix;            Varying lowp vec4 vcolor;          void Main (void) {        gl_position = Upmatrix * Umvmatrix * VEC4 (avertexposition, 1.0);        Vcolor = Avertexcolor;      }    </script>

Equivalent to:

'      attribute vec3 avertexposition;      Attribute Vec4 Avertexcolor;          Uniform mat4 Umvmatrix;      Uniform mat4 Upmatrix;            Varying lowp vec4 vcolor;          void Main (void) {        gl_position = Upmatrix * Umvmatrix * VEC4 (avertexposition, 1.0);        Vcolor = Avertexcolor;      }    `

Equivalent to:

["Attribute vec3 avertexposition;", "attribute Vec4 avertexcolor;", "Uniform mat4 Umvmatrix;", "Uniform mat4 upmatrix;", "Varying lowp vec4 vcolor;", "Void Main (void) {",  "gl_position = Upmatrix * Umvmatrix * VEC4 (avertexposition, 1.0);", c1/> "vcolor = Avertexcolor;", "}"].join ("\ n");

　　

WebGL Learning Route Summary