你也许会问，到底什么是着色器？ 好吧，从3D图形学历史的角度来讲，它的确曾经扮演过和它名字一样的角色，即二进制码。例如告诉显卡如何在绘制一个场景之前进行渐变或上色。但随着时间的推移，着色器开始渐渐扩展自己的应用范围，现在应当把它定义为一种二进制码，它能够在绘制一个场景之前做任何想要做的事情。这的确非常实用，一是因为这些操作是在显卡中进行的，所以运行速度非常快；二是因为它能够实验很多three.js本身无法实现的功能，并且提高three.js的性能。...
1、 着色器能够处理大量数据。顶点着色器为每一个顶点确定位置，片元着色器为每个片元确定颜色。无论是顶点还是片元，数据量都是非常庞大的。一个3D游戏中，一帧动不动就是几十万个三角形，顶点数量非常庞大。从屏幕分辩率来算片元的数量（我们可以近似的将片元与像素对应），现在显示器主流的分辨率是1280X1024，它有1310720个像素，片元着色器每一帧都要为1310720个像素点赋颜色值，可谓处理数据量巨大。...
如果说中级教程大多是关于在CPU上怎么编写3D程序的话，那么高级教程的shader章节就是告诉怎么在GPU上编写3D程序。无论使用CPU还是GPU，编写的程序最终都会被计算出来，那么什么叫做GPU计算呢。...
关于渲染，一般情况下，我们只需要使用THREE.WebGLRenderer的render函数，就能够解决问题。有些情况下，例如，需要将一个场景作为一个Mesh的纹理传入，又例如，需要使用着色器将场景的某一部分模糊或者发光处理。这时候，THREE.WebGLRenderer的render函数就有点力不从心了。...
截止今天为止，我们已经学了太多太多的东西，基本上已经覆盖了three.js的所有知识。从基本的几何体，到纹理，再到着色器，一路走来，你是否有感觉WebGL也不是那么难呢？ 有的同学觉得学习three.js，没有学习原生的WebGL API带劲，他们觉得three.js只是高层的一个引擎而已，不适合学习原理，其实不然，这是一个仁者见仁智者见智的问题。 ...
这个流程图基本上对应全局函数init，注意GAME.init是GAME类的初始化函数。全局init()函数的大多数代码，以前都见过，就是一些设置摄像机渲染器之类的，我们呆会对见得比较少的讲一讲，但是其实无论是阴影还是渲染器，我们都有在以前认真讲过。这里在重复一下吧，温故而知新。...
每一个游戏都有自己的地图数据，我们也定义了一种地图数据。我们在X轴上定义12个方块，每个方块上可以放置一个建筑物，建筑物的高度在一定的范围内。上图是的网格可以表示一个二维数组，数组中的每一个元素可以表示该位置上一种数据。...
判断飞行器与地图是否相撞，只需要判断飞行器的位置与建筑物的位置是否重叠就可以了，可以用包围盒的原理来检测是否相撞...。...
Arthur Appel 于 1968 年首次提出用于渲染的光线跟踪算法。光线跟踪的基础就是从眼睛投射光线到物体上的每个点，查找阻挡光线的最近物体，也就是将图像当作一个屏风，每个点就是屏风上的一个正方形。通常这就是眼睛看到的那个点的物体。根据材料的特性以及场景中的光线效果，这个算法可以确定物体的浓淡效果。其中一个简单假设就是如果表面面向光线，那么这个表面就会被照亮而不会处于阴影中。...
Copyright 2012-2021 WebGL中文网 版权所有
老师微信
微信公众号
在线答疑
答疑老师(1442905731),如老师不在，可通过下方微信联系
答疑老师一(1805691606)
WebGL中文网群一(331962041)