The Ashima Perlin noise shader seems to be malfunctioning on newer releases of Three.JS

Seeking help on SO as a final attempt to resolve an issue with the latest Three.JS, as my Google searches have turned up empty.

I am working with the Ashima Perlin noise shader (examples here) -

Everything runs smoothly with version 48 of Three.JS, but when I try to upgrade to the latest version (59), I encounter the following error:

ERROR: 0:301: 'objectMatrix' : undeclared identifier 
ERROR: 0:301: 'objectMatrix' :  left of '[' is not of type array, matrix, or vector  
ERROR: 0:301: 'xyz' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:301: 'objectMatrix' :  left of '[' is not of type array, matrix, or vector  
ERROR: 0:301: 'xyz' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:301: 'objectMatrix' :  left of '[' is not of type array, matrix, or vector  
ERROR: 0:301: 'xyz' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:301: 'constructor' : not enough data provided for construction 
three.min.js:40

Usually, I would debug and fix issues like this for others, but my lack of C knowledge and shader expertise is hindering my ability to troubleshoot this problem.

javascript3dthree.jswebglshader

Answer №1

If you're having trouble getting this demo to work with the newest version of three.js, check out this link:

The issue is due to a change in a variable name, and all you need to do is update the vertex shader within void main().

Replace this line:

vec3 nWorld = normalize( mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * modifiedNormal );

with this:

vec3 nWorld = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * modifiedNormal );

Big thanks to @gaitat for pointing out the Three.js migration page, it was really useful.

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

Fetching Information From Database Using PHP

I am encountering an issue while attempting to transfer data from my HTML table to my modal (without using bootstrap). In the image below, you can see that I have successfully displayed data from MySQL database in the table. The problem arises when I clic ...

javascriptphpjqueryhtmlmysql

How can the string '0' be transformed into the number 0 using JavaScript?

My current challenge involves error handling for 2 input values, where I am using regex to ensure that the input is always a number. The issue arises when I want to avoid triggering error handling if the user enters '0'. Currently, I am using the ...

javascriptnumbersfrontendparseintstring-conversion

React JS server conditional response malfunctioning

I've been facing issues with receiving a conditional response from an Express server for a React application. Check out the server-side code below: app.get('/api/checklogin', (req, res) => { var val = req.session.user ? false : tru ...

javascriptreactjs

When using an HTML dropdown select to display a list of generated users, only the value of the first user

I have a template that fetches a list of users from the database, and each user row contains a dropdown select option to change their user type (this is an admin page). My goal is to make the dropdowns submit the changes asynchronously. Currently, I can on ...

javascripthtmlexpressdomejs

Tips for creating a div element that closes on the second click:

On the PC version, I have three blocks that open and close perfectly when clicked. However, on the mobile version, when I click on one block, it opens but does not close unless I click on another block. Additionally, if I click again on the same block th ...

javascriptjqueryhtmlcss

Combining two arrays without using concatenation, each from separate arrays but sharing one common variable

I'm struggling to combine two arrays in a specific manner and can't quite figure out the correct syntax to achieve this. primaryData = [1,2] secondaryData = [3,4] label = [label1, label2] Currently, I have this working data = $.map(la ...

javascriptarrays

Rotating a camera in ThreeJS for a quick orbit

I am using an orbital camera that orbits around a globe with markers for users to interact with. When a user clicks on a marker, the camera moves to that specific point. To animate this movement, I am utilizing TweenMax as shown below: TweenMax.to(curre ...

javascriptmaththree.jstrigonometry

What are some techniques for designing a dynamic object that evolves over time in WebGL using Three.js and Tween.js?

Recently, I've started experimenting with Three.js and Tween.js and I'm interested in creating an animation where an object appears to "grow": such as a 3D ball transforming into a tube shape (or being pulled into a tube). Is it possible to achi ...

animationthree.jstween.js

Tips for making objects rotate vertically on their axis and orbit around another object in three.js

Thank you in advance for all the support as I've been asking a lot of questions about my project. My project involves creating a simulation where a planet earth and moon rotate around a sun. (They're not exactly rotating around the sun, but more ...

javascriptthree.js

Tips for Implementing Show and Hide Functionality in JavaScript

I have a piece of cshtml code similar to the following: <span class="p1"> Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book authored by Rajiv Malhotra and Aravindan Neelakandan, arguing ...

javascriptc#htmlcssasp.net

Chrome extensions using Cross-Origin XMLHttpRequest

Chrome extensions API states that cross-origin calls using the XMLHttpRequest object should be allowed with proper permissions: An extension can communicate with remote servers beyond its origin by requesting cross-origin permissions. Following the Goog ...

javascriptajaxgoogle-chromegoogle-chrome-extensionxmlhttprequest

Issue with AngularJS expression not functioning as expected in Chrome for setting input type to "file"

I have encountered a strange bug while working on an Angular form builder application. The issue arises in Chrome when I try to dynamically set the input type based on a variable. Surprisingly, this method works perfectly for all input types except "file", ...

javascripthtmlangularjs

The animation feature in AngularJS when integrated with the easy pie chart appears to be malfunctioning

Having trouble getting the animation to work, any suggestions on how to fix it? I attempted to troubleshoot on jsfiddle but couldn't get it to work for some unknown reason. Here is the HTML code snippet: <script> var app = ang ...

javascriptjqueryangularjs

Dynamic Binding of Checkboxes in Vuex

I am encountering a problem with binding checkboxes using Vuex. Even though I am using v-model with a variable that has a getter and setter to set or get the value in the store, I keep getting incorrect data in the store. The issue arises when I click on a ...

javascriptcheckboxvue.jsvuex

IE9 does not consider JavaScript variable as undefined

Hello, I came across this JS code written by someone else: function somename(f) var procName = ""; var procParams = new Array(); var parseEl = ""; var parseEls = new Array(); var parseInd = 0; var procParamsInd = 0; var IsVal ...

javascriptjquery

Is there a way to keep the modal window open in React without it automatically closing?

I have been working on a modal window implementation in React. I defined a state variable called modalbool to control the visibility of the modal window. The modal window is displayed only when modalbool is set to true. Additionally, I created a parent com ...

javascriptnode.jsreactjsreact-native

Adding a see-through Bootstrap Navbar to a Fullpage.js website: A step-by-step guide

I am trying to incorporate a transparent Bootstrap Navbar into my page that is using fullpage.js. The desired outcome is for the navbar to stay on top of the page without affecting the layout of the website content. I have referenced an example here, but ...

javascripthtmlcssbootstrap-4fullpage.js

Utilize the Masonry layout script on dynamically generated elements from AJAX requests

I have been implementing a Masonry script with the following code: var $container = $('.grid'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.grid-item', columnWidth : '.grid-sizer', ...

javascriptphpajaxmasonry

Is there a way to expand the clickable area of JQuery sliders?

Check out some of the jquery ui sliders here One issue I am facing is that when you click the slider bar, the tic jumps to that exact part. This can be problematic because the bar is quite thin, making it easy to miss when trying to click on it. I want to ...

javascriptjqueryjquery-ui

blending javascript and php variables within ajax requests

I am working on a simple jQuery ajax feature, where I need to combine form data retrieved by JS with some PHP variables and send them all through ajax GET method. Here's what I have: var longform = $("input:text").serialize(); $.ajax({ url: & ...

phpjavascriptjqueryajax