How to create custom shader chunks

sampstrong · July 25, 2023, 9:17pm

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/three.js · GitHub, but I’m struggling to find much other information on how to properly set this up.

I’ve tried importing ShaderChunk and adding a new string similar to the code snippit in the Github issue:

`import noise3D from ‘./noise.glsl’;
import { ShaderChunk } from ‘three/src/renderers/shaders/ShaderChunk.js’

ShaderChunk[‘noise3D’] = noise3D;`

I continue to get an error: “Can not resolve #include ” when adding the #include to my shader code.

If anyone knows the proper workflow to make this work, or a different way to use custom #include statements, I would be grateful if you would point me in the right direction.

mjurczyk · July 26, 2023, 9:36am

Why not onBeforeCompile + .replace ? (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.

sampstrong · July 26, 2023, 1:28pm

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

dubois · July 27, 2023, 6:08pm

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[ 'my_shader_chunk' ].

What you are asking is an excellent idea, it was proposed many years ago, but decided not to be implemented.

(one of many issues filed)

It is not allowed to pass your own Record<string,string> , you can only use the one that three.js designated, namely THREE.ShaderChunks . I never understood why, i think this is a valid approach.

This used to work:

github.com

pailhead/three-refactor-chunk-material/blob/cb625626d2c4e8233ba269c518924942d05c57f1/src/utils.js

// import defaultChunks from './chunks'

const defaultChunks = {}

//modified version of parseIncludes from WebGLRenderer, this one considers outside chunks
export function parseIncludes(string, optionalChunks = {}) {
    var pattern = /^[ \t]*#include +<([\w\d.]+)>/gm

    function replace(match, include) {
        // 1. first try to lookup a user provided chunk
        // 2. then try to lookup module provided chunks
        // 3. finally lookup three's default chunks
        var replace =
            optionalChunks[include] ||
            defaultChunks[include] ||
            THREE.ShaderChunk[include]

        if (replace === undefined) {
            throw new Error('Can not resolve #include <' + include + '>')
        }

This file has been truncated. show original

sampstrong · July 28, 2023, 12:47pm

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?

dubois · July 28, 2023, 7:48pm

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

Topic		Replies	Views
Custom Shader and lighting code Questions shaders , lights	0	769	August 18, 2017
Custom shaders and GLSL syntax highlighting Resources materials	0	997	June 17, 2022
Learning shader patching for three.js Questions shaders , learning-resources	4	4188	April 9, 2018
Three Shader Reader VS code Extension Showcase materials , shaders	1	416	August 29, 2023
Three.js how to combine multiple materials with onBeforeCompile Questions materials	0	763	April 24, 2018

How to create custom shader chunks

Related Topics