Converting a customer ShaderMaterial to Lambert Material using Three.js

Currently, I am utilizing a cell shading script to shade a Lambert material on a model. However, I am facing challenges when trying to apply the same script to a custom Shader Material. Is there a way to convert the custom material into a Lambert material? I have searched for solutions but haven't found anything yet. Your assistance would be greatly appreciated. The code I have written so far includes the three_lamberton script, which is used for applying an image to an object. The scripts at the beginning are for layering images and setting up the custom shader material. Please disregard the repetition of some images being loaded into the material more than once, as they are just placeholders for now. My goal is to be able to apply the three_lamberton script to the shader material named material_shh.

<!DOCTYPE html>
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web GL test 2</title>
</head>

<body style="overflow: hidden; background: black;">
    <div id="container">


</div>
    <script src="three.min.js"></script>
    <script src="OBJLoader.js"></script>
    <script src="three_lambertoon_c.js"></script>


    <script id="fragment_shh" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision highp float;
        #endif

        uniform sampler2D tOne;
        uniform sampler2D tSec;
        uniform sampler2D tThree;
        uniform sampler2D tFour;
        uniform sampler2D tFive;
        uniform sampler2D tSix;

    varying vec2 vUv;

    void main(void)
    {
        vec3 c;
        vec4 Ca = texture2D(tOne, vUv);
        vec4 Cb = texture2D(tSec, vUv);
        vec4 Cc = texture2D(tThree, vUv);
        vec4 Cd = texture2D(tFour, vUv);
        vec4 Ce = texture2D(tFive, vUv);
        vec4 Cf = texture2D(tSix, vUv);
        c = Ca.rgb * Ca.a + Cb.rgb * Cb.a + Cc.rgb * Cc.a + Cd.rgb * Cd.a 
            + Ce.rgb * Ce.a + Cf.rgb * Cf.a * (1.0 - Ca.a - Cb.a - Cc.a - Cd.a - Ce.a);
    gl_FragColor= vec4(c, 1.0);

    }

</script>

<script id="vertex_shh" type="x-shader/x-vertex">

    varying vec2 vUv;

    void main()
    {
        vUv = uv;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;
    }

</script>

Answer №1

It seems like there may be some confusion about shaders in Three.js. Each material can only have one vertex shader and one fragment shader at a time. Default shaders, like Lambert, are provided by Three.js for rendering in lambert shading. However, the labertoon.js script appears to modify the Lambert shader, which is not the most elegant solution.

You can check out the script yourself here:

Combining shaders can be complex as shaders have a specific sequence of operations. To achieve the desired effect, it's best to create a new custom shader that incorporates both functionalities instead of using a hacked version of an existing shader.

You can extract the relevant shader code from the JS file and integrate it into your custom shader. It may be possible to directly paste the toon shader lines at the end of your fragment shader for it to work seamlessly.

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

Why is my JavaScript method not working and throwing an error?

Attempting to streamline my code by creating a separate method for calling an ajax function in multiple places. When I try to use the separate method instead of calling it directly, it doesn't work as expected. data: columns[5], type: 'a ...

Utilize the browser's back button when navigating pages that have been loaded through Ajax technology

$(document).ready(function () { $('#gnav a').click(function (e) { e.preventDefault(); $('#contents').load(this.hash.substr(1) +'.php') }); }); Here is the jQuery code I have written to load content into a ...

Creating an array of objects in Node.js can be achieved by simply declaring an array

Here's the structure of my class: var Coin = { _id: null, createGame: function(id) { this._id = id; }, start: function() { } }; My issue is that I am unable to create an array of objects, as I can only create one. Can someo ...

Having trouble exporting CSV files with Tamil fonts. Are you experiencing an error?

