![](/img/trans.png)
[英]THREE.WebGLProgram: shader error: gl.getProgramInfoLog Must have an compiled fragment shader attached
[英]three js shader webglProgram
我是 webgl 的新手,我目前正在学习着色器。 我目前正在尝试使用平面缓冲区几何形状制作指针,但目前,着色器无法编译。
这是我在尝试编译时遇到的错误
three.module.js:17071 THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog Vertex shader is not compiled.
main.js 的代码
import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'dat.gui'
import vertexShader from './vertex.glsl'
import fragmentShader from './fragment.glsl'
console.log(vertexShader)
console.log(fragmentShader)
// Debug
const gui = new dat.GUI()
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
// Objects
const geometry = new THREE.PlaneBufferGeometry( 1,1 );
// Materials
// const material = new THREE.MeshBasicMaterial({side:THREE.DoubleSide})
const material = new THREE.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: vertexShader,
uniforms:{
progress: {type: "f", value:0}
},
side:THREE.DoubleSide
})
// Mesh
const sphere = new THREE.Points(geometry,material)
scene.add(sphere)
// Lights
const pointLight = new THREE.PointLight(0xffffff, 0.1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)
/**
* 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)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 2
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 objects
sphere.rotation.y = .5 * elapsedTime
// Update Orbital Controls
// controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()
vertex.glsl 的代码
varying vec2 vUv;
void main() {
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position,1);
// gl_PointSize = 50 *(1 / -mvPosition.z);
gl_PointSize = size*10;
gl_Position = projectionMatrix * mvPosition;
}
fragment.glsl 的代码
main() {
gl_FragColor = vec4(1,0,0,1);
}
提前谢谢大家。
至少其中一个问题是着色器中有整数,它们需要浮点数。 1
(一个int
)和1.0
(一个float
)在 GLSL 中是不相同的。
例如:
varying vec2 vUv;
void main() {
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
// gl_PointSize = 50.0 * (1.0 / -mvPosition.z);
gl_PointSize = size * 10.0;
gl_Position = projectionMatrix * mvPosition;
}
你需要在片段着色器中做同样的事情。
最后,您在此处将顶点着色器也作为片段着色器传递:
const material = new THREE.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: vertexShader, // Not gonna work...
uniforms:{
progress: {type: "f", value:0}
},
side:THREE.DoubleSide
})
您需要在该位置传递片段着色器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.