21、使用 WebGL 创建 3D 图形

使用 WebGL 创建 3D 图形

1. 渲染增强与注意事项

在进行 3D 图形渲染时，可以利用纹理和光照效果来增强渲染效果。例如， 02 - collada.html 文件中的示例使用 Collada 加载代码来加载并渲染一个球体模型。

需要注意的是，不能使用 Ajax 请求访问本地文件，此示例需要在 Web 服务器上运行才能正常工作。

2. 光照的添加

在 3D 场景中应用光照有多种方法，从相对简单的近似方法到逼真但复杂的数学模型都有。这里采用 Phong 光照这种简单的解决方案，它是对光线从表面反射的常见近似。

Phong 模型通过三种不同的光照分量来照亮表面上的一个点，分别是环境光（Ambient）、漫反射光（Diffuse）和镜面反射光（Specular）：
- 环境光 ：模拟周围环境中光线的散射，即不是直接从光源照射到该点，而是从附近其他物体反射过来的光。
- 漫反射光 ：当光线直接从光源照射到表面时，在表面上出现的大而柔和的高光。模拟表面将入射光向多个不同方向反射时发生的漫反射。
- 镜面反射光 ：取决于观察者的位置，模拟光线直接从表面反射到眼睛时出现的小而强烈的高光。

表面点的颜色由表面颜色乘以这三个光照分量的总和来确定：

gl_FragColor = color * (ambient + diffuse + specular);