What is the best way to "blend" a ShaderMaterial with a LambertMaterial?

First and foremost, I want to express my gratitude for this amazing work and community.

My goal is to create a simple low poly-style water material.

I am aware that there are various ways to achieve this, and I prefer to handle it in a JavaScript script (coming from a C# background, frontend development is still somewhat new to me).

After researching extensively online, the method that I have been able to grasp after hours of compiling information is as follows:

var waterVertexShader =  
                "attribute float vertexDisplacement;" +
                "uniform float time;" +
                "varying vec3 vUv;" +
                "void main() {" +
                "   vUv = position;" +
                "   vUv.y += sin(time) * 0.01;" +
                "   gl_Position = projectionMatrix * modelViewMatrix * vec4(vUv, 1.0);"+     
                "}"
            ;

            var waterFragmentShader =

                "void main() {" +
                "gl_FragColor = vec4(0.65, 0.88, 1, 1);" +
                "}";


                },
                flatShading : true,
                vertexShader: waterVertexShader,

While this approach provides the initial desired functionality, my current dilemma lies elsewhere.

If I wish to incorporate, let's say, the properties of a Lambert or Phong material, what would be the correct course of action?

This may seem like a basic query, but the only relevant resource I stumbled upon was on Stack Overflow with no definitive answer: ThreeJS - Extend Lambert Shader with Custom VertexShader Thank you for taking the time to read this.

Answer №1

If you want to elevate a pre-existing material in three.js, there are multiple methods at your disposal:

  • Utilize the callback Material.onBeforeCompile() to make minor enhancements to the shader code. Check out this informative example for reference.
  • Create a custom material using RawShaderMaterial or ShaderMaterial, then incorporate existing shader chunks from the library. This approach offers flexibility but demands a strong understanding of three.js's material system.
  • Making modifications directly to the existing shader chunks is possible, yet not recommended as it involves altering the library code itself.
  • Consider exploring the experimental NodeMaterial as another option. While currently undocumented and not part of the core, there are examples available like this one.

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

Discovering the method for keeping track of file changes and executing find-replace operations without registering it as an event within the monitored file

I am confused about why the output displays two lines when typing 'fizbuzz' into the test.txt file. I understand that it is performing a find and replace operation, but how can I avoid it being triggered by the watch function? const watch = requ ...

Displaying only a section of a webpage using AJAX

Currently, I am utilizing an ajax call to showcase a PHP page, which is functioning correctly as shown below: <script type="text/javascript"> var xhr = false; if (window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); ...

What could be causing my Vuex state to remain unchanged even after the nuxtServerInit commit?

Although I've been utilizing the nuxtServerInit method to retrieve data from my Contentful CMS and commit the mutation to update the categories state object, I keep encountering an issue where categories remain empty even after attempting to display t ...

Open boxes with walls that don't create shadows

Currently, I am facing an issue with an open-sided box created using MeshStandardMaterial and BoxGeometry. I have configured the box to cast and receive shadows, but it is not behaving as expected. I anticipated the interior of the box to darken when the p ...

Why is it that my for loop produces the accurate result, yet my forEach function fails to do so?

Hey there, I'm new to SO and seeking some guidance. I have a task where I need to create a function with two parameters - an array of strings and a string to potentially match within the array. I've developed two versions of the function: one us ...

Priority is given to strings over numbers

Here's some code I'm working with: <tbody> <tr> <td class="float-left"> <!-- {{selectedTemplat?.modifiedAt | da ...

Looking to adjust the title font size when exporting DataTable to Excel?

Would like to customize the title of an excel file exported from Datatable. I attempted to implement a solution found on a stackoverflow post, but it ended up applying the customization to the entire sheet. $("#datatable").DataTable({ ...

I attempted to access data from the phpmyadmin database, but the browser is displaying an error message stating "cannot get/employee", while there are no errors showing in the command prompt

const { json } = require('express/lib/response'); const mysql=require ('mysql'); const express=require('express'); var app=express(); const bodyparser=require('body-parser'); app.use(bodyparser.json()); var mysq ...

Are there any uncomplicated JavaScript tools for creating spreadsheets?

I am in the process of developing a basic web-based expense calculator using asp.net web forms. Each cell will contain a text box, and the objective is to save each value (excluding the totals) to a database. I plan to have an expense table and an expense_ ...

Conceal the div element five seconds after the registration process is completed

Is it possible to automatically hide a div 5 seconds after a user registers? Using the timestamp in PHP for the user's registration, there may be a way to achieve this with jQuery, but it's not certain. I found a script online that successfully ...

Enlarge image when clicked

I need help creating a gallery page where users can click on an image to enlarge it, then navigate through the images using arrows on either side. I am not familiar with JavaScript, so could someone guide me on how to achieve this? Also, I would apprecia ...

Attempting to create a single function that can be utilized with numerous divs that share the same class in jQuery

Currently, I am working on creating a basic jquery gallery viewer. In my code, I have the following structure: <div class="photoset"> <img /> <img /> </div> <div class="photoset"> <img /> <img /> <i ...

Access a webpage in an html document using URL variables

In the process of developing an MVC web app without utilizing any MVC framework, I have created an index.html file with a section that dynamically loads all the views as needed by the user. However, I encountered an issue where direct URLs such as www.foo. ...

Using three.js to add an image onto an already existing object

I attempted to modify the appearance of an object by adding an image, but all my tests resulted in a white object... The goal is simply to apply an image to the entire object. Here is my test code: var obj = scene.getObjectByName('wall_20_118') ...

cPanel is incompatible with node version 12.16.0

I am facing a dilemma regarding hosting my node API, which was built using node version 12.16.0, on cPanel. The available version for node in cPanel is 12.9.0 (Most recent). How should I proceed? Is the node version really a critical factor in this case? ...

Ways to avoid encoding Unicode characters in JavaScript programming

When I retrieve data from an API, I receive a STRING like this: [ { "reason": "Invalid address", "email": "j\u00c3\u00a9r\u00c3\u00b4mel\u00c3\u00a4ufer@com" }, { "reason": "Invalid address", "email": ...

Angular's unconventional solution to Firebase

I've been having trouble integrating Firebase with Angular. When I encountered an error stating that firebase.initializeApp is not a function, I hit a roadblock. const firebase = require("firebase"); (Previously, it was written as: import * as fireb ...

Utilizing MVC2 Devexpress Gridview: Activating a Clientside Javascript function following data binding

Is there a way to execute a Javascript function after the data binding process has finished? I attempted using EndCallback, however, it does not seem to work when the Grid is initially loaded since I am using RenderAction to show the partialview that cont ...

Bootstrap: The search icon button within the input box breaks away from the input box on resolutions other than desktop

I am attempting to place a Search Icon Button inside the Search Input Box while using Bootstrap. Although everything appears correctly at Desktop resolution, at non-desktop resolutions when the menu items collapse into a dropdown, the button and input box ...

JS showcase of object literals and their corresponding properties

Just starting out with Javascript and eager to learn about arrays of objects. I'm currently exploring how to display an object along with its properties. Here's an example showcasing the colors of different fruits: var fruitColor = {'apples ...