CODEWITHSUNDEEP
glslautodesk-forgeautodesk-viewer
Dan Bechard
Dan Bechard

Reputation: 5291

Custom shader materials

I'm trying to get custom shaders working with Forge Viewer.

I've read these posts:

This non-shader material works perfectly fine and renders everything in magenta:

let customMaterial = new THREE.MeshPhongMaterial({
    color: new THREE.Color("#FF00FF"),
    name: `not-built-white`,
    side: THREE.DoubleSide,
});

But when I try to make a material with shaders, it gives me this error:

[.WebGL-0x11817735400] GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs.

And all of my meshes are invisible (but can still be clicked/selected).

It doesn't seem to matter if it's a ShaderMaterial or a RawShaderMaterial, or what I put in the shaders. I've tried hundreds of variants and Googled my poor little heart out. I tried including all of the #DEFINE stuff for MRIT detection, I've tried setting layout(location = x) to various values, using gl_FragData, etc.

Here's my current material setup:

  let VertexShader = `
    attribute vec3 position;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `;

  let FragmentShader = `
    void main() {
      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); // simply output a solid yellow color
    }
  `;

  let customShaderMaterial = new THREE.RawShaderMaterial({
    vertexShader: VertexShader,
    fragmentShader: FragmentShader,
    name: 'custom-shader-material',
    side: THREE.DoubleSide,
  });

Here's my forge version:

"@types/forge-viewer@^7.5.7":
  version "7.5.7"
  resolved "https://registry.npmjs.org/@types/forge-viewer/-/forge-viewer-7.5.7.tgz"
  dependencies:
    "@types/three" "^0.93.30"

What does this error mean, and how do I fix it or even debug it?

Upvotes: 1

Views: 300

Answers (1)

Dan Bechard
Dan Bechard

Reputation: 5291

I figured it out, all I had to do was add this to the material properties:

supportsMrtNormals: true

Then put all the #defines from the second blog post back into the top of the fragment shader:

#ifdef _LMVWEBGL2_
      #if defined(MRT_NORMALS)
        layout(location = 1) out vec4 outNormal;
        #if defined(MRT_ID_BUFFER)
          layout(location = 2) out vec4 outId;
          #if defined(MODEL_COLOR)
            layout(location = 3) out vec4 outModelId;
          #endif
        #endif
      #elif defined(MRT_ID_BUFFER)
        layout(location = 1) out vec4 outId;
        #if defined(MODEL_COLOR)
          layout(location = 2) out vec4 outModelId;
        #endif
      #endif
    #else
      #define gl_FragColor gl_FragData[0]
      #if defined(MRT_NORMALS)
        #define outNormal gl_FragData[1]
        #if defined(MRT_ID_BUFFER)
          #define outId gl_FragData[2]
          #if defined(MODEL_COLOR)
            #define outModelId gl_FragData[3]
          #endif
        #endif
      #elif defined(MRT_ID_BUFFER)
        #define outId gl_FragData[1]
        #if defined(MODEL_COLOR)
          #define outModelId gl_FragData[2]
        #endif
      #endif
    #endif

Upvotes: 1

Related Questions