There seems to be a lack of update in the fragment shader due to mouse movement

Struggling to incorporate the Voronoi shader from the Book of Shaders into three.js, I can't figure out why the mouse position isn't affecting my visible output. Even though I'm logging the mouse position and checking that the uniform value is being updated, the shader doesn't seem to be reacting at all on my end.

I have confirmed that the mouse position is being logged and the u_time is updating when I inspect it in the animate callback function. However, despite these updates, the shader's appearance remains static with no changes whatsoever.

This is what I am seeing (an unchanging image) while the animate method is being called:

https://i.sstatic.net/Vdh0e.png

The u_time variable is updating as expected when I check it within animate, indicating that the callback is functioning properly. The issue seems to lie in the uniforms not being updated, even though I believed I was handling the updates correctly.

Note - I followed a similar Stack Overflow post on passing mouse positions to shaders through uniforms for guidance, experimenting with both the original mouse position and a modified version to map values from [-1, 1].

Here is the full code:

<!--
  * Based on Book of Shaders 12:
  https://thebookofshaders.com/12/
-->

<!DOCTYPE HTML>
<html>

<head>
  <title>WebGL Demo - Voronoi</title>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>

  <script src="./libraries/threejs/three.min.js"></script>

  <!-- shaders -->
  <script type="x-shader/x-vertex" id="vertexShader">
    void main() {
      vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
      gl_Position = projectionMatrix * modelViewPosition;
    }
  </script>
  <script type="x-shader/x-fragment" id="fragmentShader">
    uniform vec2 u_resolution;
    uniform vec2 u_mouse;
    uniform float u_time;

    // Shader logic here...

  </script>
</head>

<body></body>

<script>
  // JavaScript logic here...
</script>
</html>

Answer №1

It is possible that you do not need to divide the line point[4] = u_mouse/u_resolution; by u_resolution, as the Vector2 is likely already within the range of [-1, 1]. This may result in very small values, causing the mouse movement to be imperceptible.

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

Express 4 : In order to pass a variable from app.js to my routes, I have it configured and ready to be sent over

Recently, I made some updates to my app.js file using Express generator. Below is a snippet of the changes: app.js var express = require('express'); var socket_io = require( "socket.io" ); var app = express(); // Socket.io var io = socket_io( ...

What is the process for implementing token authentication within headers using an interceptor, especially when the token may be null?

In my Angular13 application with OAuth authentication, I am encountering issues when trying to add the token for all services. I have been unsuccessful in managing the undefined token. Despite trying various techniques to retrieve the token, I always enco ...

What is the process for inserting a key value pair into a JSON object?

I am looking to enhance my JSON data by including a key-value pair in each object within the array. https://i.sstatic.net/48ptf.png My goal is to insert a key-value pair into every object in the students array. ...

Steps for incorporating monaco-editor into a website without utilizing nodejs and electron

Currently, I am working on building a basic web editor and came across Monaco-editor. I noticed someone using it with Electron, but I am interested in integrating it into plain JavaScript just like on their webpage (link). However, I am struggling to fin ...

AngularJS dropdown menu for input selection binding

Hey there, I need some help with the code below: <input type="text" class="form-controlb" ng-model="item.name" id="name" placeholder="Enter Name" /> Also, I have a dropdown as shown here: <div class="col-sm-12" ng-model="query"& ...

Managing JSON data sent using PHP

After exploring numerous syntaxes from various sources on the internet, I am hesitant to reveal my struggles as it may be hard to distinguish fact from fiction. So... This snippet shows a part of my HTML code: var jsonData = { address: 'address& ...

Substitute form input loading

Question: <input id="id_sf-0-use_incident_energy_guess" name="sf-0-use_incident_energy_guess" onchange="show_hide_guess(this.id);" onload="show_hide_guess(this.id);" type="checkbox"> The issue lies with the onload event not working in input fie ...

Tips for accessing information from a FOR loop within DIV tags

Let's explore the following code snippet: Here is the HTML generated: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Website ...

Attempting to isolate SQL outcome in order to adjust price based on a percentage

I am currently working on a SQL search and results page that displays 3 columns of data: category, number, and price. However, the results are returned all together in one big lump. My goal is to have a dropdown list with percentages, where clicking on one ...

Is it possible to set a read-only attribute using getElementByName method

To make a text field "readonly" by placing JavaScript code inside an external JS file, the HTML page cannot be directly modified because it is located on a remote server. However, interaction can be done by adding code in an external JS file hosted on a pe ...

Issue with Mjpg paparazzo.js functionality not functioning as expected

I am currently exploring alternative methods to view my security cameras without relying on browser support for mjpg streaming. I have come across Paparazzo.js, which appears to be a promising solution that I want to experiment with: https://github.com/rod ...

Utilizing aliases for CSS/SASS file imports with webpack

Can we use aliases to import .scss / .css files? // webpack.config.js resolve: { alias: { styles: path.resolve(__dirname, "src/styles/"), } } In the main.js file: // main.js import "styles/main.scss"; ...

Is it possible to extract around 10 variables from a JavaScript code, then display them on a webpage after execution?

I have just completed writing a Javascript code with around 3,000 lines. This code contains over 60 variables, but there are a few specific variables that I would like to display on my main HTML page. These variables include: totalTime longitudinalAcceler ...

Is there a way to determine if a specific string matches a value within an object?

Within my codebase, there exists an object named "codes": var codes = { code1: 'test1' code2: 'test2' } I am looking to determine if this object possesses a specific property and then display the result in the console. if(inp ...

Vuetify Chip shatters during production

Utilizing v-chip as an information banner within a Vue-Leaflet map has been the focus of my project. The chip design is based on this example here, and I have been working to adapt it accordingly. Locally, I successfully achieved my intended goal, demonstr ...

Is the promises functionality respected by the Nextjs API?

Greetings, I hope all is well with you. I am currently learning NEXTJS and working with its API, but I have encountered a problem. When I click too quickly, the promises seem to get stuck or encounter issues. You can see the tests in action in this brief 3 ...

Alert from Webpack regarding a critical dependency in the view.js file of the Express library located in the node_modules directory: an expression is being used

Currently, I'm in the process of working on my inaugural full stack application (a simplistic notepad app) and while bundling webpack, I've encountered an issue that is a cause for concern: WARNING in ./node_modules/express/lib/view.js 81:13-2 ...

What methods can I use to make sure the right side of my React form is properly aligned for a polished appearance?

Trying to create a React component with multiple input field tables, the challenge is aligning the right side of the table correctly. The issue lies in inconsistent alignment of content within the cells leading to disruption in overall layout. Experimente ...

Tips for dynamically displaying images in both horizontal and vertical orientations

I would like to showcase images in the imageList. Here is what I want: AB CD How can this be achieved? It's not a matter of being even or odd Perhaps the list could look something like this: ABCDE FG I simply want a new row or display:block when ...

A guide on adding two fields together in AngularJS and displaying the output in a label

I am facing a unique issue on my webpage. Including two inputs and a label in the page, I want the label to display the sum of the values entered into these two inputs. My initial attempt was as follows: Sub-Total <input type="text" ng-model="Propert ...