Enabling the material.skinning property in Three.js results in a shader compilation issue

Attempting to apply a dynamic geometry skin, I encounter an issue after setting

material.skinning = true

An error message about shader compilation pops up stating "too many uniforms". Despite my understanding of the problem and discovering this closed Github Issue, no solution was provided. The perplexing part is that even with minimal geometry and bones in my Object, the number of uniforms seems to exceed max capacity (>1024 based on my Max Uniform Vector's value from here) due solely to skinning=true.

This is the code snippet:

var material = new THREE.MeshLambertMaterial({color: 0xAABBAA, skinning: true});
var maxLength = Math.max(geom.vertices[0].y, geom.vertices[geom.vertices.length-1].y);

for(var i = 0; i < MAXRESOLUTION; i++){
    var skinIndex = geom.vertices[i].y > 0? 1 : 0;
    var skinWeight = Math.abs(geom.vertices[i].y/maxLength);

    geom.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );
    geom.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );
}

var newMesh = new THREE.SkinnedMesh(geom, material);

skeleton.bones[0].position.y = geom.vertices[0].y;
skeleton.bones[1].position.y = -geom.vertices[0].y;

var root = skeleton.bones[0];
newMesh.add(root);

newMesh.bind(skeleton);

Your assistance is greatly appreciated :)

r75

Answer №1

The issue arose when I mistakenly connected the material (using skinned=true) to a regular Mesh instead of a SkinnedMesh.

Regrettably, I failed to mention this crucial detail in the code snippet provided earlier due to oversimplification.

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

Error 1:1 Encountered parsing issue: Unanticipated character ''

I'm still getting acquainted with JavaScript, so please bear with me if this question seems a bit basic. I've been attempting to execute Firebase deploy but keep encountering this error message: 1:1 error Parsing error: Unexpected character ...

fetch promise not fulfilling as expected

There's a method I'm using to call an all-purpose fetch method defined in a separate JS file: export function detailedView(request,token) { let endpoint = 'api/v1/cbn/inventory/GetDetailRequest?RequestNo='+request['RequestNo&a ...

nearest 0.10 rounding up

I'm looking for assistance on how to round up to the nearest 0.10 with a minimum of 2.80. var panel; if (routeNodes.length > 0 && (panel = document.getElementById('distance'))) { panel.innerHTML = (dist/160 ...

Tips on sending a string as an argument in an onclick function

I am currently attempting to automatically add an anchor, and here is what I have tried: " <a id='" + x.NomFic + "' onclick='TransfererFica( " +x.Idtran +" , "+ x.NumVdr + " , '" + x.NomFic ...

What is the alternative for watchEffect in VueJS 2?

Once my VueJS 2 component loads, I fill a props variable with data. Here's how it's done: created() { this.events = null Service.getEvents() .then(response => { this.events = response.data }) .catch(error =& ...

Getting JSON with duplicate keys in JavaScript can be achieved by parsing the data using a custom function

I am attempting to retrieve JSON from a URL, but I have encountered an issue where the response object is removing duplicate keys. Is there a way to fetch the JSON without eliminating these duplicates? Below is my JavaScript code: $('document'). ...

What are the steps to include a scrollable tooltip in HTML?

Is there a way to implement a scrollable tooltip without using an iframe? Any existing jquery or css scripts that can help achieve this? If so, how can it be done? ...

Guide to passing arguments to a function within Vue's v-for loop?

Is there a way to pass the parameter {{ item.id }} to my function productos.mostrarModal() within a v-for loop in vue.js? <div v-for="item of articulos"> <a href="#" onclick="productos.mostrarModal()" > <h2>{{item.name}}< ...

Real-time data updates using AJAX in Ruby on Rails

Currently, I am working with Rails and jquery to implement dynamic content using ajax. However, one issue I am facing is extracting the current user ID from the URL For instance, if the URL is www.mywebsite.com/users/20 In my javascript file, I require ...

Getting Creative with Jquery Custombox: Embracing the 404

Encountering a problem with jquery custombox version 1.13 <script src="scripts/jquery.custombox.js"></script> <script> $(function () { $('#show').on('click', function ( e ) { $.fn.custombox( this, { ...

a guide on passing variables between Python and HTML

I am currently utilizing d3.js to create a collapsible tree. The json format I receive is transformed by a python script that performs calculations based on database values. The python script begins with the root argument for the tree. From there, I calcu ...

Generate a distinct MongoDb ObjectId and append it to every element in a preexisting Array

I need to assign a unique Object Id to each transaction Array Object in an existing document. { _id: ObjectId(6086d7e7e39add6a5220d0a5), firstName: "John" lastName: "Doe" transactions: [ { date: 2022-04-12T09:00:00.000+00:00 a ...

How to Retrieve Variables from a Separate .json File in Python

Seeking Assistance I am looking for a way to access variables from an external .json file located in the same directory using Python 2.7. (Import statement is not working for me) The goal is to store the variables in the .json file as shown below: valu ...

When collapsing an accordion, Bootstrap radio buttons fail to properly select

I have attempted various methods to achieve the desired functionality of having the accordion content close and open accordingly when checking a radio button, while also having the button visually appear as 'checked'. For a more in-depth example, ...

Enhance your AJAX calls with jQuery by confidently specifying the data type of successful responses using TypeScript

In our development process, we implement TypeScript for type hinting in our JavaScript code. Type hinting is utilized for Ajax calls as well to define the response data format within the success callback. This exemplifies how it could be structured: inter ...

Choose the key value from a deep object structure

I'm facing a dilemma. Within the layers of this object, I need to identify and select a specific key among the nested elements. The structure of the object is as follows: var x={ "_shards": { "total": 10, "successful": 5, ...

Eliminating the need for double clicking

Check out my JSFiddle demo. I have implemented a basic event handler for the 'click' function: $('#traveller > a').click(function(e) { e.preventDefault(); var $ul = $('#traveller ul'); if($(this).hasClass(&apo ...

Value becomes null when updating in Node.js

I've been working on updating a value through API calls in express and node js. Here is how my route is set up: var express = require('express'); var router = express.Router(); router.put('/updateValue/:id', function(req, res, ne ...

Is Firebug a necessary tool for the functioning of my website?

I'm currently tackling a new project that involves complex javascript development. Unfortunately, I am unable to share any code specifics at this time. Initially, my script functioned correctly in Firefox 3.0 but encountered issues when tested on Fir ...

Display and view .dwg files using Javascript, HTML, and Angular

Looking for a way to upload and preview .dwg format images on a page created using js/HTML/angularjs or Angular 2+? I've attempted to use a CAD viewer js library, but the lack of documentation has made it challenging. Has anyone successfully implement ...