请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

切换风格 注册 找回密码

html5源码-html5教程网



2

主题

1

听众

47

积分

新手上路

Rank: 1

贡献
0
金钱
2
发表于 2016-5-12 16:16:10 |显示全部楼层
翻译说明:水平有限并且不会逐字逐句翻译,只保证符合原文意思。
在上一篇文章中,我们创建了一个方形,下面很明显要给它添加一些颜色了。我们通过修改着色器来实现。
为顶点添加颜色
在GL中,对象是通过顶点集合来构建的,每个顶点包含位置和颜色。其他像素上的颜色(其他属性也如此,包括位置)是通过线性插值计算而得,自动创建一种平滑过度的渐变效果。之前我们没有指定顶点任何颜色,着色器为每个像素设置为白色,整个方形也是白色的。
假设我们希望渲染一种渐变效果,使得方形的四个角的颜色分别为:红色、蓝色、绿色和白色。首先要为4个顶点指定颜色,创建一个顶点的颜色数组,并存储在WebGL缓冲区中,我们需要在initBuffer()函数中添加如下代码:
  1. var colors = [
  2.     1.0,  1.0,  1.0,  1.0,    // 白色
  3. 1.0,  0.0,  0.0,  1.0,    // 红色
  4. 0.0,  1.0,  0.0,  1.0,    // 绿色
  5. 0.0,  0.0,  1.0,  1.0// 蓝色
  6.   ];
  7.   
  8.   squareVerticesColorBuffer = gl.createBuffer();
  9.   gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
  10.   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
  11. }
复制代码
这段代码开始时创建一个JavaScript数组,用来放置四个颜色向量。接着通过一个新的缓冲区来存储这些颜色,数组被转换为WebGL浮点数并存储在缓冲区中。
为了让这些颜色发挥作用,顶点着色器需要进行更新以便从颜色缓冲区中获取正确的颜色。
关键的差别在于对每个顶点来说,我们都将其颜色设置为数组中对应的颜色值。
为片段着色
我们的片段着色器之前是这样的:
<script id="shader-fs" type="x-shader/x-fragment">
    void main(void) {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
</script>
为了选择颜色,我们修改代码以便从vColor中获取颜色值:
  1. <script id="shader-fs" type="x-shader/x-fragment">
  2.     varying lowp vec4 vColor;
  3.         
  4.     void main(void) {
  5.         gl_FragColor = vColor;
  6.     }
  7. </script>
复制代码
修改很简单,每个片段根据自己相对顶点的位置会获得某个插值颜色,这个颜色不是固定的。
用颜色绘制
下面,该轮到在initShaders中添加代码来为着色程序初始化颜色属性了。
vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(vertexColorAttribute);
接着修改drawScene方法,以便在绘制方形时上色:
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
此时,如果你在WebGL兼容的浏览器里查看这个示例,你会看到下面的显示效果:

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

2

主题

0

听众

51

积分

注册会员

Rank: 2

贡献
0
金钱
1
发表于 2016-5-12 16:46:51 |显示全部楼层
看看真假。。。
回复

使用道具 举报

0

主题

0

听众

16

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-16 00:58:28 |显示全部楼层
OMG!介是啥东东!!!
回复

使用道具 举报

0

主题

0

听众

19

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-16 13:52:52 |显示全部楼层
前排支持下了哦~
回复

使用道具 举报

0

主题

0

听众

5

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-20 05:16:59 |显示全部楼层
鼎力支持!!
回复

使用道具 举报

0

主题

1

听众

49

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-21 11:26:15 |显示全部楼层
没人回帖。。。我来个吧
回复

使用道具 举报

0

主题

0

听众

20

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-24 19:19:14 |显示全部楼层
顶起顶起顶起
回复

使用道具 举报

0

主题

0

听众

9

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-27 11:14:02 |显示全部楼层
好,很好,非常好!
回复

使用道具 举报

0

主题

0

听众

19

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-29 19:20:08 |显示全部楼层
众里寻他千百度,蓦然回首在这里!
回复

使用道具 举报

0

主题

0

听众

45

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-6-8 18:34:37 |显示全部楼层
众里寻他千百度,蓦然回首在这里!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆



Archiver|手机版|     

HTML5教程网 Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部