API:
https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API
WebGL 3D Perspective:
https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-3d-orthographic.html#toc
https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html
webgl-examples:
https://github.com/mdn/webgl-examples/
一个使用方便的 JavaScript处理向量和矩阵运算的库。sylvester:
http://sylvester.jcoglan.com/docs.html
性能监视器(监视FPS):
https://github.com/mrdoob/stats.js
动画引擎
https://github.com/tweenjs/tween.js
顶点着色器根据需要, 也可以完成其他工作。例如,决定哪个包含 texel面部纹理的坐标,可以应用于顶点;通过法线来确定应用到顶点的光照因子等。依此类推,这些信息可以存储在变化(varying)或属性(attributes)属性中,以便与片段着色器共享
<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>
等价于:
` ?????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; ?????} ???`
等价于:
[ "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;", "}"].join( "\n" );
webgl学习路线总结
原文地址:https://www.cnblogs.com/guxingzhe/p/8425382.html