Building a Float32Array from an ArrayBuffer: A step-by-step guide

Let's say we have an ArrayBuffer containing vertices and normals, as displayed in the screenshot below:

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

//recompute object from vertices and normals
const verticesBuffer:ArrayBuffer = e.data.verticesBufferArray;
const normalsBuffer:ArrayBuffer = e.data.normalsBufferArray;

const vertices = new Float32Array(verticesBuffer);
const normals = new Float32Array(normalsBuffer);

However, at this stage, the 'vertices' and 'normals' variables are undefined. This is interesting because 'verticesBuffer' and 'normalsBuffer' seem to be fine.

Upon attempting the conversion, the following error is encountered:

const vertices = new Float32Array(verticesBuffer);

Uncaught RangeError: Invalid typed array length: 39744

So, the question arises - how can we successfully convert from verticesBuffer:ArrayBuffer to vertices:Float32Array?

Thank you!

javascripttypescriptthree.jsweb-worker

Answer №1

  The number of vertices is calculated by dividing the byte length of the vertices buffer by 4.
  Similarly, the number of normals is calculated by dividing the byte length of the normals buffer by 4.

  Next, we create Float32Arrays for both vertices and normals using the data from their respective buffers.

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

Enhancing React with TypeScript: Best Practices for Handling Context Default Values

As I dive into learning React, TypeScript, and Context / Hooks, I have decided to create a simple Todo app to practice. However, I'm finding the process of setting up the context to be quite tedious. For instance, every time I need to make a change t ...

reactjstypescriptreact-hooks

Rendering tree data in Angular JS by level is a great way to organize and

Being new to AngularJS, I find the task of grouping data by tree level and tree id quite challenging. I would appreciate some assistance or guidance on this. What I aim to accomplish is grouping the data in a tree-like structure based on their level and id ...

javascriptangularjstree

Tips for redirecting a port for a React production environment

I am currently setting up both Express.js and React.js applications on the same Ubuntu server. The server is a VPS running Plesk Onyx, hosting multiple virtual hosts that are accessible via port 80. To ensure these apps run continuously, I have used a too ...

javascriptnode.jslinuxreactjsexpress

What is the proper way to send properties to a component that is enclosed within a Higher Order Component?

I have a situation where I need to pass props from the index page to a component wrapped inside two higher-order components. Despite fetching the data successfully in getStaticProps, when passing the props to the About component and console logging them in ...

javascriptreactjsnext.jsreact-hoc

Adding a personalized shader to an obj 3D model in Three.js: A step-by-step guide

I have been experimenting with ObjLoader for 3D objects and I am looking to add a shader material to enhance the object. Most tutorials focus on adding shaders to standard Three.js geometries, but I want to know how to do this for a custom shader materia ...

three.js3dshaderwebglobjloader

"Troubleshooting: Why is the onError event not triggering

Has anyone else experienced issues with using a third-party API to fetch YouTube thumbnails with higher resolution, sometimes resulting in a code 404 error? I've been trying to replace the image source with a default YouTube thumbnail retrieved from i ...

javascriptreactjsimage

Module for managing optional arguments in Node.js applications

I'm on the hunt for a Node.js module that can effectively manage and assign optional arguments. Let's consider a function signature like this: function foo(desc, opts, cb, extra, writable) { "desc" and "cb" are mandatory, while everything else ...

javascriptnode.jsnpm

Encountering trouble with displaying data in Express and Mongoose

Struggling to comprehend how to define and utilize an API in Express, while using Mongoose to connect with MongoDB. Successfully saving objects from input on the front end, but getting lost when it comes to retrieving and displaying the saved data. Take a ...

javascriptnode.jsmongodbexpressmongoose

What is the best approach for handling JSON key value pairs when the name of the object parent varies each time?

I am facing a challenge while trying to match key value pairs from the JSON data provided below. The parent names vary, making it difficult to find a solution. How can I effectively target and extract this specific data? Your assistance is greatly apprec ...

javascriptreactjsjson

Is the 404 page being utilized as a fallback for AJAX requests?

I am looking to create a one-page website that utilizes history.pushstate to modify the URL. My plan involves having only one HTML file for the site, which would be the 404 error page. This setup would redirect users to that page regardless of the URL they ...

javascriptajaxhttphttp-status-code-404

Prevent the opening of tabs in selenium using Node.js

Currently, I am using the selenium webdriver for node.js and loading an extension. The loading of the extension goes smoothly; however, when I run my project, it directs to the desired page but immediately the extension opens a new tab with a message (Than ...

javascriptnode.jsseleniumselenium-webdriverselenium-chromedriver

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

import PageNav from '@/components/PageNav.vue'; import PageFooter from '@/components/PageFooter.vue'; export default { name: 'Groups', components: { PageNav, PageFooter, }, data() { return { groups: ...

javascripthtmlvue.js

Implementing pagination with complete page information using node.js and mongodb

Hello, I am currently working on implementing pagination in NodeJS and MongoDB. Check out the code I have written below: router.get("/PO_pagination", verify, async (req, res) => { console.log("req.query", req.query) try { let ...

javascriptnode.jsmongodbmongoosepagination

Employ Jquery for arranging WordPress posts based on a custom numerical value on a webpage

Recently, I came across this amazing plugin called , which allows me to filter posts on my website. In order to enhance the functionality of my create post form, I utilized the "Advanced Custom Fields" plugin and followed their documentation available at ...

javascriptphpjquerywordpresssorting

Typescript may fall short in ensuring type safety for a basic reducer

I have been working on a simple reducer that uses an object to accumulate values, aiming to maximize TS inference. However, I am facing difficulties in achieving proper type safety with TypeScript. The issue arises when the empty object does not contain an ...

typescript

Iterating through each data attribute using a jQuery each loop

I've encountered an issue with resetting data attributes post-animation and have been attempting to implement a method found on answer 2 of a related thread. I'm a bit stuck on what might be causing the problem. It should theoretically be possib ...

javascriptjqueryloopsattributeseach

I'm puzzled about what could be behind this error message Error [ERR_HTTP_HEADERS_SENT], especially since I've only sent the response header once. How can I figure out the cause

Here is a snippet of code from my routes file: router.get('/api/', async function(request, response){ let entries = await Entries.find({}, function(error){ if(error) console.log(error); }); let catArray = []; entrie ...

javascriptnode.jsexpress

"Bootstrap 4 with the ability to display multiple content sections under a

Currently, I am experimenting with bootstrap tabs and my goal is to have a single tab with multiple content divs. I attempted to achieve this by using two data-target values like data-target=".etab-p1, .etabi-img1". However, the solution only seems to work ...

javascriptjqueryhtmlcssbootstrap-4

What is the secret to planning an event that spans a significant period of time?

Let's say there's this div in the code: <div [hidden]="!isNotificationDisplayed" class="notification"> <h2 align="center" class="set-margin" #notification>Node was...!</h2> <h4 alig ...

javascriptangulartypescript

Creating a dynamic dropdown menu that displays options based on the selection made in a previous drop

Attempting to replicate this exact functionality on my own site has proven difficult. Despite success on jsfiddle, none of the browsers I've tested seem to cooperate. Any suggestions? Even when isolated as the sole element on a page, it simply refuses ...

javascriptjqueryhtmlcss