An index problem with BufferGeometry

Trying to transition code from openFrameworks to THREE.JS for generating a landscape with Perlin noise. The approach involves creating a static index array first, followed by positioning vertices in a square grid, each offset by a specific distance. This setup allows for shifting vertices within the array (up, down, left, right) to update the landscape based on camera movement.

Each vertex has 6 indices in the array, referencing two adjacent triangles to avoid duplicating vertices for each triangle.

For instance:

v12  v11  v10
*----*----*
|\   |\   |
| \  | \  |
|  \ |  \ |
|   \|   \|
*----*----*
v02  v01  v00

For vertex v00, indices {v00, v10, v11} and {v00, v11, v01} are added, and so forth.

The code runs smoothly in openFrameworks, but faces issues in THREE.js when the vertex count is increased. Triangles start connecting randomly, and chunks of vertices are skipped. Everything is fine up to a grid size of 256*256, but artifacts occur beyond that.

It's suspected to be an offsetting problem, which others have addressed by defining indices sequentially and using 3 vertices for each triangle. However, replicating the setup proves challenging.

Any insights? Code is provided below, highlighting areas where offsetting is attempted.

...

javascriptopengl-esthree.jsbuffer-geometry

Answer №1

WebGL is built upon OpenGL ES 2.0, which lacks support for 32-bit index buffers. This means that once you reach more than 256 * 256 vertices, the index buffer cannot address them all.

As stated in the OpenGL ES 2.0 Standard (section 2.8 Vertex Arrays):

Indexing support with ubyte and ushort indices is allowed. However, OpenGL ES 2.0 does not mandate support for uint indices. If a particular implementation does support uint indices, it will provide the OES element index - uint extension.

If this is the issue you are facing, you can enable 32-bit index buffers by checking for and utilizing the OES_element_index_uint extension.

var uintExt = gl.getExtension("OES_element_index_uint");
if (!uintExt) {
   alert("Sorry, this application requires 32-bit indices, and it seems that your device or browser does not support them");
   return;
}

According to webglstats.com, approximately 93.5% of machines support this extension.

To address this, you will need to adjust your generate function to utilize a 32-bit array:

this.indices = new Uint16Array( 6*(size-1)*(size-1) );

should be:

this.indices = new Uint32Array( 6*(size-1)*(size-1) );

A glance into the source code of three.js's renderer reveals that it checks the type of the index array and will pass gl.UNSIGNED_INT to glDrawElements when using a Uint32Array.

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

Is there a way to cancel a fetch request and initiate a new one right away?

