简介
我们知道three.js
是对webGL
的封装,不需要我们操作复杂的着色器。有时候需求要我们实现一些十分丰富的图像,比如线条的流光动效等。这时候只使用three.js
会很麻烦,就出现了着色器材质来自定义着色器。
ShaderMaterial 着色器材质
- 使用自定义着色器渲染的材质。着色器材质是一个用GLSL编写的小程序 ,在GPU上运行。
- 需要知道GLSL是着色器使用的语言,它和
JavaScript
使用方式完全不同,主要目的是为栅格化图形提供常用的计算功能。 - 常用属性和方法:
.uniforms
指定要传递给着色器代码的uniforms
。uniforms
是GLSL
语言中的全局变量,在一次绘制过程中传递给着色器的值都一样。.fragmentShader
片元着色器的GLSL
代码。字符串格式由webGL
编译。.vertexShader
顶点着色器的GLSL
代码。字符串格式由webGL
编译。.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);
}
`
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
没有太大关系,想要深入学习的就需要学习WebGL和GLSL
。