3.js - 使用着色器实现各种图形

news2024/11/26 10:32:49

有更多案例，私我

main.js

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import * as dat from 'dat.gui'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

// @ts-ignore
import basicVertexShader from './shader/11-02/deep/vertexShader.glsl?raw'
// @ts-ignore
import basicFragmentShader from './shader/11-02/deep/fragmentShader.glsl?raw'

const scene = new THREE.Scene()
// scene.background = new THREE.Color('#ffffff')

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.aspect = window.innerWidth / window.innerHeight
camera.position.set(0, 0, 10)

const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)

// --------------------------------------------------------------------

const textureLoader = new THREE.TextureLoader()
let texture = textureLoader.load('../public/assets/texture/ca.jpeg')

// 创建着色器材质
const shaderMaterial = new THREE.ShaderMaterial({
	vertexShader: basicVertexShader,
	fragmentShader: basicFragmentShader,
	uniforms: {
		// 动画时间
		uTime: {
			value: 0
		},
		uTexture: {
			value: texture
		}
	},
	side: THREE.DoubleSide,
	transparent: true
})

const floor = new THREE.Mesh(new THREE.PlaneGeometry(1, 1, 64, 64), shaderMaterial)
scene.add(floor)

// --------------------------------------------------------------------

const renderer = new THREE.WebGLRenderer({ alpha: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const clock = new THREE.Clock()
const render = () => {
	let time = clock.getElapsedTime()
	shaderMaterial.uniforms.uTime.value = time
	
	// controls.update()
	requestAnimationFrame(render)
	renderer.render(scene, camera)
}
render()

window.addEventListener('resize', () => {
	// 重置相机的宽高比
	camera.aspect = window.innerWidth / window.innerHeight
	// 更新相机的投影矩阵
	camera.updateProjectionMatrix()
	// 重置渲染器的宽高比
	renderer.setSize(window.innerWidth, window.innerHeight)
	// 更新渲染器的像素比
	renderer.setPixelRatio(window.devicePixelRatio)
})

vertexShader.glsl

precision lowp float;

varying vec2 vUv;

void main() {
	vUv = uv;
	
	vec4 modelPosition = modelMatrix*vec4(position, 1.0);
	gl_Position = projectionMatrix*viewMatrix*modelPosition;
}

precision highp float;

varying vec2 vUv;

void main() {
	1、通过顶点对应的uv，决定每一个像素在uv图像的位置，通过这个位置x,y决定颜色
	// gl_FragColor = vec4(vUv, 0, 5);
	
	2、第1的变形
	// gl_FragColor = vec4(vUv, 1, 1);
	
	3、利用uv，实现，渐变效果，左 -> 右
	// float strengh = vUv.x;
	// gl_FragColor = vec4(strengh, strengh, strengh, 1);
	
	4、利用uv，实现，渐变效果，下 -> 上
	// float strengh = vUv.y;
	// gl_FragColor = vec4(strengh, strengh, strengh, 1);
	
	5、利用uv，实现，渐变效果，上 -> 下
	// float strengh = 1.0 - vUv.y;
	// gl_FragColor = vec4(strengh, strengh, strengh, 1);
	
	6、利用uv，实现，段范围内渐变（这里是，由，黑->白，的渐变）
	// float strengh = vUv.y * 5.0;
	// gl_FragColor = vec4(strengh, strengh, strengh, 1);
	
	7、利用取模，实现，反复效果
	// float strengh = mod(vUv.y * 5.0, 1.0); `就是把y，分成5份`
	float strengh = mod(vUv.x * 10.0, 1.0); `就是把x，分成10份`
	gl_FragColor = vec4(strengh, strengh, strengh, 1);

	8、利用，step(edge, x)，如果 x < edge，返回0.0，否则返回1.0
	// float strengh = mod(vUv.y * 10.0, 1.0);
	// strengh = step(0.5, strengh);
	// gl_FragColor = vec4(strengh, strengh, strengh, 1);
	
	9、利用，step(edge, x)，如果 x < edge，返回0.0，否则返回1.0
	// float strengh = mod(vUv.y * 10.0, 1.0);
	// strengh = step(0.8, strengh);
	// gl_FragColor = vec4(strengh, strengh, strengh, 1);
	
	10、利用，step(edge, x)，如果 x < edge，返回0.0，否则返回1.0
	// float strengh = mod(vUv.x * 10.0, 1.0);
	// strengh = step(0.8, strengh);
	// gl_FragColor = vec4(strengh, strengh, strengh, 1);
	
	11、条纹相加
	// float strength = step(0.8, mod(vUv.x*10.0, 1.0));
	// strength += step(0.8, mod(vUv.y*10.0, 1.0));
	// gl_FragColor = vec4(strength, strength, strength, 1);
	
	12、条纹相乘
	// float strength = step(0.8, mod(vUv.x*10.0, 1.0));
	// strength *= step(0.8, mod(vUv.y*10.0, 1.0));
	// gl_FragColor = vec4(strength, strength, strength, 1);
	
	13、条纹相减
	float strength = step(0.8, mod(vUv.x*10.0, 1.0));
	strength -= step(0.8, mod(vUv.y*10.0, 1.0));
	gl_FragColor = vec4(strength, strength, strength, 1);
}