Glitch multiple issues about react-postprocessing

[gsimone]

1. thanks for letting us know, docs are still young, will fix it
2. same, if you want you can fix the example by forking & updating and we will fork that and use it in the docs
3. smaa is active by default and it is a convolution effect, try

<EffectComposer smaa={false}>
              <Glitch

BTW I opened an issue asking for comments about a storybook or alt form of documentation/examples, if you have suggestions ✌️

👉 #14

[drcmda]

there is a bug in the betas, they all ran without smaa (antialeasing, smooth edges). when it comes to effects and how they work, i am a complete novice, i have no idea what a convolution effect is, that message comes from postprocessing. im guessing certain effects cant be mixed with others. in pp you have to create multiple passes in cases like that, in react-pp we have no means for that currently.

i hope this lib will at least show the possibilities so that people that really know what they're doing can help carving it out.

[robksawyer]

Any luck with this? I'm running across this with a custom shader.

/**
 * https://www.airtightinteractive.com/demos/js/shaders/js/shaders/HorizontalBlurShader.js
 */

const HorizontalBlurShader = {
  fragmentShader: `
		uniform float strength;

		void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {

			vec4 sum = vec4(0.0);

			sum += texture2D(inputBuffer, vec2(uv.x - 4.0 * strength, uv.y)) * 0.051;
			sum += texture2D(inputBuffer, vec2(uv.x - 3.0 * strength, uv.y)) * 0.0918;
			sum += texture2D(inputBuffer, vec2(uv.x - 2.0 * strength, uv.y)) * 0.12245;
			sum += texture2D(inputBuffer, vec2(uv.x - 1.0 * strength, uv.y)) * 0.1531;
			sum += texture2D(inputBuffer, vec2(uv.x, uv.y)) * 0.1633;
			sum += texture2D(inputBuffer, vec2(uv.x + 1.0 * strength, uv.y)) * 0.1531;
			sum += texture2D(inputBuffer, vec2(uv.x + 2.0 * strength, uv.y)) * 0.12245;
			sum += texture2D(inputBuffer, vec2(uv.x + 3.0 * strength, uv.y)) * 0.0918;
			sum += texture2D(inputBuffer, vec2(uv.x + 4.0 * strength, uv.y)) * 0.051;

			outputColor = sum;

		}`
}

export default HorizontalBlurShader

import * as React from 'react';
import { Uniform } from 'three';
import { Effect, EffectAttribute } from 'postprocessing';

import HorizontalBlurShader from '../shaders/HorizontalBlurShader';

let _uStrength;

export class HorizontalBlurEffect extends Effect {
  constructor({ strength = 0.1 } = {}) {
    super('HorizontalBlurEffect', HorizontalBlurShader.fragmentShader, {
      attributes: EffectAttribute.CONVOLUTION,
      uniforms: new Map([['strength', new Uniform(strength)]]),
    });

    _uStrength = strength;
  }

  /**
   * Updates this effect.
   *
   * @param {WebGLRenderer} renderer - The renderer.
   * @param {WebGLRenderTarget} inputBuffer - A frame buffer that contains the result of the previous pass.
   * @param {Number} [deltaTime] - The time between the last frame and the current one in seconds.
   */

  update(renderer, inputBuffer, deltaTime) {
    this.uniforms.get('strength').value = _uStrength;
  }
}

export const HorizontalBlur = React.forwardRef(function HorizontalBlur(
  { strength = 0 },
  ref,
) {
  const effect = React.useMemo(
    () => new HorizontalBlurEffect({ strength }),
    [strength],
  );
  return <primitive ref={ref} object={effect} dispose={null} />;
});

[github-actions]

🎉 This issue has been resolved in version 2.15.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