第一章
part1

第一章:着色器从入门到精通一

你也许会问,到底什么是着色器? 好吧,从3D图形学历史的角度来讲,它的确曾经扮演过和它名字一样的角色,即二进制码。例如告诉显卡如何在绘制一个场景之前进行渐变或上色。但随着时间的推移,着色器开始渐渐扩展自己的应用范围,现在应当把它定义为一种二进制码,它能够在绘制一个场景之前做任何想要做的事情。这的确非常实用,一是因为这些操作是在显卡中进行的,所以运行速度非常快;二是因为它能够实验很多three.js本身无法实现的功能,并且提高three.js的性能。...

第二章
part1

第二章:着色器从入门到精通二

1、 着色器能够处理大量数据。顶点着色器为每一个顶点确定位置,片元着色器为每个片元确定颜色。无论是顶点还是片元,数据量都是非常庞大的。一个3D游戏中,一帧动不动就是几十万个三角形,顶点数量非常庞大。从屏幕分辩率来算片元的数量(我们可以近似的将片元与像素对应),现在显示器主流的分辨率是1280X1024,它有1310720个像素,片元着色器每一帧都要为1310720个像素点赋颜色值,可谓处理数据量巨大。...

第三章
part1

第三章:着色器从入门到精通三

如果说中级教程大多是关于在CPU上怎么编写3D程序的话,那么高级教程的shader章节就是告诉怎么在GPU上编写3D程序。无论使用CPU还是GPU,编写的程序最终都会被计算出来,那么什么叫做GPU计算呢。...

第四章
part1

第四章:神奇效果组合器,实现绚丽的效果,令人叹为观止

关于渲染,一般情况下,我们只需要使用THREE.WebGLRenderer的render函数,就能够解决问题。有些情况下,例如,需要将一个场景作为一个Mesh的纹理传入,又例如,需要使用着色器将场景的某一部分模糊或者发光处理。这时候,THREE.WebGLRenderer的render函数就有点力不从心了。...

第五章
part1

第五章:自己动手写大型模拟飞机游戏(游戏架构设计)

截止今天为止,我们已经学了太多太多的东西,基本上已经覆盖了three.js的所有知识。从基本的几何体,到纹理,再到着色器,一路走来,你是否有感觉WebGL也不是那么难呢? 有的同学觉得学习three.js,没有学习原生的WebGL API带劲,他们觉得three.js只是高层的一个引擎而已,不适合学习原理,其实不然,这是一个仁者见仁智者见智的问题。 ...

第六章
part1

第六章:自己动手写大型模拟飞机游戏(游戏各流程设计)

这个流程图基本上对应全局函数init,注意GAME.init是GAME类的初始化函数。全局init()函数的大多数代码,以前都见过,就是一些设置摄像机渲染器之类的,我们呆会对见得比较少的讲一讲,但是其实无论是阴影还是渲染器,我们都有在以前认真讲过。这里在重复一下吧,温故而知新。...

第七章
part1

第七章:自己动手写大型模拟飞机游戏(关卡地图详细设计)

每一个游戏都有自己的地图数据,我们也定义了一种地图数据。我们在X轴上定义12个方块,每个方块上可以放置一个建筑物,建筑物的高度在一定的范围内。上图是的网格可以表示一个二维数组,数组中的每一个元素可以表示该位置上一种数据。...

第八章
part1

第八章:自己动手写大型模拟飞机游戏(飞行逻辑详解)

判断飞行器与地图是否相撞,只需要判断飞行器的位置与建筑物的位置是否重叠就可以了,可以用包围盒的原理来检测是否相撞...。...

第九章
part1

第九章:three.js强大的光线跟踪渲染

Arthur Appel 于 1968 年首次提出用于渲染的光线跟踪算法。光线跟踪的基础就是从眼睛投射光线到物体上的每个点,查找阻挡光线的最近物体,也就是将图像当作一个屏风,每个点就是屏风上的一个正方形。通常这就是眼睛看到的那个点的物体。根据材料的特性以及场景中的光线效果,这个算法可以确定物体的浓淡效果。其中一个简单假设就是如果表面面向光线,那么这个表面就会被照亮而不会处于阴影中。...