API:
WebGL 3D Perspective:
webgl-examples:
一个使用方便的 JavaScript处理向量和矩阵运算的库。sylvester:
性能监视器(监视FPS):
动画引擎
顶点着色器根据需要, 也可以完成其他工作。例如,决定哪个包含
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" );