I’m interested in creating my own shader chunks to benefit from using custom #include statements in my glsl code, but I haven’t found a way to make it work. I’ve seen a few references to this, like in this Github issue: Custom Shader Chunk includes broken since THREEjs v. 138 · Issue #23580 · mrdoob…

Why not use your own method to parse the includes? If you look at this code youll find about 3 lines with a regular expression that goes through this string and replaces #include <whatever>. You don’t havde to look up ShaderChunks you can look up any object you desire, like SponeBobSquarePants[ 'm…

Why not onBeforeCompile + .replace :thinking: ? ( example , line 57) Seems like a safer, more flexible (ex. you can expand other includes before using replace, to access their variables), and simpler solution.

I’m familiar with that workflow, but honestly it seems a bit messy compared to just using #include inside a shader. Also, my goal with this isn’t necessarily modifying built in shaders, but more adding my own shader chunks to custom shader materials

Yeah probably not :frowning: but the idea that you can take care of all the shader chunks before three has had a chance to us still valid.

How to create custom shader chunks

Questions

sampstrong July 28, 2023, 12:47pm 5

Appreciate your answer. That definitely clears things up. Seems like it would be a great feature. That repo no longer works with current versions of Three.js?

Topic		Replies	Views
Could Someone help me out with implementing custom shaders? Questions	2	1320	May 8, 2024
Explore the compiled three.js default shaders Resources dev-tools , shaders	2	206	November 19, 2025
Three Shader Reader VS code Extension Showcase materials , shaders	1	713	August 29, 2023
Is it ok to use ES6 template syntax for shaders? Questions es6 , shaders	18	1455	January 31, 2021
Learning shader patching for three.js Questions shaders , learning-resources	4	4623	April 9, 2018

How to create custom shader chunks

Related topics