What is the reason for the vertex shader failing to compile?

Recently diving into the world of WebGl, I decided to experiment with a simple example. Here is how I set up my script:

Here's my setup script


import testVertexShader from './shaders/test/vertex.glsl'
import testFragmentShader from './shaders/test/fragment.glsl'

const gui = new dat.GUI()
const canvas = document.querySelector('canvas.webgl')
const scene = new THREE.Scene()

// Textures
const textureLoader = new THREE.TextureLoader()
const dialTexture = textureLoader.load('/textures/textureD.png')

// Test mesh
const geometry = new THREE.TorusGeometry(3, 1, 100, 100)
const material = new THREE.ShaderMaterial({
    vertexShader: testVertexShader,
    fragmentShader: testFragmentShader,
    uniforms:
    {
        uTime: { value: 0 },
        uTexture: { value: dialTexture }
    }
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Sizes
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))
})

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
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()

    material.uniforms.uTime.value = elapsedTime

    controls.update()

    renderer.render(scene, camera)

    window.requestAnimationFrame(tick)
}

tick();

I defined my shaders like so:

VERTEX Shader


varying vec2 vUv;
uniform float uTime;

void main()
{
    vUv = uv;

    gl_Position = projectionMatrix * modelPosition * vec4(position, 1.0);;
}

FRAGMENT Shader


uniform float uTime;
uniform sampler2D uTexture;
varying vec2 vUv;

void main()
{
    vec4 color = texture2D(uTexture, vUv);
    gl_FragColor = color;
}

Even after carefully setting everything up, an error keeps popping up in the console, and I'm puzzled as to why :(


Three.module.js:19006 THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Vertex shader is not compiled.

VERTEX

ERROR: 0:64: 'modelPosition' : undeclared identifier

Can you provide me with some guidance?
I checked the console log for the vertex shader, and it seems fine, but still no luck compiling.

Answer №1

Refer to the WebGLProgram documentation on WebGLProgram. In this context, it's important to note that the uniform variable modelPosition does not actually exist. What you should be using instead is modelMatrix, which represents the model transformation matrix encompassing the position, orientation, and scaling of the 3D mesh.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving Information from MongoDB Collection with Paginated Results in Universal Sorted Sequence

I'm in the process of working on a project that involves a MongoDB collection called words, which holds a variety of words. My objective is to retrieve these words in a paginated manner while ensuring they are globally sorted in lexicographical order. ...

Tips for sending multiple variables in a loop as JSON data through an AJAX request

I need assistance with the code below. I am trying to pass the value[i] into a data string in a json ajax post submit. Essentially, my goal is to gather all the checked values in a form and insert them into an existing json data string using ajax. This is ...

What strategies can be utilized to manage a sizable data set?

I'm currently tasked with downloading a large dataset from my company's database and analyzing it in Excel. To streamline this process, I am looking to automate it using ExcelOnline. I found a helpful guide at this link provided by Microsoft Powe ...

The appearance of Bootstrap-Navbar is altered when viewed on a mobile device

After creating a website that was compatible with both web and mobile devices, I encountered an issue where the navbar would not collapse on my smartphone. However, when I resized the browser window to match the size of the smartphone screen, it worked per ...

Encountering compilation issues with Jest in Vue project, yet the tests are successfully passing

I'm currently facing an issue with my module building while using jest with vue.js for testing. The tests are running successfully, but the module building is failing unexpectedly. I have provided my code snippet below and would greatly appreciate any ...

Sorting and filtering data using AngularJS filter and orderBy inside a controller or factory

I am currently working with a factory that looks like this: app.factory("ModuleFactory", function (api, $http, $q, filterFilter) { var moduleList = []; var categoryList = []; var moduleTypeList = []; var academyModuleTypeList = []; var mostUsed = []; var ...

A step-by-step guide on integrating HTML form input with an API object array

I'm looking to combine two code "snippets" but I'm not sure how to do it. One part of the code turns HTML form input into a JSON object. You can see the CodePen example here. What I want is when the "Add note" button is clicked, I want to grab ...

Creating an HTML table using an array of objects

I'm currently working on creating a function that will generate an HTML table from an array of objects. The array provided below is what I need to convert into a table. let units = [ { 'code': 'COMP2110', &apos ...

What is the best way to instantiate a dynamic object within a literal?

I am dealing with an object that contains multiple fields, mainly consisting of constant string values. However, I also need to incorporate a variable that is determined by the current state. const {order} = this.state; myObject={{ fieldA: 2, fiel ...

The ng-switch functionality does not seem to be functioning properly, even when the is

My ng-switch is displaying both buttons instead of just one when isActive is false. Can anyone help me figure out what I am doing wrong? <div ng-switch="user.IsActive"> <div ng-switch-when="false"> <button type="button" (click)="activ ...

Update the FontSize in the HTML dropdown menu using JavaScript

I am having trouble filling my Selection using a script. For example, when I try to populate my FontSizeMenu, I use the following code snippet: function FillFontSizeMenu() { FillSelection(GetPossibleFontSizes(), "fontSizeMenu"); } function GetPossib ...

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

Here is the current setup: Firebase Database: setores: { -KkBgUmX6BEeVyrudlfK: { id: '-KkBgUmX6BEeVyrudlfK', nome: 'test' } -KkDYxfwka8YM6uFOWpH: { id: '-KkDYxfwka8YM6uFOWpH', nome ...

Determine the total number of arrays present in the JSON data

I'm currently working on a straightforward AngularJS project, and here's the code I have so far: This is my view: <tr ng-repeat="metering in meterings"> <td>1</td> <td>{{metering.d.SerialNumber}}</td> ...

Popup confirming successful subscription to Magento newsletter

Is there a way to create a pop-up message box that appears after the user subscribes to the newsletter? "Your subscription has been confirmed [OK]" I specifically need this functionality to be implemented using JavaScript or jQuery as I want to customi ...

How to assign the 'src' attribute to an HTML element using Node.js

I am currently using 'express' in Node.js and have implemented the following code to send a URL input into text: <form method="GET" action='/download' class="my-5"> <div class="form-group"> ...

Is it a guarantee that a function called in the head section of a JavaScript for-of loop will only be executed once?

In both Firefox and Chrome, I tested the code snippet below: function test() { console.log("***") return [1,2,3] } for (const t of test()) { console.log(t) } After running this code, I noticed that the test function was only called once. T ...

Does the useState hook have any connection to hoisting in React?

I am relatively new to React.js and JavaScript, currently working on a project where I need the ability to manually update my components as needed, due to limitations with a third-party library. After doing some research, I came across a pattern on the of ...

Automatically updating a database value in CodeIgniter after a countdown has expired

I am looking to automatically update a value in my MySQL database using CodeIgniter once a countdown timer reaches zero. However, I am struggling to figure out how to implement this. Here is an example: I have a database structured like this: [image lin ...

Node.js meets Blockly for a dynamic programming experience

Can anyone help me figure out how to run blockly on Node.js and have the code execute directly on the server without having to save the XML first and then run it in the background? I've attempted to use various npm modules but haven't found one t ...

connect the input to a factor using v-model

I currently have a value that I need the user to adjust. Here's my current setup: <input type="number" v-model="value" step="any"/> However, the internal value is in radians while I want the user to see and input a degree value. So, I want th ...