normalBuffer example? #4725

adamwolf · 2024-03-27T21:35:33Z

adamwolf
Mar 27, 2024

Hiya folks!

Anyone have any examples for effectcomposer things that use the normalBuffer?

adamwolf · 2024-05-27T17:34:50Z

adamwolf
May 27, 2024
Author

It may be obvious to other folks, I guess.

I'm trying to just make a model-viewer-effect that passes through the normal buffer. Here's what I've got so far. (It doesn't seem to work.)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>model-viewer shader experiments</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

  <script
    async
    src="https://ga.jspm.io/npm:es-module-shims@1.7.1/dist/es-module-shims.js"
  ></script>

  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@^0.160.0/build/three.module.min.js"
      }
    }
  </script>

  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.4.0/dist/model-viewer-module.min.js"
  ></script>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@google/model-viewer-effects/dist/model-viewer-effects.min.js"
  ></script>

  <body>
    <main>
      <model-viewer
        src="blender-export.glb"
        ar
        ar-modes="webxr scene-viewer quick-look"
        camera-controls
      >
        <effect-composer id="customComposer" msaa="8"> </effect-composer>
      </model-viewer>

      <script type="module">
        import * as PostProcessing from "https://cdn.jsdelivr.net/npm/postprocessing@6.30.1/build/postprocessing.esm.js";
        const customComposer = document.querySelector(
          "effect-composer#customComposer",
        );
        import {
          Vector2,
          Uniform,
        } from "https://cdn.jsdelivr.net/npm/three@^0.160.0/build/three.module.min.js";

        class FooEffect extends PostProcessing.Effect {
          constructor({
            blendFunction = PostProcessing.BlendFunction.OVERLAY,
            normalBuffer,
          } = {}) {
            const fragmentShader = `
    uniform sampler2D normalBuffer;

    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
      outputColor = texture(normalBuffer, uv);
    }`;
            super("FooEffect", fragmentShader, {
              blendFunction,
              uniforms: new Map([["normalBuffer", new Uniform(normalBuffer)]]),
            });

            this.normalBuffer = normalBuffer;
          }

          setNormalBuffer(buffer) {
            this.normalBuffer = buffer;
            this.uniforms.get("normalBuffer").value = buffer;
          }
        }

        const fooEffect = new FooEffect({
          blendFunction: PostProcessing.BlendFunction.SCREEN,
          normalBuffer: customComposer.normalBuffer,
        });

        const effectPass = new PostProcessing.EffectPass(undefined, fooEffect);
        customComposer.addPass(effectPass, true);
      </script>
    </main>
  </body>
</html>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

normalBuffer example? #4725

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

normalBuffer example? #4725

adamwolf Mar 27, 2024

Replies: 1 comment

adamwolf May 27, 2024 Author

adamwolf
Mar 27, 2024

adamwolf
May 27, 2024
Author