Below is an illustration taken from MDN. The example showcases two buttons - one for sending a request and the other for canceling it. var controller = new AbortController(); var signal = controller.signal; var downloadBtn = document.querySelector(&apos ...

javascriptpromisefetch

MUI input remains static and unaltered

I tried to switch from my regular input to a Material-UI text field. Everything was working fine before, but now the value isn't changing. const handleChangeInput = (e) => { const { name, value } = e.target; console.log(e.target.value); ...

javascriptreactjsmaterial-ui

Encountering the error message "Cannot GET /" in a NodeJS Express

I've been experimenting with various approaches to resolve this issue, ranging from app.use(express.static(__dirname + "public")) to res.render. It seems to function correctly in my terminal environment but fails when I try to access it locally. Can a ...

javascripthtmlnode.jsexpress

Having trouble setting the audio source path in a handlebars file

homepage.html <script> function playAudio(audio_src){ console.log('audio src: ' + audio_src); var player = document.getElementById('player'); player.src = audio_src; player.load(); player.play(); return f ...

javascriptnode.jshtml5-audiohandlebars.js

Obtain the native element of a React child component passed through props, along with its dimensions including height and width

Is there a way in React to access the native HTML element or retrieve the boundaries of an element passed as a child in props? Consider the following component: class SomeComp extends Component { componentDidMount() { this.props.children.forEa ...

javascriptreactjs

Detecting collisions using CSS animation

I'm currently working on a unique "game" project. Check out the code snippet here: jsfiddle function update() { coyote.applyForce(gravity); coyote.edges(); coyote.update(); cactus.update(); if (coyote.intersects(cactus)){ alert("colisio ...

javascripthtmlcsscollision-detection

Guidelines for executing a Vue directive when the page is initially loaded

I am iterating through an array of objects containing map svg paths and locales, and I want to execute a function on load. The function needs to take the locale keys from the paths array as a parameter and perform some operation: <p v-for="(country ...

javascriptvue.jsvuejs3

Tips for utilizing various broadcast options to trigger Angular controllers according to the user's chosen selection

I'm currently developing an angularjs application that includes multiple date range pickers on a single web page. When a user selects a date range from one of these pickers, I need to send the selected dates to the corresponding angular controller ass ...

javascriptjqueryangularjs

I need to change a website into a string so that I can analyze it with javascript. How can I do this?

Currently, I am in the process of creating a website for my video game servers. The admin tool we use outputs the current server status in a .json format as a large text string to this specific URL: My goal is to retrieve the entire text string from the p ...

javascriptjsonstringapiparsing

What is the best way to retrieve an object from a POST request using Angular AJAX calls in a NODEJS environment?

When the button is clicked, a method will be called. The code for this is as follows: .controller('templeDetailsList', function ($scope, $http, $ionicModal) { $scope.starclick = function(){ var newFav = [{ ...

javascriptajaxangularjsnode.jsmongodb

Are 'const' and 'let' interchangeable in Typescript?

Exploring AngularJS 2 and Typescript led me to create something using these technologies as a way to grasp the basics of Typescript. Through various sources, I delved into modules, Typescript concepts, with one particularly interesting topic discussing the ...

javascripttypescriptvarlet

How can we trigger the Skill bar effect upon scrolling to the section?

I have created a stunning Skill Bar that is functioning perfectly. However, I am looking to enhance the experience by having the skill bar effect trigger only when I scroll to that specific section. For example, as I navigate from the introduction section ...

javascriptjqueryhtmlprogress-bar

Is it beneficial to incorporate keys into an express instance for improved functionality?

If I want to pass information from my index.js file to multiple endpoints across different routes, is it sufficient to attach a custom key to the express instance (app)? For instance, if I am using socket.io and want multiple endpoints to emit from the i ...

javascriptnode.jsexpressweb

Angular's alternative to JQUERY for handling file uploads and multipart forms

My multipart form includes a simple file upload: https://i.sstatic.net/sRFH7.png I would like to customize it to appear like this: https://i.sstatic.net/dMiDS.png Although my initial solution works well, here is the code snippet: HTML snippet <div ...

javascriptjqueryangularjs

What's the best way to switch between colors in a Vue list?

I have a custom tree-view component that I'm working on: <template> <li class="main__li list" :style="{'margin-left': `${depth * 20}px` ,'background-color': `${col}`}" @click="toggle(e); getEl( ...

javascriptvue.jsvuejs3

Choosing several checkboxes and populating an array with values - HTML and JavaScript

I am working on a modal dialog that displays a table with checkboxes next to user names. My goal is to link these checkboxes to the respective names so that when a box is checked next to 'Jon' in the table, the name 'Jon' gets selected. ...

javascripthtmlarraysangularjscheckbox

What is the best way to represent objects in a user interface?

Currently, I have some information stored in the following format: data : { full_name: 'John Doe', date_of_birth: '01-01-1990' } I am looking to display this data in a table-like format that resembles: Full Name: John Doe Date Of B ...

javascriptreactjs

Utilizing bcrypt in an axios request

Currently, I am working on an axios call to a specific json file. My goal is to obtain input from a front-end framework and then pass that data to my server using express. The task at hand involves encrypting the password retrieved from request.body.passw ...

javascriptexpressaxiosbcrypt

Four unique chip/tag colors, personalized to suit your style

Currently, I have integrated two arrays into my autocomplete menu where the chip/tag color is either primary or secondary based on the array the selected component belongs to. I aim to include all four arrays in the menu (top10Songs, top10Artists, top10Fi ...

javascriptreactjsmaterial-uiautocomplete

Setting up multiple RabbitMQ or other backend servers within Node configurations

As someone working in DevOps, I have encountered a situation where our developers are claiming that the Node.js software they wrote can only point to a single backend server due to Node.js limitations. This assertion seems unbelievable to me. How is it eve ...

javascriptnode.jsrabbitmq