From 4bda3e8aaa93fce7ed8c8e256f4677486dc489f6 Mon Sep 17 00:00:00 2001 From: "Raoul v. R" Date: Sun, 25 Feb 2024 01:14:02 +0100 Subject: [PATCH] Update custom-effects.en.md --- manual/content/custom-effects.en.md | 47 +++++++++++------------------ 1 file changed, 17 insertions(+), 30 deletions(-) diff --git a/manual/content/custom-effects.en.md b/manual/content/custom-effects.en.md index 519dc3a0b..af1773c0d 100644 --- a/manual/content/custom-effects.en.md +++ b/manual/content/custom-effects.en.md @@ -21,7 +21,7 @@ __shader.frag__ ```glsl uniform vec3 weights; -vec4 mainImage(in vec4 inputColor, in vec2 uv, in GData data) { +vec4 mainImage(const in vec4 inputColor, const in vec2 uv, const in GData gData) { return vec4(inputColor.rgb * weights, inputColor.a); @@ -34,18 +34,19 @@ __CustomEffect.js__ import { Uniform, Vector3 } from "three"; import { Effect } from "postprocessing"; -// Use a bundler plugin like esbuild-plugin-glsl to import shaders as text. +// Tip: Use a bundler plugin like esbuild-plugin-glsl to import shaders as text. import fragmentShader from "./shader.frag"; export class CustomEffect extends Effect { constructor() { - super("CustomEffect", fragmentShader, { - uniforms: new Map([ - ["weights", new Uniform(new Vector3())] - ]) - }); + super("CustomEffect"); + + this.fragmentShader = fragmentShader; + + const uniforms = this.input.uniforms; + uniforms.set("weights", new Uniform(new Vector3())); } @@ -77,15 +78,17 @@ void mainSupport(in vec2 uv); ### Geometry Data -Effects have access to the geometry data of the current fragment via the `data` parameter of the `mainImage` function. The `EffectPass` detects whether an effect reads a value from this struct and only fetches the relevant data from the respective textures when it's actually needed. If you wish to sample depth at another coordinate, use the predefined function `float readDepth(in vec2 uv)`. To calculate the view Z based on depth, you can use the predefined function `float getViewZ(in float depth)`. The `GData` is defined as follows: +Effects have access to the geometry data of the current fragment via the `data` parameter of the `mainImage` function. The `EffectPass` detects whether an effect reads a value from this struct and only fetches the relevant data from the respective textures when it's actually needed. If you wish to sample depth at another coordinate, use the predefined function `float readDepth(vec2 uv)`. To calculate the view Z based on depth, you can use the predefined function `float getViewZ(float depth)`. The `GData` is defined as follows: ```glsl struct GData { - vec3 position; + vec4 color; + float depth vec3 normal; - float depth; + vec3 orm; + vec3 emission; + vec3 velocity; float luminance; - float roughness; } ``` @@ -109,8 +112,10 @@ The fragment shader has access to the following additional uniforms: struct GBuffer { sampler2D color; sampler2D depth; - sampler2D position; sampler2D normal; + sampler2D orm; + sampler2D emission; + sampler2D velocity; } uniform GBuffer gBuffer; @@ -137,21 +142,3 @@ _Effects may define custom uniforms, varyings, functions and preprocessor macros Furthermore, the shader chunks [common](https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/common.glsl.js) and [packing](https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/packing.glsl.js) are included in the fragment shader by default. The functions `packDepthToRGBA(v)` and `unpackRGBAToDepth(v)` are also available under the aliases `packFloatToRGBA(v)` and `unpackRGBAToFloat(v)`. - -## WebGL Extensions - -Effects can enable WebGL 1 shader extensions via the `extensions` constructor option. The available [WebGLExtensions]() are `DERIVATIVES`, `FRAG_DEPTH`, `DRAW_BUFFERS` and `SHADER_TEXTURE_LOD`. - -```js -class MyEffect extends Effect { - - constructor() { - - super(name, fragmentShader, { - extensions: new Set([WebGLExtension.DERIVATIVES]) - }); - - } - -} -```