RawShaderMaterial not supported in WebGPU. How to customise fragment for both webgl and webgpu

danrossi · September 6, 2023, 4:04pm

I have this custom shader for text processing for webgl. But RawShaderMaterial is not supported in Webgpu. How to manipulate the texture sampler in webgpu without having to build a seperate node system which isn’t documented. I presume the nodes is automatically built from MeshBasicMaterial. Can I transform my shader using MeshBasicMaterial instead ? So add it to the MeshBasicMaterial fragment ?

github.com

danrossi/three-bmfont-text/blob/8a82f08a3629e00ca6865f24791dd93f66705383/src/shaders/MSDFShader.js#L43


      
              out vec4 outColor;
          
              float median(float r, float g, float b) {
                return max(min(r, g), min(max(r, g), b));
              }
          
              void main() {
                vec3 sample1 = texture(map, vUv).rgb;
                float sigDist = median(sample1.r, sample1.g, sample1.b) - 0.5;
                float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);
                outColor = vec4(color.xyz, alpha * opacity);
                ${discard}
              }
            `
          }
          
          static fragmentShader(precision, alphaTest) { 
          
            const discard = BaseShader.discarOnAlphaTest(alphaTest);
               
            return `

github.com

danrossi/three-bmfont-text/blob/8a82f08a3629e00ca6865f24791dd93f66705383/src/TextBitmap.js#L52


      
                  side: DoubleSide,
                  transparent: true,
                  depthTest: false,
                  map: texture,
                  //depthWrite: false,
                  color: config.color,
                  glslVersion: webgl2 ? GLSL3 : GLSL1
          };
          
          
          const material = new RawShaderMaterial(webgl2 ? MSDFShader.createShader2(shaderConf) : MSDFShader.createShader(shaderConf));
          
          material.extensions.derivatives = true;
          
          const mesh = this.mesh = new Mesh(geometry, material),
              group = this.group = new Group();
          mesh.renderOrder = 1;
          
          this.rotateMesh(mesh);
          
          const s = config.scale || 1;

Topic		Replies	Views
Convert custom shader to MeshBasicNodeMaterial Questions webgpu	12	542	September 17, 2023
How to use custom shaders in WebGPU Questions shaders , webgpu	7	2118	September 14, 2023
RawShaderMaterial and WebGL 2 Questions shader-material	7	3177	December 12, 2018
How to write custom vertex shader using NodeMaterial and WebGPURenderer? Questions node-material , webgpu	0	61	April 3, 2024
How to utilize webgpu (is nodes the best option?) Questions webgpu	1	3190	April 11, 2023

RawShaderMaterial not supported in WebGPU. How to customise fragment for both webgl and webgpu

Related Topics