We are exploring various methods to display Tamil content in a CSV file with characters like "தூதுக்கடட". Can anyone provide assistance? mysqli_set_charset($db, "utf8mb4"); $query = $db->query("$reports"); if($query->num_rows > ...

What is the best way to preload all videos on my website and across different pages?

I specialize in creating video websites using HTML5 with the <video> tag. On my personal computer, the website transitions (fadeIn and fadeOut) smoothly. However, on my server, each page seems to take too long to load because the videos start preloa ...

What is the best way to access and interpret a JSON file within an Angular application?

I am facing difficulties while trying to load a JSON file from my local disk in order to populate a FabricJS canvas with the data. Currently, I am encountering issues retrieving the data from the file. Here is what I have attempted so far. app.html < ...

What is the best way to send multiple input box values to a function set in the controller?

I am attempting to send the values of two input boxes to a single controller function. <div class="container" ng-controller="MainCtrl"> <div class="row"> <div class="col-lg-6"> <input type="text" ...

What exactly does a 'hoisted manifest' mean when it comes to using Yarn?

Encountering an issue while attempting to install a package using yarn, I am receiving the error message: expected hoisted manifest for \"myPackage#@material-ui/core#react-dom\" However, the concept of a 'hoisted manifest' is not entir ...

Learn how to configure and utilize an AngularJS factory using ngResource along with passing parameters in the call

As a newcomer to Angular, I'm seeking guidance on creating a new factory utilizing ngResource instead of $http, with the ability to pass parameters. Following an example provided here, I have defined my factory as shown below: app.factory('abst ...

Utilizing NGRX reducers with a common state object

Looking for a solution with two reducers: export function reducer1(state: State = initialState,: Actions1.Actions1); export function reducer2(state: State = initialState,: Actions2.Actions1); What I want is for both reducers to affect the same state objec ...

Discover the method for creating URLs that are relative to the specific domain or server on which they are hosted

I need to adapt my menu bar to cater for different server environments: <a href="http://staging.subdomain.site.co.uk/search/page">Menu</a> The main source site is hosted on an external subdomain from an API service, and I want the URLs in my ...

Using jQuery Ajax and PHP for Secure User Authentication

Hello everyone, I could really use some assistance right now. The issue I'm facing is that the error div is not showing the content I expect in the success function of my AJAX request. I've tried alerting the response, which returns true if the ...

The background on my modal remains unchanged

I have integrated a modal using Iframe for user login/registration on my website. Here is the HTML code: <div class="modal" id="ays-popin-connexion" aria-hidden="true"> <div class="modal-body" aria-hidden="true"> <iframe src=" ...

Node.js and Express: Delivering Seamless Video Streaming via HTTP 206 Partial Content

Having a binary file like an mp4 video in a MarkLogic database, I am utilizing the Node.js API of the database to stream this document in segments. The structure is as follows: html document <video controls="controls" width="600"> <source src= ...

Tips for obtaining the identifier of a div element while employing the bind() function in jQuery

Imagine having the following div. <div id="456" class="xyz">Lorem Ipsum</div> If I want to execute a function when this specific div is hovered over, I can achieve it like this: $(".xyz").bind({ mouseenter : AnotherFunction(id) }); Prio ...

working with received data from a JavaScript object

Looking for code assistance, I have a data object serving as my data source. var data = [ { "label":"May 7", "value":25736.6, "proID":"ISB" }, // more data objects... ]; I'm manipulating this data to generate another ...

Updating the status of a checkbox array within the reducer to reflect changes made in the user interface

I've implemented something similar in React: const CheckboxItems = (t) => [ { checked: true, value: 'itemsCancelled', id: 'checkBoxItemsCancelled', labelText: t('cancellations.checkBoxItemsCancelled&apos ...

No values are being assigned to the array elements in the Node.js application

I've been struggling with an issue in my Express project for a day now. I can't seem to push some data into an array element. Let me walk you through my code and the data involved. Here is the result data retrieved from MongoDB: result = { n ...

Real-time Broadcasts Straight to Your Web Browser

Feeling a bit frustrated with my current situation. I am eager to stream a live video broadcast to a web browser. At the moment, I am utilizing ffmpeg to stream a directshow live source as a webm stream to node.js, which then sends the stream to the http ...

Learn the proper way to write onClick in tsx with Vue 2.7.13

current version of vue is 2.7.13 Although it supports jsx, I encounter a type error when using onClick event handling. The type '(event: MouseEvent) => Promise<void>' cannot be assigned to type 'MouseEvent' Is there a correct ...