标签：webgl

注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。

本次的demo的运行结果

模型坐标变换矩阵的好处

添加一个持续循环的处理

使用setTimeout实现递归处理

arguments和callee属性

递归函数中的处理

// minMatrix.js中的矩阵相关的处理
// matIV对象的生成
var m = new matIV();

// 各种矩阵的生成和初始化
var mMatrix = m.identity(m.create());
var vMatrix = m.identity(m.create());
var pMatrix = m.identity(m.create());
var tmpMatrix = m.identity(m.create());
var mvpMatrix = m.identity(m.create());

// 视图x投影坐标变换矩阵
m.lookAt([0.0, 0.0, 5.0], [0, 0, 0], [0, 1, 0], vMatrix);
m.perspective(45, c.width / c.height, 0.1, 100, pMatrix);
m.multiply(pMatrix, vMatrix, tmpMatrix);

// 声明计数器
var count = 0;

// 持续循环
(function(){
    // canvasを初期化
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clearDepth(1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    
    // 计数器递增
    count++;
    
    // 使用计数器算出角度
    var rad = (count % 360) * Math.PI / 180;
    
    // 模型1按照一个圆形轨道进行旋转
    var x = Math.cos(rad);
    var y = Math.sin(rad);
    m.identity(mMatrix);
    m.translate(mMatrix, [x, y + 1.0, 0.0], mMatrix);
    
    // 完成模型1的坐标变换矩阵，并进行绘图
    m.multiply(tmpMatrix, mMatrix, mvpMatrix);
    gl.uniformMatrix4fv(uniLocation, false, mvpMatrix);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    
    // 模型2沿Y轴进行旋转
    m.identity(mMatrix);
    m.translate(mMatrix, [1.0, -1.0, 0.0], mMatrix);
    m.rotate(mMatrix, rad, [0, 1, 0], mMatrix);
    
    // 完成模型2的坐标变换矩阵，并进行绘图
    m.multiply(tmpMatrix, mMatrix, mvpMatrix);
    gl.uniformMatrix4fv(uniLocation, false, mvpMatrix);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    
    // 模型3进行放大缩小
    var s = Math.sin(rad) + 1.0;
    m.identity(mMatrix);
    m.translate(mMatrix, [-1.0, -1.0, 0.0], mMatrix);
    m.scale(mMatrix, [s, s, 0.0], mMatrix)
    
    // 完成模型3的坐标变换矩阵，并进行绘图
    m.multiply(tmpMatrix, mMatrix, mvpMatrix);
    gl.uniformMatrix4fv(uniLocation, false, mvpMatrix);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    
    // context刷新
    gl.flush();
    
    // 为了循环，进行递归处理
    setTimeout(arguments.callee, 1000 / 30);
})();

文章的最后，会给出demo的链接，大家可以直接查看完整的代码，HTML代码依然没有做任何修改。

这次处理的重点是在匿名函数外面声明了count，匿名函数中让这个变量每次递增，然后使用这个变量的值来进行模型坐标变换。
变量count对360取余数，然后用这个余数来计算弧度。
>获取弧度的代码

var rad = (count % 360) * Math.PI / 180;

第一个模型，使用弧度来计算sin和cos，得到X和Y就是移动的量。
第二个模型，为了沿着Y轴旋转，也使用了这个弧度作为旋转量。
第三个模型，使用弧度的sin值来计算了放大缩小的量。
注意这里频繁出现的multiply和rotate等函数，都是为了实现各种坐标变换而封装在minMatrix.js中函数。参数的指定可以看之前的文章（minMatrix.js和坐标变换矩阵），里面已经做了详细的解说。
另外，需要注意模型坐标变换的顺序，移动，旋转和放大缩小等各种变换，执行的顺序如果不对的话，结果就有变化了。这里之前的文章也都说过了，不清楚的人可以复习一下前面的内容。

总结

http://wgld.org/s/sample_005/

转载请注明：转自lufy_legend的博客http://blog.csdn.net/lufy_legend

[WebGL入门]十七，递归处理和移动?旋转?缩放,布布扣,bubuko.com

[WebGL入门]十七，递归处理和移动?旋转?缩放

标签：webgl

原文地址：http://blog.csdn.net/lufy_legend/article/details/38524763