Glitch multiple issues

[indexofmetals]

Hi, this library is really cool. Thanks for making it! I'm seeing a few issues with Glitch. Please let me know if I should break this up into smaller issues. I can also try to help with these, but I have very little experience with graphics programming.

1: No Glitch component included in the Glitch codesandbox. The codesandbox button in the docs links to this: https://codesandbox.io/s/react-postprocessing-glitchnoise-demo-wd4wx There's no Glitch component in that codesandbox. Adding Glitch to this specific codesandbox (with these specific dependencies and versions) works fine, but:

2. The dependencies in the Glitch codesandbox are not up to date. The version of react-postprocessing included in this codesandbox is 1.0.0-Beta29. Similarly, the versions of Postprocessing, React, and the other react-spring modules are also not the most recent. So I upgraded the versions and discovered:

3. Glitch errors in the latest version of react-postprocessing When I upgrade the dependencies in the codesandbox to the most recent versions, I get the following error: Effects that transform UV coordinates are incompatible with convolution effects Being new to graphics programming, I have no idea what this means. Here is a codesandbox with the dependencies updated to the versions found in the current react-postprocessing package.json https://codesandbox.io/s/react-postprocessing-glitchnoise-demo-qquhu?file=/src/App.js Is it possible that this is actually an issue with Postprocessing itself? If so, I can try to get a minimum example together and file an issue with them.

Note that in the codesandbox I provided, I upgraded to latest version of drei, but the issue persists no matter what version of drei is used.

Again, thanks for making this library, and I am happy to help debug this if you'd like, to the extent that I am capable.

[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 ✌️

👉 https://github.com/react-spring/react-postprocessing/issues/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[bot]]

:tada: This issue has been resolved in version 2.15.2 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: