WebGL中光源的使用

最新推荐文章于 2024-10-03 20:25:35 发布

原创

最新推荐文章于 2024-10-03 20:25:35 发布 · 821 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#webgl #android

前言

WebGL中的光与现实世界中的光类似，是一种物理光线模拟。WebGL使用光线追踪算法来模拟光在3D场景中的反射、折射和散射等现象，以实现逼真的光影效果。

在WebGL中，光源是光的来源，可以模拟不同类型的光源，如平行光、点光源、聚光灯等。光线从光源发出，经过场景中的各个物体后，被摄像机捕捉，生成最终的渲染图像。

通过调整光源的位置、颜色、强度等参数，可以在WebGL中实现不同的光影效果，如明暗对比、高光反射、镜面反射等。这些光影效果可以增强3D场景的真实感和表现力。

一.光的类型

1.1 点光源

在WEBGL中，点光源是一种光源类型，它模拟了一个点光源所产生的光照效果。点光源通常被用于模拟距离比较近的光源，如灯泡、蜡烛等。与其他类型的光源相比，点光源的特点是能够让它照亮的物体在距离光源越远的地方越暗，同时由于它只能照亮一些特定的空间位置，所以不适合照射整个场景或某个区域。点光源可以通过设置其位置、强度和颜色等属性来控制其光照效果，并可以与其他类型的光源组合使用，从而实现更加复杂的照明效果。在WEBGL中，通过使用点光源，可以在3D场景中模拟各种不同的光照效果，从而使场景更加真实和生动。
在这里插入图片描述

1.2 平行光

WEBGL（Web Graphics Library）是一种用于在Web浏览器上渲染交互式3D和2D图形的JavaScript API。平行光是WEBGL中的一种光源类型，它是平行于一条虚拟光线的光源，类似于太阳光线，其所有光线方向都是相同的，因此所有的阴影投射都是平行的。

在WEBGL中，我们可以使用gl.LIGHT0来创建平行光源。平行光源有一个方向，这个方向决定了所有的光线向哪个方向发射。创建平行光源需要设置它的位置和方向，通常我们使用gl.uniformMatrix4fv()函数来设置平行光源的位置和方向矩阵。

平行光源可以用于模拟室外场景中的太阳光线，它可以创建出阴影效果，并且也可以用于创建一些特殊效果，比如材质的高光部分。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>平行光</title>
  <script src="../../lib/index.js"></script>
  <style>
    * {
     
     
      margin: 0;
      padding: 0;
    }

    canvas{
     
     
      margin: 50px auto 0;
      display: block;
      background: yellow;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
  此浏览器不支持canvas
</canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext(