Issues encountered when integrating a shader

I've created a shader and I'm trying to test it on Codepen. Despite having no errors in the console, the shader still isn't working as expected. Can anyone help me figure out what's going wrong?

Below is my vertex shader:

<script id="vertexShader" type="shader">

void main() {
  vUv = (uModel * vec3(position.xy, 1.)).xy;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
} 

And here is the fragment shader:

<script id="fragmentShader" type="shader">
uniform vec2 uResolution;
uniform sampler2D uTexture1;
varying vec2 vUv;
  uniform mat3 uModel;
  varying vec2 vUv;

void main() {
    // Shader logic goes here...
}
</script>

For the complete code and demo, visit this link.

Answer №1

One issue is that when you create a Mesh, you are using two materials.

var mesh = new THREE.Mesh( geometry, material2, material );

The third argument material doesn't actually have any effect, so the work you're doing in the vertex and fragment shaders isn't showing up. To fix this, make sure to only pass your ShaderMaterial into the Mesh constructor for proper rendering:

var mesh = new THREE.Mesh( geometry, material );

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

The dimensions of the cards adjust automatically when the flex direction is set to row

My cards, created in CSS and React.js, have a set height and width. However, when I change the flex direction from column to row, the cards automatically shrink in size. Why is this happening? Card's CSS and JS code CSS .card{ height: 50%; w ...

What is the simplest way to test an npm module while coding?

Currently, I am in the process of making modifications to @editorjs/nested-list. To streamline my testing process without extensive installations, I have created a simple web page: <html> <head> <script src="https://cdn.jsdelivr.net/npm ...

configure dynamic content within the slider element

Currently, I am experimenting with two jQuery plugins (awkward/Coda Slider 3) to implement a sliding effect for DIV content. Everything seems to be working smoothly until I attempt to set dynamic content (using JavaScript) after creating the plugin object. ...

presentation banner that doesn't rely on flash technology

Looking to create a dynamic slideshow banner for my website inspired by the design on play.com. This banner will feature 5 different slides that transition automatically after a set time, while also allowing users to manually navigate using numbered button ...

Expanding the MatBottomSheet's Width: A Guide

The CSS provided above is specifically for increasing the height of an element, but not its width: .mat-bottom-sheet-container { min-height: 100vh; min-width: 100vw; margin-top: 80px; } Does anyone have a solution for expanding the width of MatBott ...

``The issue concerning the preloading layer on the website``

My experience with the website www.wirecreation.net is sometimes marred by an issue during the initial load. It seems that there is a margin of a few pixels on the gray div containing the logo and progress bar at times, but other times it appears with zero ...

The necessary attribute is malfunctioning. (HTML)

I am currently working on a signup page utilizing HTML and JavaScript. Everything was running smoothly until I added a function to navigate the user to the next page. The issue arises when the textboxes are left blank; upon clicking the button, the user is ...

Evaluating substrings within a separate string using JavaScript

I need to compare two strings to see if one is a substring of the other. Below are the code snippets: var string1 = "www.google.com , www.yahoo.com , www.msn.com, in.news.yahoo.com"; var string2 = "in.news.yahoo.com/huffington-post-removes-sonia-gandh ...

How can I notify an error in CoffeeScript/JavaScript when a parameter is not provided?

Initially, I believed that my code was clever for accomplishing this task: someFunction = (arg1, arg2, arg3) -> if _.some(arguments, (a) -> a is undefined) throw new Error "undefined parameter" My goal was to throw an error if any of the para ...

How to properly stop a sequence of notes using WebAudio in an asynchronous manner?

Utilizing WebAudio for playing a sequence of musical notes has been quite successful. I have a playNote function that takes note frequency, start times, and stop times for each note as input. The parameters for generating the sequence are set prior to the ...

What steps can I take to pinpoint the exact error location when running assetic:dump in Symfony2?

This error message indicates an issue with assetic:dump in Symfony2. [Assetic\Exception\FilterException] ...

I'm having trouble removing an element from an array. The splice() method doesn't seem to be working properly

I start by creating an array like this: let myArray = []; Next, I add Number elements to the array: myArray.push(myNumber); When I call myArray.toString(), the array looks like this: 1,4,3,9 I have been attempting to remove certain elements using t ...

Utilize the Image URL for training your Tensorflow.js application

I'm currently exploring how to use images sourced from the internet for training my neural network. I am utilizing an Image() object to generate the images and pass them to tensorflow. Despite my understanding that Image() should return a HTMLImageEle ...

Executing Knex promises sequentially within a for loop

I have recently started to dive into Node and asynchronous coding, but I am struggling with a fundamental concept. I am trying to seed a database using knex, reading data from a CSV file and iterating through the rows in a for loop. In each iteration, I ne ...

Issue with table display within <div> element in React

Recently diving into React, I find myself in a situation where I need to display data in a table once it's ready or show 'Loading' if not. Currently, my render() function looks like this: return ( <div> { this.state.loaded ...

When trying to access data within objects using JSON iteration, it may lead to encountering an issue of reading a

Attempting to retrieve specific data from a JSON file obtained from a website has proven challenging. While iterating through the collection of objects, undefined values are constantly encountered. Unfortunately, if the JSON is poorly structured, modificat ...

When the Angular script is executed, the variable is not defined

One of my custom directives receives an object named 'vm' in its scope, which contains a property/value pair (ccirCategoryIncidentI : 3) that I need to access. When I try to log this value with console.log(scope.vm.ccirCategoryIncidentI), it init ...

Issue with function not being triggered upon using the .click event

I am attempting to trigger a function on a click event using $(this) in order to catch the event and execute a function. Despite trying different methods, I continue to encounter an error flagged in Firebug: SyntaxError: missing ) after argument list I ...

Issue with PHP form not saving data and correctly parsing output

I am facing an issue with my PHP page where it is supposed to grab responses from a form, insert the data into a table, and then display the response on the same page. I am using ajax to send form values without refreshing the page, but unfortunately, no i ...

Ways to display the page's content within a div container utilizing Jquery

I am attempting to display the content of a URL page (such as ) within a <div> using JQuery, but so far I have been unsuccessful. Here is an example of what I am trying to achieve: <div id="contUrl"> .. content of google.fr page </div> ...