码迷,mamicode.com
首页 > Web开发 > 详细

webgl 绘制三角形 2.1

时间:2017-02-10 14:25:25      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:休息   nbsp   9.png   strong   显卡   知识   程序   span   建立   

我的娘噶, 我真的学的太慢了, webgl,不行得加快脚楽。

技术分享

上节课就是随便介绍了一下webgl, 这节课的知识特别的多呢。 感觉得分为两次讲呢。

你就随着我的脚步慢慢走吧。

一 、首先,介绍一下,webgl里面的 坐标系。右手坐标系。不说了,直接上图

 

              技术分享

  这就不用介绍了吧, 伸出你的右手比划一下,Z轴是穿出你的屏幕的,刺向你的哦, 不要眨眼, 不会伤害你的眼睛, 不过温馨提示,注意休息眼睛哦。

二 、 介绍两个shader, 与显卡GPU有关

1.vertexShader: 顶点shader, 以后我们就这样称呼了。

<script id = "shader-vs">
attribute vec3 v3Position;
void main(void){
gl_Position = vec4(v3Position, 1.0);
}
</script>

2.fragmentShader: 片段shader。


<script id = "shader-fs">
void main(void){
//指定三角形的颜色
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
 

 注意 : 3维世界里面, 点划线,线画面,再构成我们形态各异的立体, 最小单元是点哦。 不过我们以后所建立的模型是由三角形筑成的。

技术分享

看到了咩,都是三角形构成了一只兔子哦。

三、 创建一个可执行程序

programObject = webgl.createProgram(); 

 然后关联两个shader.

四、 创建一个三角缓冲区

triangleBuffer = webgl.createBuffer();  这个缓冲区是在显卡里分派的, 将顶点数据存储到缓冲区里。 

五、

webgl 绘制三角形 2.1

标签:休息   nbsp   9.png   strong   显卡   知识   程序   span   建立   

原文地址:http://www.cnblogs.com/doudian6/p/6385850.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!