Shader Material Template

Shader Material Template

Custom shader materials with independent left/right color controls for unique visual effects.

< Back to templates

This example demonstrates the power of custom shader materials. The shader splits the UV coordinates in half, allowing for independent control of the left and right side colors. We've included two observable properties for the left and right colors, enabling adjustments from the material node properties panel.

Please note that while this example is simple, it showcases the possibilities for creating complex visual effects, textures, and animations using shader programming.

As with other templates, this project includes a default splash page - a 'launch' screen shown to the user when they first land on your page. You can customize it in the index.html file to match your project's needs.

Rendering Engine

three.js

Supported Browsers

Google Chrome
Microsoft Edge
Safari on iOS and MacOS

Scripting Language

TypeScript