Electronic Joint Business

Solution for E-Business

WebGL 教程 (一)三角形和正方形

文章评价: 欢迎来到我的第一篇 WebGL 教程 !本文借鉴了 NeHe 的 OpenGL 教程第二章,它是学习游戏开发的 3D 图形中好文章。本文将带你学习如何在网页上绘制三角形和正方形。也许这不够酷,但很好地阐述了如何用 WebGL 编程;如果你明白了这部分是如何工作,那么剩下的就相当简单了。 我们先看一下本文在支持 WebGL 的浏览器中的运行效果: 要继续本教程,你需要安装支持 WebGL 的浏览器,比如 IE11、 FireFox、Chrome 或者 Safari 等。 下面我们将继续了解如何用 WebGL 绘制三角形和正方形。 注意: 本教程是面向那些具有一定的编程知识,但没有体验过 3D 图形编程的人群,目标是让你从零开始,透过运行代码深入了解其工作原理,以便能尽快地开始编写自己的 3D 网页。我在自学 WebGL 的时候顺便写了这些教程,难免会有毗漏,欢迎大家斧正。如果您发现哪里存在谬误,请麻烦给我留言并加以指正。 有两种方式可以获得代码。一是在查看线上版本时从浏览器中选择”查看源文件”,另外也可以从 GitHub 库中克隆它 (及其以后的课程)。不管用什么方式,一旦有了代码,你可以在自己喜欢的文本编辑器中打开来看一看。即使你对 OpenGL 有一点了解,乍一看这些代码也是相当复杂的,在一开始我们就定义几个着色器(shader),通常是被认为是高级功能,不过不要绝望,它实际上要简单得多。 和许多程序类似,我们在该 WebGL 页面的尾部定义了许多上层代码所使用的底层函数。为了解释它,我会从底部逐一进行解释,如果你手上有代码,请先翻到文件尾部。 你可以看到这段 HTML 代码: <body onload="webGLStart();">   <a href="http://blogs.ejb.cc/archives/3905/webgl-tutorial-a-triangular-and-square">&lt;&lt; Back to Lesson […]

, , , , , , ,

One thought on “WebGL 教程 (一)三角形和正方形

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.