Category Archives: WebGL教程

利用HTML5构筑物理模拟环境~ WebGL库Three.js入门(1/3)

这是目前质量较好、讲解比较清楚的一篇 Three.js 的入门教程,原作者是日本人遠藤理平,由 HiWebGL 技术讨论群群友瀡风翻译,HiWebGL 授权转载。感谢原作者的创作和瀡风辛苦翻译!

Posted in WebGL教程 | 14 Comments

【优酷在线/115下载】Opera 制作的 WebGL 视频教程

这是由Opera公司的工程师Erik Möller精心制作的WebGL视频教程,全长达到2小时32分钟;教程内容涵盖了WebGL的大部分内容,从3D图形学的历史发展到WebGL的基础知识,从画简单的三角形开始到最后复杂的模型网格。

Posted in WebGL教程, WebGL新闻 | 2 Comments

WebGL中文教程全面更新!

原文作者Giles在不久前更新了教程,我们的中文版本也作出了相应的修改,这次更新涉及全部16课的课程。下面是这次更新的change log。

Posted in WebGL教程, WebGL新闻 | 2 Comments

Lesson 16 渲染到纹理

欢迎来到系列教程的第16课!在这一课中,我们将介绍一种非常有用的绘制技术: 将3D场景渲染到一张纹理中。通过这一技术,我们可以在绘制过程中利用上一次绘制的结果来创造一些特殊的效果。这是一种常用的绘制技巧,除了在一个场景中绘制另一个场景(本课将详细解释这种应用途径)外,渲染到纹理也是做选取(鼠标在3D场景中点选物体)、引用、反射等3D特效的基础技术。

Posted in WebGL教程 | 6 Comments

Lesson 15 高光贴图

欢迎来到系列教程的第15课!在这一课中,我们将介绍高光贴图技术。就像普通纹理用来指定物体表面的颜色一样,高光贴图可以用来指定物体表面每一处细节的光照反射程度,因此可以大大增强物体的真实感。本课中并没有太多新增的代码, 只会在前几课基础上进行简单的改动,但从意义上来讲,本课将引入一种全新的概念。

Posted in WebGL教程 | 3 Comments

Lesson 14 镜面高光和载入JSON模型

欢迎来到WebGL教程的第14课。在这节课中,我们将会引入从第7课开始介绍的冯氏反射模型中的最后一个部分:镜面高光——在一个光泽表面上闪光的部分。镜面高光会让你的场景看起来更加真实。

Posted in WebGL教程 | 3 Comments

Lesson 13 片元级光照与多program对象

欢迎来到WebGL教程的第13课。在本节课中,我们将会讲解逐片元光照(Per-fragment Lighting),比起我们之前一直使用的逐顶点光照(Per-vertex Lighting),前者对于显卡是来说是一项更加困难的工作,但是同时也会生成更加真实的效果;同时我们还会看一下如何通过选择使用WebGL program对象来切换代码中用到的着色器。

Posted in WebGL教程 | 1 Comment

Lesson 12 点光源

欢迎来到WebGL教程的第12课,这是第二节不是基于NeHe的OpenGL教程的WebGL课程。在这节课中,我们将介绍点光源,这节课很简单,但是却很重要,而且会引出将来一些有趣的内容。点光源,顾名思义,指的就是来自一个场景内特殊的点的光源,这与我们一直使用的平行光不一样。

Posted in WebGL教程 | 1 Comment

Lesson 11 球体、旋转矩阵和鼠标事件

欢迎来到WebGL教程的第11课。本节课是第一个不是基于NeHe的OpenGL教程改编的课时。这节课里,我们将会演示在平行光照下的一个球体,并为其贴上纹理贴图,观察者可以使用鼠标来旋转球体。

Posted in WebGL教程 | 3 Comments

Lesson 10 载入世界,以及相机简介

欢迎来到WebGL教程的第10课,这节课是基于NeHe的OpenGL教程的第10节改编的。在这节课中,我们将会从一个文件中载入3D场景(这样我们就可以通过切换文件来轻松扩展Demo),然后会写一些简单的代码让我们可以在场景中移动,用Doom自带的WAD文件格式,实现一个类似于Doom的小游戏!

Posted in WebGL教程 | 4 Comments