着色器语言GLSL学习

1 初步尝试

import {
    Scene, WebGLRenderer, OrthographicCamera, PlaneGeometry, ShaderMateria } from 'three.js'

const scene = new Scene()
const camera = new OrthographicCamera(-1,1,1,-1,0.1, 10)

const renderer = new WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 创建一个大小为2 的平面几何容器
const geometry = new PlaneGeometry(2,2)

// 设置着色器材质
const material = new ShaderMaterial()

// 创建网格对象 绘制平面
const plane = new mesh(geometry, material)
scene.add(plane)

//设置相机z轴以便能看到平面,注意范围为0.1 - 10，即远近裁截面
camera.position.z = 1 
renderer.render(scene, camera)

2 颜色随时间改变

const fragmentShader = {
   
	uniform float u_time;
	void main() {
   
		vec3 color = vec3((sin(u_time) + 1.0) /2.0, 0.0, (cos(u_time) + 1.0) /2.0);
		gl_FragColor = vec4(color, 1.0);
	}
}

const uniforms = {
   
	u_time: {
    value: 0.0 }
}

const clock =  new THREE.Clock()

function animate(){
   
	requestAnimation(animate)
	uniforms.u_time.value += clock.getDelta()
	renderer.render(scene, camera)
}

3 混合

用法：mix(a,b,c)
公式：a*(1-c)+b*c, 0<=c<=1

4