我对 WebGl 有点陌生,但我想尝试一个例子。我这样创建了我的脚本:
`
import testVertexShader from './shaders/test/vertex.glsl'
import testFragmentShader from './shaders/test/fragment.glsl'
// Debug
const gui = new dat.GUI()
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
/**
* Textures
*/
const textureLoader = new THREE.TextureLoader()
const dialTexture = textureLoader.load('/textures/textureD.png')
/**
* Test mesh
*/
// Geometry
const geometry = new THREE.TorusGeometry(3, 1, 100, 100)
// Material
const material = new THREE.ShaderMaterial({
vertexShader: testVertexShader,
fragmentShader: testFragmentShader,
uniforms:
{
uTime: { value: 0 },
uTexture: { value: dialTexture }
}
})
// Mesh
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
scene.add(camera)
// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/**
* Animate
*/
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
// Update material
material.uniforms.uTime.value = elapsedTime
// Update controls
controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()`
我的着色器是这样的:
顶点
` 变化的 vec2 vUv; 均匀浮动 uTime;
void main()
{
vUv = uv;
gl_Position = projectionMatrix * modelPosition * vec4(position, 1.0);;
}`
片段
`统一浮动uTime; 统一采样器 2D uTexture;
varying vec2 vUv;
void main()
{
vec4 color = texture2D(uTexture, vUv);
gl_FragColor = color;
}`
但我一直在控制台中收到此错误,我不知道为什么 :(
` Three.module.js:19006 THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
Program Info Log: Vertex shader is not compiled.
VERTEX
ERROR: 0:64: 'modelPosition' : undeclared identifier
59:
60: void main()
61: {
62: vUv = uv;
63:
> 64: gl_Position = projectionMatrix * modelPosition * vec4(position, 1.0);;`
你能给我一个提示吗?
我安慰记录了顶点着色器,它出现了,但我无法编译它
参见WebGLProgram。统一变量
modelPosition
不存在,但modelMatrix
存在,它是模型变换矩阵,包含3D网格的位置、方向和缩放比例。
gl_Position = projectionMatrix * modelMatrix * vec4(position, 1.0);