Shader in THREE.js designed to accommodate ControlNet for normal calculations

Is there a way to adjust this standard shader to bypass the preprocessor for controlnet? Check out the code here: https://jsfiddle.net/lunchie/mpuanxL3/4/


    skinnedMesh.material = new THREE.ShaderMaterial( {
        vertexShader: [
              '#include <skinning_pars_vertex>',
              'varying vec3 vNormal;',
    
              'void main() {',
    
                '#include <skinbase_vertex>',
                '#include <begin_vertex>',
                '#include <skinning_vertex>',
                '#include <project_vertex>',
    
                'mat4 skinMatrix = boneMatX * skinWeight.x + boneMatY * skinWeight.y + boneMatZ * skinWeight.z + boneMatW * skinWeight.w;',
                'vNormal = (skinMatrix * vec4(normal, 0.0)).xyz;',
              '}'
               ].join( '\n' ),
               fragmentShader: [
                 'varying vec3 vNormal;',
                 'void main() {',
                 '       gl_FragColor = vec4(abs(vNormal), 1.0);',
                 '}'
               ].join( '\n' ),
             skinning: true
        } );

The format of the normals being generated doesn't match the controlnet standards, resulting in images like this: https://i.sstatic.net/XcduX.png

Answer №1

In most cases, Three.js and other 3D renderers display normals by converting the range from [-1, 1] to a visible color range of [0, 1]. This can be achieved with a simple equation:

gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1.0);

If your skinnedMesh distorts the normals, you may need to normalize them by scaling them back down to a length of 1 using:

gl_FragColor = vec4(normalize( vNormal ) * 0.5 + 0.5, 1.0);

Your end result should resemble that of the MeshNormalMaterial:

https://i.sstatic.net/x0RsV.jpg

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

Utilizing the fetch method for sending cross-origin JSON data to an Express backend

When attempting to use Fetch to send JSON data from a form and receive a response from an Express server, I am encountering an issue where I only see an empty object in the console instead of the expected JSON response with the form values. You can find t ...

What is the method for determining if parsing is necessary or unnecessary?

Let's talk JSON: var datat= {"Model": "Model A", "Datase": [ { "Id": "DatchikSveta11", "Group": 2, "State": "on", "Dat ...

Tips for utilizing a variable within a variable containing HTML code

Is it possible to incorporate variables in a JavaScript function that includes HTML code? Let's consider the following example: function SetCFonts() { var Color = $('#CColor').val(); var Font = $('#CFont').val(); var S ...

Darken the entire webpage and gradually fade in a specific div element using Jquery

Currently, I am working on implementing the following functionality: - When a link is clicked, it should trigger a function to show a DIV (#page-cover) that will dim down the entire background. This div has a z-index of 999. - Following the dimming effect, ...

Using ES6 to create a callback function that stores values in a Map

I've been trying to find an answer to this question by searching extensively, but haven't had any luck. Currently, I am developing a React app and faced with the task of storing the state, which happens to be a map, in a local variable. Here is ...

JQuery enthusiast seeks cheerful clicker for callback upon event binding

Incorporating a complex functionality into a click event is proving to be challenging $(someSelector)).bind('click', someFunction(a,b,c)); function somefunction(a,b,c) { return function() { // dive into complexity $(anotherS ...

The cookie set in express.js is not being successfully set in React.js, even after setting up CORS and using credentials: 'include'

I have been struggling to set a cookie from my express backend using a React frontend. The cookie shows up in the response header, but for some reason, the browser refuses to set it. I've tested this on Chromium and Firefox, with no success. Interesti ...

Error in AngularJs: [$injector:modulerr] Unable to create schemaForm module instance

Trying to integrate angular-schema-form into AngularJs Seed has been a challenge. Following the steps outlined in the angular-schema-form repository: view1.js 'use strict'; angular.module('myApp.view1', ['ngRoute', 'sc ...

Execute the assignment of exports.someFunction from within a callback function

My Express route is set up like this: app.get('/api/:type/:id', api.getItemById); The function api.getItemById resides in the api module within routes. However, inside the api module, I need to execute a function that connects to the database a ...

What is the reason behind the jQuery only functioning properly on Internet Explorer 8 on this particular page and no other browsers?

I recently created a webpage utilizing jQuery: The functionality on the page should change music images to represent different key signatures when switching from 'Higher Key' to 'Lower Key' in the combo box. While this works perfectly ...

Passing a JSON object between pages in Next.js using props during programmatic navigation

In my Next.js project, I have two pages. On the first page, the user fills out a form to create a post. The information is stored in a large JSON object, which needs to be passed to the second page for the user to preview the post before finalizing it. Wi ...

Issue encountered when attempting to serve JSON response using Node.js, express, and MongoDB after the initial response

I have been experimenting with creating simple RESTful APIs using Node.js, Express, and MongoDB. For this purpose, I am utilizing the Node.js-MongoDB driver in conjunction with the Express framework. const MongoClient = require("mongodb").MongoClient cons ...

Issue with the submission button not triggering onclick event correctly

I've been trying to add an onclick event to a submit button. I've searched various tutorial sites and followed all the suggestions, but none of them have solved the issue. Interestingly, when I include an alert in the function being called, it wo ...

Enter the variable into the parameter

I'm working with some Javascript code: document.getElementById("Grid").style.gridTemplateRows = "repeat(3, 2fr)"; I'm trying to insert a variable as an argument to modify my CSS style. When I attempt the following: "repe ...

How should values be properly stored in a constant using mongoose?

Within my user model, I have included timestamps. I am seeking a way to retrieve the createdAt date and store it in a variable. My initial attempt was: const date = await User.find({ serial: serialId, }).select('-_id createdAt'); The result re ...

Issue with EaselJS: mouse events are no longer functional

I'm currently working on adding a touch animation using the EaselJs library. Interestingly, when I load an image from a local folder, all mouse events work as expected, such as onPress. However, things take a different turn when I opt to use an imag ...

Obtaining the TemplateRef from any HTML Element in Angular 2

I am in need of dynamically loading a component into an HTML element that could be located anywhere inside the app component. My approach involves utilizing the TemplateRef as a parameter for the ViewContainerRef.createEmbeddedView(templateRef) method to ...

How can I trigger a save dialog to allow downloading a file in AngularJS?

On the server, I have a directory containing files. When a client sends a file name, I successfully retrieve the file from the server. The response from the server is working fine so far. However, after receiving the response, I want to prompt the user to ...

Utilizing Angular routing in HTML5 mode within a Node.js environment

While I've come across other solutions to this problem, they all seem to have drawbacks. One option leads to a redirect, which could be disastrous for my front-end application that relies on Mixpanel. A double-load of Mixpanel results in a Maximum Ca ...

ngDraggable does not function properly when the dropzone is larger and includes a scrollbar on the body

Here is a demo showing the issue: The current version 0.1.11 does not support drag and drop functionality. This is how I have implemented the code: <uib-accordion-group is-open="category.open" name="category-{ ...