【WebGL初学系列之五】旋转,平移,缩放

本文是WebGL初学者系列的第五篇,主要介绍如何在WebGL中实现对象的旋转、平移和缩放操作,通过JavaScript和Canvas技术,探索3D图形编程的基本技巧。
摘要由CSDN通过智能技术生成

nbcoder.com地址:http://nbcoders.com/webgl-chu-xue-xi-lie-zhi-wu-ai.html

    最近把WebGL做的相关Demo已经放在  http://www.nbcoders.com 上了,这样就可以直观的进行看效果。
    地址:     http://lab.nbcoders.com/ixshells/ 
    本文旋转平移缩放Demo的地址:  http://lab.nbcoders.com/ixshells/Html/ScaleRotateTranslate.html 
    好吧,回到本文。从Demo中我们可以看出,这里画出了三个三角形,也就是三个模型。让后对这三个模型分别进行旋转,平移,缩放。所以,在从上几篇文章的内容来看,这里增加了多模型操作和旋转,平移,缩放操作。所以,文章从以下的步骤进行总结讲解:
    1. 初步了解矩阵操作(因为多模型和平移旋转缩放操作都需要用到矩阵操作,矩阵操作很重要,在WebGL中用处相当大)。
    2. 建立多个模型。
    3. 进行旋转,平移,缩放操作。

1 : 了解矩阵的基本操作
    矩阵的计算,其实也不复杂。在WebGL中重要的不是具体的计算方法,而是使用方法,在WebGL中最关心的是矩阵操作中最后所得到的结果。这里为了让自己印象深刻一些,还是简单的介绍一下对于WebGL相关的矩阵计算操作,。
    因为我们在后面不会直接用到矩阵计算相关,所以这里就简单举一个平移的例子,如果要了解更多矩阵计算的相关操作,可以去看看线性代数相关内容。平移是说的对象的每一个顶点都移动一个相同的距离。平移矩阵和某点p的表示如下:
这里将平移矩阵和点p的矩阵矩阵相乘,结果如下:
矩阵的计算已经知道了,但是在WebGL中,我们并不是关心的矩阵计算的过程。  所以矩阵计算的操作用了 glMatrix-0.9.5.js,它提供了矩阵向量和矩阵类,封装了一些矩阵和相关的一些操作。具体
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值