本学习笔记存在意义:阅读学习MDN教程中自己的想法。
Step.1 起点:Getting started with WebGL
Act.1 : 切换语言-> 中文
Act.2 : 已浏览一遍,脑袋记忆不住的地方是webGL 语言中的关键变量
MDN教程的开始,是准备HTML结构和Js脚手架。这个部分对于Js单刀手(没有章法的野生Js选手,如我),是新颖的,有学习价值的。
HTML关键内容:
<canvas id="glcanvas" width="640" height="480">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
Js关键内容1:
var gl; // WebGL的全局变量
...
function start() {
...
// 初始化 WebGL 上下文
gl = initWebGL(canvas);
// 只有在 WebGL 可用的时候才继续
if (gl) {...
Js关键内容2:
function initWebGL(canvas) {
// 创建全局变量
window.gl = null;
try {
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
...
可以看到,HTML页面加载JS行为,纯粹。JS部分,初始化等模块分离。能够做到如果起始部分发生错误,可以及时捕捉到。
Step 2. 使用WebGL创建2D内容
Act .1 将OpenGL ES Shading Lauguage 放在HTML中,通过dom读取内容
关键代码:
<script id='vertex' type='x-shadow/vertex'>...</script>
...
function getShader(){...}
...
vertexShader = getShader(gl,"shader-vs");
...
shader=..按照条件使用gl.createShader
...
获得之后,source绑定,然后编译。
最后返回shader
取得shader,绑定shader,链接program(穿件),
当这个步骤不能用1~2行代码完成时,将其变成函数方式,确保init方法足够整洁。
一个gl可以attachShader多个。
Act .2 创建对象
关键代码:
var horizAspect = 480.0/640.0; // 透视?
function initBuffers() {
squareVerticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
var vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];//矩阵
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
}
文档段落读起来,感觉是将GLSC语言中的的方式在Js中赋值。
创建缓冲区,然后绑定之
Act .3 绘制场景
关键代码:
function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);//清空
perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);//透视
loadIdentity();
mvTranslate([-0.0, 0.0, -6.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
Act .4 矩阵运算
空间坐标系转换会用到矩阵转换。这儿透视角度参数的计算显然是需要用到矩阵计算的。
然后,使用别人写好的工具。跳过了这么难的一大块内容,专注于想法的实施。
。。。 结束
。多看几遍sample1~7,等能够默写出来旋转的正方体了再写心得。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。