Electronic Joint Business

Solution for E-Business

WebGL 教程 (二) 添加颜色

文章评价: 英文原文 欢迎来到 WebGL 教程的第二篇。在本文中我们将会研究一下如何给场景中的物体上色。本文的内容是基于 NeHe 的 OpenGL 教程的第三章改写的。 如果你的浏览器支持 WebGL 的话,你可以点击这里 来浏览线上版本。 事先声明,本系列的教程是面向那些具备相应编程知识,但没有实际 3D 图形经验的人群;目标是让学习者创建并运行代码,并且明白代码其中的含义,从而可以快速地创建自己的 3D Web 页面。如果你还没有阅读第一课,请先看一下第一课的内容吧。因为本课中我只会讲解那些与第一课中不同的新知识。 和上一篇文章一样,本教程应该有不少错误和混淆,如果你发现了哪些毗漏,请不吝留言斧正。 有两种方法可以获得上面实例的代码:在浏览线上版本时在页面中选择“查看源代码”;你也可以从 Github 中克隆源代码的压缩包。 本文的代码在支持 WebGL 的浏览器中的效果如下: 下面开始说说它是如何工作的… 部分代码看起来都和第一课的类似,从头到尾的过程依次是: × 定义顶点着色器和片元着色器,代码放在 HTML 的<script>标签中,类型为“x-shader/x-vertex”和“x-shader/x-fragment”; × 在 initGL 函数中初始化 WebGL 上下文(WebGL Context); × 用 getShader 和 initShaders 函数将着色器载入 WebGL 的 program 对象中; × 定义模型视图矩阵(mvMatrix)和投影矩阵(pMatrix),并用 setMatrixUniforms 函数将它们从 Javascript 推送到 […]

, , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.