Three.js - 着色器材质(二十七)

简介

我们知道three.js是对webGL的封装,不需要我们操作复杂的着色器。有时候需求要我们实现一些十分丰富的图像,比如线条的流光动效等。这时候只使用three.js会很麻烦,就出现了着色器材质来自定义着色器。

ShaderMaterial 着色器材质

  • 使用自定义着色器渲染的材质。着色器材质是一个用GLSL编写的小程序 ,在GPU上运行。
  • 需要知道GLSL是着色器使用的语言,它和JavaScript使用方式完全不同,主要目的是为栅格化图形提供常用的计算功能。
  • 常用属性和方法:
  1. .uniforms 指定要传递给着色器代码的uniformsuniformsGLSL语言中的全局变量,在一次绘制过程中传递给着色器的值都一样。
  2. .fragmentShader 片元着色器的GLSL代码。字符串格式由webGL编译。
  3. .vertexShader 顶点着色器的GLSL代码。字符串格式由webGL编译。
  4. .defines 使用 #define 指令在GLSL代码为顶点着色器和片段着色器定义自定义常量。
  • 注意:ShaderMaterial只有使用WebGLRenderer才可以绘制正常,因为GLSL代码必须使用WebGL来编译并运行在GPU中。

使用

基础模版

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>学习</title>
  </head>
  <body>
    <canvas id="c2d" class="c2d" width="1000" height="500"></canvas>
    <script type="module">
      import * as THREE from './file/three.js-dev/build/three.module.js'
      import { OrbitControls } from './file/three.js-dev/examples/jsm/controls/OrbitControls.js'

      const canvas = document.querySelector('#c2d')
      // 渲染器
      const renderer = new THREE.WebGLRenderer({ canvas })

      const fov = 40 // 视野范围
      const aspect = 2 // 相机默认值 画布的宽高比
      const near = 0.1 // 近平面
      const far = 10000 // 远平面
      // 透视投影相机
      const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
      camera.position.set(0, 0, 300)
      camera.lookAt(0, 0, 0)
      // 控制相机
      const controls = new OrbitControls(camera, canvas)
      controls.update()

      // 场景
      const scene = new THREE.Scene()

      // 渲染
      function render() {
        renderer.render(scene, camera)
        requestAnimationFrame(render)
      }
      requestAnimationFrame(render)
    </script>
  </body>
</html>

编写GLSL代码

  • 着色器的使用。简单理解,就是通过顶点着色器设置几何体顶点的位置。通过片元着色器设置从顶点出发点与点之间的颜色。点与点之间会自动计算颜色值
  // 顶点着色器代码
  const vertexShader = `
  void main() {
    // 设置点的大小为50像素
    gl_PointSize = 100.0;
    // 设置点的位置
    gl_Position = vec4(position, 1.0);
  }
  `
  // 片元着色器代码
  const fragmentShader = `
  void main() {
    // 光栅化片元的颜色
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
  `
  1. position变量是几何体传入GLSL程序中的顶点信息。

使用着色器材质

  // 初始化几何体对象
  const geometry = new THREE.BufferGeometry()
  // 设置顶点数据 一个顶点
  const pos = new Float32Array([0, 0, 0])
  // 设置 几何体顶点信息
  geometry.setAttribute('position', new THREE.BufferAttribute(pos, 3))

  const mate = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
  })
  const mesh = new THREE.Points(geometry, mate)
  scene.add(mesh)

Three.js - 着色器材质(二十七)_第1张图片

  • 本节简单的操作顶点着色器和片元着色器绘制了一个正方形。
  • 着色器的技术和three.js没有太大关系,想要深入学习的就需要学习WebGL和GLSL

你可能感兴趣的:(three.js,学习,javascript,前端,three.js)