Three.js WebGL shader compilation error

Question

Three.js WebGL shader compilation error

I am currently new to webgl and learning shaders. My current project involves wrapping a texture around a sphere to create an earth globe image. However, I have encountered issues with the fragments and vertex GLSL code.

The error I am facing occurs when trying to load the texture:

three.module.js:17071 THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog Vertex shader is not compiled.

Here is the code snippet from main.js:

import './style.css'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import vertexShader from './vertex.glsl'
import fragmentShader from './fragment.glsl'

// Rest of the code here...

Code for fragment.glsl:

uniform sampler2D globeTexture;

varying vec2 vertexUV; 

void main() {
    gl_FragColor = texture2D(globeTexture, vertexUV);
}

Code for vertex.glsl:


varying vec2 vertexUV;

void main(){
    vertexUV = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

Thank you in advance for your help.

javascript three.js

Answer 1

Answer №1

Here is the corrected version of the code:

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

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

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

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

// Creating a Shader Material
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')
    }
  }
})

// Creating a Mesh
const sphere = new THREE.Mesh(geometry, material)
scene.add(sphere)

// Setting up Lights
const pointLight = new THREE.PointLight(0xffffff, 0.1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)

// Handling Window Resize
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
}

window.addEventListener('resize', () => {
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight

  camera.aspect = sizes.width / sizes.height
  camera.updateProjectionMatrix()

  renderer.setSize(sizes.width, sizes.height)
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

// Setting up 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)

// Creating Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

// Animation Loop
const clock = new THREE.Clock()

const tick = () => {
  const elapsedTime = clock.getElapsedTime()

  sphere.rotation.y = .5 * elapsedTime

  renderer.render(scene, camera)

  window.requestAnimationFrame(tick)
}

tick()

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c58445e49496c1c021d1f1f1c021c">[email protected]</a>/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>

The uniform globeTexture was not defined.
There was a typo in the vertex shader where vertexUv should be vertexUV.

Answer 2

Here is the corrected version of the code:

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

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

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

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

// Creating a Shader Material
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')
    }
  }
})

// Creating a Mesh
const sphere = new THREE.Mesh(geometry, material)
scene.add(sphere)

// Setting up Lights
const pointLight = new THREE.PointLight(0xffffff, 0.1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)

// Handling Window Resize
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
}

window.addEventListener('resize', () => {
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight

  camera.aspect = sizes.width / sizes.height
  camera.updateProjectionMatrix()

  renderer.setSize(sizes.width, sizes.height)
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

// Setting up 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)

// Creating Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

// Animation Loop
const clock = new THREE.Clock()

const tick = () => {
  const elapsedTime = clock.getElapsedTime()

  sphere.rotation.y = .5 * elapsedTime

  renderer.render(scene, camera)

  window.requestAnimationFrame(tick)
}

tick()

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c58445e49496c1c021d1f1f1c021c">[email protected]</a>/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>

The uniform globeTexture was not defined.
There was a typo in the vertex shader where vertexUv should be vertexUV.

Three.js WebGL shader compilation error

Answer №1

Similar questions

Automatically copy any chosen selection on the page to the clipboard

Having trouble with running sudo commands on Hyper in Windows 10?

Troubleshooting Knockout.JS: Why self.myObservable is not working and the importance of code organization

Having troubles with your jQuery script on Internet Explorer?

Tips on modifying the interface based on the selected entry using jQuery

Avoid reactivating focus when dismissing a pop-up menu triggered by hovering over it

"Trouble connecting Sequelize associations with API routes, resulting in unsuccessful retrieval of data from the database

What is the sequence in which middleware and callback functions are executed in Node.js?

Trigger a modal to open based on a specific condition

Sending a post request in AngularJS using the $resource API

Troubleshooting: Magento checkout page keeps scrolling to the top

Using the onMessage event in React Native WebView does not seem to have any functionality

Can a div with float: left; be centered?

Tips for retrieving data from Angular dropdown menus

What is preventing me from injecting a service into an Angular factory/injector?

What is the best way to show inline icons within menu items?

Unable to save the session identifier from the response headers while utilizing sessions in react/frappe framework

What is the solution to the error "modal is not defined" in Vue.js?

Beware: Inaccessible code detected in Reactjs usage

Best way to eliminate empty options from dropdown and ensure that required validation is functioning in AngularJS?