在 WebGL 中探索光影效果

前端

2023-11-23 21:34:50

Web Graphics Library (WebGL)学习指南：光照

引言

在计算机图形学中，光照是营造逼真三维场景的关键因素。通过模拟现实世界中的光源，我们可以为物体赋予深度、纹理和逼真度。本文将深入探讨 WebGL 中的光照，介绍不同类型的灯光，并指导如何在 3D 场景中有效使用它们。

光照类型

在 WebGL 中，最常用的光照类型有：

平行光： 模拟来自无穷远处的平行光线，投射出均匀且方向明确的阴影。
点光源： 模拟来自特定点的光线，以球形向各方向辐射光线。
聚光灯： 模拟来自具有特定锥角的点的发散光线。

在 WebGL 中实现光照

要实现光照效果，需要设置光源和材质属性。光源定义光线的发射位置、方向、颜色和强度，而材质属性决定物体对光的响应方式。

光源设置

在 WebGL 中，光源通过 WebGLRenderingContext.light 对象创建。每个光源对象都有 position、direction、color 和 intensity 等属性。

const lightPosition = [0, 1, 0];
const lightColor = [1, 1, 1];
const lightIntensity = 1.0;

gl.lightfv(gl.LIGHT0, gl.POSITION, lightPosition);
gl.lightfv(gl.LIGHT0, gl.DIFFUSE, lightColor);
gl.lightf(gl.LIGHT0, gl.CONSTANT_ATTENUATION, lightIntensity);

材质设置

材质属性通过 WebGLRenderingContext.material 对象设置。这些属性包括 ambient、diffuse 和 specular，它们分别定义物体反射环境光、漫射光和镜面光的方式。

const ambientMaterial = [0.1, 0.1, 0.1];
const diffuseMaterial = [0.5, 0.5, 0.5];
const specularMaterial = [0.2, 0.2, 0.2];

gl.materialfv(gl.FRONT_AND_BACK, gl.AMBIENT, ambientMaterial);
gl.materialfv(gl.FRONT_AND_BACK, gl.DIFFUSE, diffuseMaterial);
gl.materialfv(gl.FRONT_AND_BACK, gl.SPECULAR, specularMaterial);