首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >threejs webgl着色器无法编译

threejs webgl着色器无法编译
EN

Stack Overflow用户
提问于 2021-11-16 06:37:21
回答 1查看 230关注 0票数 0

我是新的webgl,我目前正在学习着色器。我目前正试图围绕一个球体包裹一个纹理,以给地球地球图像,但当试图这样做时会遇到一些问题,比如碎片和顶点glsl。

这是我当前面临的错误,当我试图加载纹理时,就会发生这种错误。

代码语言:javascript
运行
复制
three.module.js:17071 THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog Vertex shader is not compiled.

以下代码用于main.js

代码语言:javascript
运行
复制
import './style.css'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import vertexShader from './vertex.glsl'
import fragmentShader from './fragment.glsl'

// Debug
const gui = new dat.GUI()

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

// Objects
const geometry = new THREE.SphereGeometry(5,50,50);

// Materials
const loader = new THREE.TextureLoader()


const material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
        globeTexture: {
            value: loader.load('globe.jpg')
        }
    }
})

// material.color = new THREE.Color(0xff0000)
// const material = new THREE.MeshBasicMaterial( { map: texture } );

// Mesh
const sphere = new THREE.Mesh(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 = 20
scene.add(camera)

// Controls
// const controls = new OrbitControls(camera, canvas)
// controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
})
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()

fragment.glsl uniform sampler2D globeTexture代码;

代码语言:javascript
运行
复制
varying vec2 vertexUV; 

void main() {

    gl_FragColor = texture2D(globeTexture, vertexUV);
 ;
}

vertex.glsl

代码语言:javascript
运行
复制
varying vec2 vertexUV;

void main(){
    
vertexUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}

提前谢谢各位。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-16 16:05:55

这是固定代码:

代码语言:javascript
运行
复制
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

// Objects
const geometry = new THREE.SphereGeometry(5, 50, 50);

// Materials
const loader = new THREE.TextureLoader();


const material = new THREE.ShaderMaterial({
  vertexShader: document.getElementById('vertexShader').textContent,
  fragmentShader: document.getElementById('fragmentShader').textContent,
  uniforms: {
    globeTexture: {
      value: loader.load('https://threejs.org/examples/textures/uv_grid_opengl.jpg')
    }
  }
})

// Mesh
const sphere = new THREE.Mesh(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 = 20
scene.add(camera)

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true
})
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

  // Render
  renderer.render(scene, camera)

  // Call tick again on the next frame
  window.requestAnimationFrame(tick)
}

tick()
代码语言:javascript
运行
复制
body {
      margin: 0;
}
代码语言:javascript
运行
复制
<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.js"></script>
<canvas class="webgl"></canvas>

<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vertexUV;

void main(){
    
    vertexUV = uv;

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}
 
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
uniform sampler2D globeTexture;

varying vec2 vertexUV; 

void main() {

    gl_FragColor = texture2D(globeTexture, vertexUV);

}
 
</script>

没有定义统一globeTexture.

  • There的
  • 是顶点着色器中的一个错误。它应该是vertexUv.

而不是vertexUV

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69984723

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档