三个js着色器webgl程序

Question

我是 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);
}

提前谢谢大家。

Answer 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
})

您需要在该位置传递片段着色器。

三个js着色器webgl程序

three js shader webglProgram

javascript

three.js