![](/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.