webgl学习路线总结

84 阅读 0 评论 56 点赞

我是靠谱客的博主傲娇萝莉，这篇文章主要介绍webgl学习路线总结，现在分享给大家，希望可以做个参考。

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)属性中，以便与片段着色器共享

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<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>

　　等价于：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
`
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;
}
`

　　等价于：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
[
"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" );