Manipulating attributes in a three.js vertex shader and storing values for future processing cycles

Exploring a simple setup concept: https://gist.github.com/ichbinadrian/4758155

The idea is to color fragments based on their distance from the lowest or highest vertex, like a mountain range. How can I store a value in the shader for future processing, considering that vertices will be repositioned over time?

This is the goal, but I'm struggling with updating vertices and faces after changing attribute values. It was easier when I manipulated vertex positions outside of the shader and set xNeedUpdate = true.

Shaders are more complex than they seem.

javascriptglslthree.jswebgl

Answer №1

By updating the needsUpdate attribute in your render loop like so:

attributes.displacement.needsUpdate = true;

Your code snippet will function correctly.

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

An unexpected import token was encountered while using ReactJS and Babel

Every time I attempt to launch my application, an error message pops up that says: (function (exports, require, module, __filename, __dirname) { import { Row } from '../grid' SyntaxError: Unexpected token import I've experimented with vari ...

javascriptreactjsbabeljsbabel-loader

Using a ternary operator in a Text component within React Native

Is it possible to create a ternary condition where if {title} contains the text "appl" then the style 'styles.label' will change to 'styles.label_2'? const Field = ({ title, info }: Props) => { return ( <View style={styles.c ...

javascriptreactjsreact-native

Changing direction of arrow upon dropdown menu opening with JavaScript

I have developed a piece of code that enables users to click on a div in order to reveal a dropdown menu containing radio buttons. My goal is to make the arrows rotate 180 degrees when the dropdown menus are opened, and then return to their original positi ...

javascripthtmlcss

Conditional statement based on the background color

Despite researching various topics on using background colors in if statements, I have yet to find a satisfactory solution. Whether I define an element as a variable beforehand or use rgb/rgba values, my code does not produce the desired results; it always ...

javascriptjqueryhtmlcss

Error: Three.js encountered an issue with accessing the property 'uniforms' of an undefined value

After studying the example on translucency from this link, I tried to replicate it, but unfortunately encountered an error. When I included the line " var uniforms = THREE.UniformsUtils.clone( shader.uniforms );", Chrome threw an error saying: Uncaught Ty ...

three.js

What is the best way to integrate urql data into React similar to redux?

Currently, I am utilizing urql for making GraphQL API calls in one of our projects. In projects where we are working with RESTful APIs, I typically rely on redux to manage re-renders whenever there are changes in the data. Given my limited experience with ...

javascriptreactjsgraphqlurql

What is the best way to create a function that can toggle the visibility of multiple div elements simultaneously?

As a novice, I decided to challenge myself by recreating LinkedIn's layout design. One of the requirements was implementing a function to toggle menus when clicking on a button. Initially, I successfully achieved this task by following the example on ...

javascripthtmlshow-hide

Locating a record within a database that contains an objectId field linking to a separate collection

I have defined two collections in the following manner const BookSchema = new mongoose.Schema({ title: String, author: { type: mongoose.Object.Types.ObjectId, ref: "author" } }) const BookModel = mongoose.model(" ...

javascriptnode.jsmongodbexpressmongoose

Using PHP to perform live calculations with arrays in real time

Currently, I am working on developing a new system for a client that allows them to create bookings and invoices to send to their clients. One specific requirement my client has is the need for a table column to be added below the container columns in whi ...

javascriptphphtmlajax

Transform an item into a map of the item's properties

I am faced with an object containing unknown key/value pairs in this format: myObj = { key_1: value_1, key_2: value_2, key_n: value_n } My goal is to transform it into a dictionary of structured objects like the one below: dictOfStructureObjec ...

javascriptnode.jsdictionaryhashmap

Interpret a JavaScript array response

Currently, I am working on an API request where I receive an HTTP response that contains an array with a single JSON object. However, when attempting to parse or stringify it using the following code: var response = http.response; try{ var json = J ...

javascriptarraysjsonparsingundefined

Navigate to a specific hidden div that is initially invisible

Currently, I am working on a web chat application using next.js. The app includes an emoji picker button, which, when clicked, displays a menu of emojis. However, the issue I am facing is that the user has to scroll down in order to see the emoji menu. I a ...

javascriptcssreactjsscrollnext.js

<head> Javascript codes are failing to run

Currently utilizing JQuery Mobile, my goal is to navigate between pages with minimal script loading each time a page loads. Essentially, I want to import all the general scripts (such as JQuery.js, jquery_mobile.js, main.js, etc.) ONCE for all pages. In m ...

javascriptjqueryhtmljquery-mobileibm-mobilefirst

The integration of socket.io with static file routing in node.js is encountering issues

I am currently developing a chat application and I have encountered an issue. When the static file routing is functioning correctly, the socket.io for the chat feature throws a "not found" error in the console. http://localhost/socket.io/?EIO=3&tran ...

javascriptnode.jssocketsexpress

What could be causing the lack of population in ngRepeat?

In my angular application, I encountered an issue with ngRepeat not populating, even though the connected collection contains the correct data. The process involves sending an http get request to a node server to retrieve data, iterating over the server&a ...

javascriptangularjshtml

I am unable to implement code coverage for Cypress in Debian at the moment

Having trouble obtaining code coverage results using Cypress in my Virtual Machine (Debian Bullseye), but no issues when I run the same project on my Windows machine. On Linux, the code coverage shows up as: Click here to view Index.html inside lcov-repor ...

javascriptbashnext.jsdebiancypress

Encountering an issue with react-native-gesture-handler functionality

When I attempt to utilize react-native-gesture handler, I encounter the following error: : While attempting to find module 'react-native-gesture-handler' from file '/Users/user/Project/index.js', the package '/Users/user/Project/n ...

javascriptiosxcodereact-native

Maximizing performance through strategic database structuring with PouchDB/CouchDB

Recently, I've been researching efficient ways to store and retrieve data for my time management/project capturing application. I would greatly appreciate any insights on which storage strategy to utilize, or suggestions for alternative approaches, es ...

javascriptdatabasedatabase-designlocal-storagepouchdb

Tips for modifying VueJS's <slot> content prior to component instantiation

I am working with a VueJS component called comp.vue: <template> <div> <slot></slot> </div> </template> <script> export default { data () { return { } }, } </script> When I ...

javascriptvue.jsvuejs2

Customize Your Calendar: A Guide to Disabling Dates with Pikaday.js

Wondering how to disable specific days on a calendar? Look no further! Here's a solution using the `disableDayFn` option from Github: disableDayFn: callback function that gets passed a Date object for each day in view. Should return true to disable s ...

javascriptjquerypikaday