From d21a235d0fa1a49685b4cb3bc0cc6887b5e3d12e Mon Sep 17 00:00:00 2001 From: takuma-hmng8 Date: Fri, 10 Jan 2025 14:14:01 +0900 Subject: [PATCH] fix samplingFx --- app/test/001/Playground.tsx | 16 +- app/v2/FxMaterial.tsx | 80 ++-- app/v2/Playground.tsx | 114 ++++-- .../src/hooks/blur/useGaussianBlur/index.ts | 29 +- .../src/materials/core/FxMaterial.ts | 3 +- .../src/materials/core/SamplingFxMaterial.ts | 351 +++++++++--------- .../blur/gaussianBlur/GaussianBlurMaterial.ts | 8 +- .../blur/gaussianBlur/gaussianBlur.glsl.ts | 5 - .../src/materials/impl/fluid/SplatMaterial.ts | 4 +- 9 files changed, 351 insertions(+), 259 deletions(-) diff --git a/app/test/001/Playground.tsx b/app/test/001/Playground.tsx index 505d6863..ca41ed09 100644 --- a/app/test/001/Playground.tsx +++ b/app/test/001/Playground.tsx @@ -7,7 +7,7 @@ import { createBasicFxMaterialImpl, FxMaterialImplValues, BasicFxMaterialImplValues, - useNoise + useNoise, } from "@/packages/use-shader-fx/src"; import { useTexture } from "@react-three/drei"; @@ -32,17 +32,17 @@ export const Playground = () => { const noise = useNoise({ size, dpr: 1, - scale: 10., - timeStrength: .4, + scale: 0.02, + timeStrength: 0.4, mixDst: { src: app, - uvFactor: .1, - alphaFactor: 1., - fit: 'contain', + uvFactor: 0.1, + alphaFactor: 1, + fit: "contain", }, - }) + }); - useFrame((state) => { + useFrame((state) => { noise.render(state); }); diff --git a/app/v2/FxMaterial.tsx b/app/v2/FxMaterial.tsx index dfc77629..df2cb704 100644 --- a/app/v2/FxMaterial.tsx +++ b/app/v2/FxMaterial.tsx @@ -24,8 +24,9 @@ export const FxMaterial = shaderMaterial( u_gooey: new THREE.Texture(), u_model: new THREE.Texture(), u_noise: new THREE.Texture(), - u_color0: new THREE.Color(0x1974d2), - u_color1: new THREE.Color(0xff1e90), + u_fluid: new THREE.Texture(), + u_color0: new THREE.Color(0xfa1bb1), + u_color1: new THREE.Color(0x4a96ec), }, ` @@ -42,48 +43,79 @@ export const FxMaterial = shaderMaterial( uniform sampler2D u_gooey; uniform sampler2D u_model; uniform sampler2D u_noise; + uniform sampler2D u_fluid; uniform vec3 u_color0; uniform vec3 u_color1; - float vignetteStrength = 0.9; // 強度（0.0〜1.0） - float vignetteRadius = 0.64; // 効果が始まる半径（0.0〜1.0） - float rand(vec2 n) { return fract(sin(dot(n ,vec2(12.9898,78.233))) * 43758.5453); } + //// params //// + + // グラデーション + float gradationColorFactor = 0.5; // color0に寄せるか、color1に寄せるか + float gradationGrainIntensity = -.02; // グラデーションに適用する粒子ノイズの強さ + + // ブラー + float blurGrainIntensity = -0.16; // ブラーに加算する粒子ノイズの強さ + float blurGradationIntensity = 2.4; // ブラーに加算するグラデーションカラーの加算強度 + + // ビネット + float vignetteStrength = .9; // 強度（0.0〜1.0） + float vignetteRadius = 0.5; // 効果が始まる半径（0.0〜1.0） + + // グーイ + float gooeyAlphaContrast = 80.0; + float gooeyAlphaOffset = -20.0; + vec2 gooeyNoisePosition = vec2(0.3, 0.3); + vec2 gooeyNoiseIntensity = vec2(0.4, 0.4); + + // 流体 + float fluidIntensity = 0.08; + void main() { vec2 uv = vUv; - float grain = rand(uv); // -1.0〜1.0 + float grain = rand(uv); // 0〜1 - // ビネット - vec2 position = uv - 0.5; - float distance = length(position); - float vignette = smoothstep(vignetteRadius, vignetteRadius - 0.5, distance); - vignette = mix(1.0, vignette, vignetteStrength); - - // ノイズ - vec4 noise = texture2D(u_noise, uv); - vec3 noisedColor = mix(u_color0, u_color1, length(noise.rg * uv) + .1); - noisedColor -= grain * .1; + // 流体 + vec4 fluid = texture2D(u_fluid, uv); + vec2 fluidUv = uv - fluid.rg * fluidIntensity; + + // グラデーション + vec4 noise = texture2D(u_noise, fluidUv); + vec3 gradationColor = mix(u_color0, u_color1, length(noise.rg * fluidUv) + gradationColorFactor); + gradationColor += grain * gradationGrainIntensity; // ブラー - vec4 blurColor = texture2D(u_blur,uv); - blurColor.rgb+=grain * .3; - blurColor.rgb+=noisedColor * 2.; + vec4 blurColor = texture2D(u_blur,fluidUv); + blurColor.rgb += grain * blurGrainIntensity; + blurColor.rgb += gradationColor * blurGradationIntensity; // ブラーとノイズを混ぜる - vec3 mixedBlurColor = mix(noisedColor, blurColor.rgb, blurColor.a); + vec3 mixedBlurColor = mix(gradationColor, blurColor.rgb, blurColor.r); // モデル vec4 modelColor = texture2D(u_model,uv); - float gooeyAlpha = texture2D(u_gooey,uv).a; - vec3 mixedModelColor = mix(mixedBlurColor, vec3(0.), clamp(gooeyAlpha * 80.0 - 20.0,0.,1.)); + float gooeyAlpha = texture2D(u_gooey,uv).r; + vec3 mixedModelColor = mix(mixedBlurColor, vec3(0.), clamp(gooeyAlpha * gooeyAlphaContrast + gooeyAlphaOffset, 0., 1.)); - vec3 finalColor = mixedModelColor * vignette; + // ビネット + vec2 position = fluidUv - .5; - gl_FragColor = vec4(finalColor, 1.0); + position.x += (noise.g - gooeyNoisePosition.x) * gooeyNoiseIntensity.x; + position.y += (noise.g - gooeyNoisePosition.y) * gooeyNoiseIntensity.y; + + float distance = length(position); + float vignette = smoothstep(vignetteRadius, vignetteRadius - 0.5, distance); + vignette = mix(1.0, vignette, vignetteStrength); + + vec3 finalColor = mixedModelColor * vignette; + + // アウトプット + gl_FragColor = vec4(finalColor, 1.); + } ` ); diff --git a/app/v2/Playground.tsx b/app/v2/Playground.tsx index 92b3ff99..f60fe70f 100644 --- a/app/v2/Playground.tsx +++ b/app/v2/Playground.tsx @@ -1,19 +1,42 @@ "use client"; import * as THREE from "three"; -import { useEffect, useRef, useState } from "react"; -import { useFrame, useThree, extend, createPortal } from "@react-three/fiber"; +import { forwardRef, useEffect, useRef, useState } from "react"; +import { + useFrame, + useThree, + extend, + createPortal, + MeshProps, +} from "@react-three/fiber"; import { useNoise, - useBoxBlur, useSingleFBO, useGaussianBlur, + useFluid, } from "@/packages/use-shader-fx/src"; import { FxMaterial } from "./FxMaterial"; -import { Float, OrbitControls } from "@react-three/drei"; +import { Float } from "@react-three/drei"; extend({ FxMaterial }); +// ここをシングルトンでメソッド化する +const newPosition = [ + new THREE.Vector3(2, 1, -1), + new THREE.Vector3(-2, 2, 0), + new THREE.Vector3(1, 2, 2), +]; + +/** 円 */ +const Sphere = forwardRef((props, ref) => { + return ( + + + + + ); +}); + export const Playground = () => { const { size, viewport, camera } = useThree(); @@ -29,40 +52,66 @@ export const Playground = () => { const blur = useGaussianBlur({ size, - dpr: 1, - radius: 20, - sigma: new THREE.Vector2(2, 2), + dpr: 0.2, texture: { - src: renderTarget.texture - } + src: renderTarget.texture, + }, + }); + blur.setValues({ + radius: 24, }); const gooey = useGaussianBlur({ size, - dpr: 2, - radius: 15, - sigma: new THREE.Vector2(5,5), + dpr: 1, texture: { - src: renderTarget.texture - } + src: renderTarget.texture, + }, + }); + gooey.setValues({ + radius: 24, }); const noise = useNoise({ size, - dpr: 0.05, + dpr: 0.1, + }); + noise.setValues({ scale: 0.03, + timeStrength: 0.3, + }); + + const fluid = useFluid({ + size, + dpr: 0.3, }); const mesh0 = useRef(null); const mesh1 = useRef(null); + const mesh2 = useRef(null); + const spheres = [mesh0, mesh1, mesh2]; + + // これもシングルトンでメソッド化 + const lerpSpheresPosition = ( + position: THREE.Vector3[], + alpha: number = 0.03 + ) => { + spheres.forEach((sphere, i) => { + sphere.current!.position.lerp(position[i], alpha); + }); + }; useFrame((state) => { blur.render(state); gooey.render(state); noise.render(state); + fluid.render(state); updateRenderTarget({ gl: state.gl }); - mesh0.current!.position.x -= - Math.sin(state.clock.getElapsedTime()) * 0.02; + // mesh0.current!.position.x -= + // Math.sin(state.clock.getElapsedTime()) * 0.02; + + // positionの設定 + lerpSpheresPosition(newPosition); }); return ( @@ -74,27 +123,28 @@ export const Playground = () => { u_gooey={gooey.texture} u_model={renderTarget.texture} u_noise={noise.texture} + u_fluid={fluid.texture} key={FxMaterial.key} /> {createPortal( - - - - - - - - - - - - - - - , + <> + + + + + + + + , offscreenScene )} ); }; + +/*=============================================== +必要な機能 +1. マウスでカメラ視点の操作 +2. 数字を与えるとその数字でランダムで位置とカメラワークがlerpする的なの +===============================================*/ diff --git a/packages/use-shader-fx/src/hooks/blur/useGaussianBlur/index.ts b/packages/use-shader-fx/src/hooks/blur/useGaussianBlur/index.ts index e5487048..b9f2e46b 100644 --- a/packages/use-shader-fx/src/hooks/blur/useGaussianBlur/index.ts +++ b/packages/use-shader-fx/src/hooks/blur/useGaussianBlur/index.ts @@ -24,7 +24,7 @@ export const useGaussianBlur = ({ fboAutoSetSize, renderTargetOptions, materialParameters, - radius = 1, + radius = 1, ...uniformValues }: GaussianBlurProps): HooksReturn< GaussianBlurValuesAndConfig, @@ -54,7 +54,7 @@ export const useGaussianBlur = ({ ...renderTargetOptions, }); - const [config, setConfig] = useMutableState({ + const [_, setConfig] = useMutableState({ radius, }); @@ -75,25 +75,32 @@ export const useGaussianBlur = ({ const render = useCallback( (rootState: RootState, newValues?: GaussianBlurValuesAndConfig) => { const { gl } = rootState; - newValues && setValues(newValues); - - material.uniforms.renderCount.value = 0; - material.uniforms.texture_src.value = uniformValues.texture?.src || new THREE.Texture(); - material.uniforms.u_stepSize.value.set(0, 1); + newValues && setValues(newValues); + + material.uniforms.renderCount.value = 0; + material.uniforms.texture_src.value = + uniformValues.texture?.src || new THREE.Texture(); + material.uniforms.u_stepSize.value.set(0, 1); material.updateFx(); updateRenderTarget({ gl }); // draw horizontal blur updateRenderTarget({ gl }, ({ read }) => { material.uniforms.texture_src.value = read; - material.uniforms.u_stepSize.value.set(1, 0); - material.uniforms.renderCount.value = 1; - material.updateFx(); + material.uniforms.u_stepSize.value.set(1, 0); + material.uniforms.renderCount.value = 1; + material.updateFx(); }); return renderTarget.read.texture; }, - [setValues, updateRenderTarget, material, renderTarget, uniformValues.texture?.src] + [ + setValues, + updateRenderTarget, + material, + renderTarget, + uniformValues.texture?.src, + ] ); return { diff --git a/packages/use-shader-fx/src/materials/core/FxMaterial.ts b/packages/use-shader-fx/src/materials/core/FxMaterial.ts index c53c21d5..023af107 100644 --- a/packages/use-shader-fx/src/materials/core/FxMaterial.ts +++ b/packages/use-shader-fx/src/materials/core/FxMaterial.ts @@ -23,7 +23,6 @@ export type FxMaterialProps = { export class FxMaterial extends THREE.ShaderMaterial { public static readonly key: string = THREE.MathUtils.generateUUID(); - constructor({ uniformValues, materialParameters = {}, @@ -39,7 +38,7 @@ export class FxMaterial extends THREE.ShaderMaterial { texelSize: { value: new THREE.Vector2() }, aspectRatio: { value: 0 }, maxAspect: { value: new THREE.Vector2() }, - renderCount: { value: 0 } + renderCount: { value: 0 }, }, uniforms || {}, ]) as DefaultUniforms; diff --git a/packages/use-shader-fx/src/materials/core/SamplingFxMaterial.ts b/packages/use-shader-fx/src/materials/core/SamplingFxMaterial.ts index 18a8e27b..edcdb5c5 100644 --- a/packages/use-shader-fx/src/materials/core/SamplingFxMaterial.ts +++ b/packages/use-shader-fx/src/materials/core/SamplingFxMaterial.ts @@ -1,188 +1,193 @@ -import * as THREE from 'three'; -import { FxMaterialProps } from './FxMaterial'; +import * as THREE from "three"; +import { FxMaterialProps } from "./FxMaterial"; import { TexturePipelineSrc } from "../../misc"; import { - NestUniformValues, - flattenUniformValues, + NestUniformValues, + flattenUniformValues, } from "../../shaders/uniformsUtils"; -import { - joinShaderPrefix -} from '../../shaders/mergeShaderLib'; -import { - BasicFxMaterial, - BasicFxValues, - BasicFxUniforms, - FxFlag as BasicFxFlag, - FitType, -} from './BasicFxMaterial'; - +import { joinShaderPrefix } from "../../shaders/mergeShaderLib"; +import { + BasicFxMaterial, + BasicFxValues, + BasicFxUniforms, + FxFlag as BasicFxFlag, + FitType, +} from "./BasicFxMaterial"; type SamplingFxUniformsUnique = { - // texture - texture_src: { value: TexturePipelineSrc }; - texture_resolution: { value: THREE.Vector2 }; - texture_fit: { value: FitType }; + // texture + texture_src: { value: TexturePipelineSrc }; + texture_resolution: { value: THREE.Vector2 }; + texture_fit: { value: FitType }; } & typeof BasicFxMaterial.DEFAULT_VALUES; export type SamplingFxUniforms = { - texture_aspectRatio: { value: number }; - texture_fitScale: { value: THREE.Vector2 }; -} & SamplingFxUniformsUnique & BasicFxUniforms; + texture_aspectRatio: { value: number }; + texture_fitScale: { value: THREE.Vector2 }; +} & SamplingFxUniformsUnique & + BasicFxUniforms; type FxValues = NestUniformValues & BasicFxValues; export type SamplingFxValues = FxValues; export type FxFlag = { - texture: boolean; + texture: boolean; } & BasicFxFlag; - -export class SamplingFxMaterial extends BasicFxMaterial { - - static readonly DEFAULT_VALUES = { - ...BasicFxMaterial.DEFAULT_VALUES, - // texture - texture_src: { value: null }, - texture_resolution: { value: new THREE.Vector2() }, - texture_fit: { value: 'fill' }, - texture_aspectRatio: { value: 0 }, // private - texture_fitScale: { value: new THREE.Vector2() }, // private - } - - static readonly SHADER_PREFIX = { - ...BasicFxMaterial.SHADER_PREFIX, - texture: '#define USF_USE_TEXTURE', - } - - fxFlag: FxFlag; - - uniforms!: SamplingFxUniforms; - - constructor({ - uniformValues, - materialParameters = {}, - uniforms, - vertexShader, - fragmentShader - }: FxMaterialProps) { - super({ - uniformValues, - materialParameters, - uniforms: THREE.UniformsUtils.merge([ - SamplingFxMaterial.DEFAULT_VALUES, - uniforms || {} - ]) - }) - - this.vertexShaderCache = this.vertexShader; - this.fragmentShaderCache = this.fragmentShader; - - this.fxFlag = this.setupDefaultFlag(uniformValues); - - this.setupFxShaders(vertexShader, fragmentShader, 'samplingFx'); - } - - // - isContainsFxValues(values?: { [key: string]: any }): boolean { - if (!values) return false; - // THINK : ここでflattenUniformValuesを呼び出すべき？ - const _values = flattenUniformValues(values); - return Object.keys(_values).some((key) => - Object.keys(SamplingFxMaterial.DEFAULT_VALUES).includes(key as keyof FxValues) - ); - } - - updateResolution(resolution: THREE.Vector2) { - super.updateResolution(resolution); - - const textureAspect = this.calcAspectRatio( - this.uniforms.texture_fit?.value, - this.uniforms.texture_src?.value, - this.uniforms.texture_resolution?.value - ); - - this.uniforms.texture_aspectRatio.value = textureAspect.srcAspectRatio; - this.uniforms.texture_fitScale.value = textureAspect.fitScale; - } - - setupDefaultFlag(uniformValues?: FxValues): FxFlag { - const isMixSrc = uniformValues?.mixSrc ? true : false; - const isMixDst = uniformValues?.mixDst ? true : false; - const isTexture = uniformValues?.texture ? true : false; - const isSrcSystem = isMixSrc || isMixDst || isTexture - return { - mixSrc: isMixSrc, - mixDst: isMixDst, - texture: isTexture, - srcSystem: isSrcSystem, - } - } - - handleUpdateFx( - uniforms: SamplingFxUniforms, - fxFlag: FxFlag - ): { - validCount: number; - updatedFlag: FxFlag; - } { - - const { validCount: parentValidCount, updatedFlag: parentUpdateFlag } = super.handleUpdateFx(uniforms as BasicFxUniforms, fxFlag as BasicFxFlag); - - let localValidCount = 0; - fxFlag = { - ...parentUpdateFlag, - ...fxFlag - } - - const { texture } = fxFlag; - - // textureの判定 - const isTexture = uniforms.texture_src.value ? true : false; - if (texture !== isTexture) { - fxFlag.texture = isTexture; - localValidCount++; - } - - // srcSystemの再判定 (mixSrc, mixDst, textureがいずれかtrueならsrcSystem) - const { mixSrc, mixDst } = fxFlag; - const isSrcSystem = mixSrc || mixDst || isTexture; - if (fxFlag.srcSystem !== isSrcSystem) { - fxFlag.srcSystem = isSrcSystem; - localValidCount++; - } - - return { - validCount: parentValidCount + localValidCount, - updatedFlag: fxFlag - }; - } - - handleUpdateFxPrefix(fxFlag: FxFlag): { - prefixVertex: string; - prefixFragment: string; - } { - // 親の処理を実行 - const { prefixVertex: parentPrefixVertex, prefixFragment: parentPrefixFragment } = super.handleUpdateFxPrefix(fxFlag); - - // texture用prefixの追加 - const texturePrefix = fxFlag.texture ? SamplingFxMaterial.SHADER_PREFIX.texture : ""; - - const prefixVertex = joinShaderPrefix([ - parentPrefixVertex.trim(), - texturePrefix, - "\n" - ]); - - const prefixFragment = joinShaderPrefix([ - parentPrefixFragment.trim(), - texturePrefix, - "\n" - ]); - - return { - prefixVertex, - prefixFragment - }; - } - -}; \ No newline at end of file +export class SamplingFxMaterial extends BasicFxMaterial { + static readonly DEFAULT_VALUES = { + ...BasicFxMaterial.DEFAULT_VALUES, + // texture + texture_src: { value: null }, + texture_resolution: { value: new THREE.Vector2() }, + texture_fit: { value: "fill" }, + texture_aspectRatio: { value: 0 }, // private + texture_fitScale: { value: new THREE.Vector2() }, // private + }; + + static readonly SHADER_PREFIX = { + ...BasicFxMaterial.SHADER_PREFIX, + texture: "#define USF_USE_TEXTURE", + }; + + fxFlag: FxFlag; + + uniforms!: SamplingFxUniforms; + + constructor({ + uniformValues, + materialParameters = {}, + uniforms, + vertexShader, + fragmentShader, + }: FxMaterialProps) { + super({ + uniformValues, + materialParameters, + uniforms: THREE.UniformsUtils.merge([ + SamplingFxMaterial.DEFAULT_VALUES, + uniforms || {}, + ]), + }); + + this.vertexShaderCache = this.vertexShader; + this.fragmentShaderCache = this.fragmentShader; + + this.fxFlag = this.setupDefaultFlag(uniformValues); + + this.setupFxShaders(vertexShader, fragmentShader, "samplingFx"); + } + + // + isContainsFxValues(values?: { [key: string]: any }): boolean { + if (!values) return false; + // THINK : ここでflattenUniformValuesを呼び出すべき？ + const _values = flattenUniformValues(values); + return Object.keys(_values).some((key) => + Object.keys(SamplingFxMaterial.DEFAULT_VALUES).includes( + key as keyof FxValues + ) + ); + } + + updateResolution(resolution: THREE.Vector2) { + super.updateResolution(resolution); + + const textureAspect = this.calcAspectRatio( + this.uniforms.texture_fit?.value, + this.uniforms.texture_src?.value, + this.uniforms.texture_resolution?.value + ); + + this.uniforms.texture_aspectRatio.value = textureAspect.srcAspectRatio; + this.uniforms.texture_fitScale.value = textureAspect.fitScale; + } + + setupDefaultFlag(uniformValues?: FxValues): FxFlag { + const isMixSrc = uniformValues?.mixSrc ? true : false; + const isMixDst = uniformValues?.mixDst ? true : false; + const isTexture = uniformValues?.texture ? true : false; + const isSrcSystem = isMixSrc || isMixDst || isTexture; + return { + mixSrc: isMixSrc, + mixDst: isMixDst, + texture: isTexture, + srcSystem: isSrcSystem, + }; + } + + handleUpdateFx( + uniforms: SamplingFxUniforms, + fxFlag: FxFlag + ): { + validCount: number; + updatedFlag: FxFlag; + } { + const { validCount: parentValidCount, updatedFlag: parentUpdateFlag } = + super.handleUpdateFx( + uniforms as BasicFxUniforms, + fxFlag as BasicFxFlag + ); + + let localValidCount = 0; + fxFlag = { + ...parentUpdateFlag, + ...fxFlag, + }; + + const { texture } = fxFlag; + + // textureの判定 + const isTexture = uniforms.texture_src.value ? true : false; + if (texture !== isTexture) { + fxFlag.texture = isTexture; + localValidCount++; + } + + // srcSystemの再判定 (mixSrc, mixDst, textureがいずれかtrueならsrcSystem) + const { mixSrc, mixDst } = fxFlag; + const isSrcSystem = mixSrc || mixDst || isTexture; + if (fxFlag.srcSystem !== isSrcSystem) { + fxFlag.srcSystem = isSrcSystem; + localValidCount++; + } + + return { + validCount: parentValidCount + localValidCount, + updatedFlag: fxFlag, + }; + } + + handleUpdateFxPrefix(fxFlag: FxFlag): { + prefixVertex: string; + prefixFragment: string; + } { + // 親の処理を実行 + const { + prefixVertex: parentPrefixVertex, + prefixFragment: parentPrefixFragment, + } = super.handleUpdateFxPrefix(fxFlag); + + // texture用prefixの追加 + const texturePrefix = fxFlag.texture + ? SamplingFxMaterial.SHADER_PREFIX.texture + : ""; + + const prefixVertex = joinShaderPrefix([ + parentPrefixVertex.trim(), + texturePrefix, + "\n", + ]); + + const prefixFragment = joinShaderPrefix([ + parentPrefixFragment.trim(), + texturePrefix, + "\n", + ]); + + return { + prefixVertex, + prefixFragment, + }; + } +} diff --git a/packages/use-shader-fx/src/materials/impl/blur/gaussianBlur/GaussianBlurMaterial.ts b/packages/use-shader-fx/src/materials/impl/blur/gaussianBlur/GaussianBlurMaterial.ts index 31e63231..57500f5a 100644 --- a/packages/use-shader-fx/src/materials/impl/blur/gaussianBlur/GaussianBlurMaterial.ts +++ b/packages/use-shader-fx/src/materials/impl/blur/gaussianBlur/GaussianBlurMaterial.ts @@ -2,7 +2,11 @@ import * as THREE from "three"; import { fragment, vertex } from "./gaussianBlur.glsl"; import { FxMaterialProps } from "../../../core/FxMaterial"; import { NestUniformValues } from "../../../../shaders/uniformsUtils"; -import { SamplingFxMaterial, SamplingFxUniforms, SamplingFxValues } from "../../../core/SamplingFxMaterial"; +import { + SamplingFxMaterial, + SamplingFxUniforms, + SamplingFxValues, +} from "../../../core/SamplingFxMaterial"; type GaussianBlurUniforms = { /** */ @@ -57,7 +61,7 @@ export class GaussianBlurMaterial extends SamplingFxMaterial { setBlurRadius(kernelSize: number) { const weights = []; - let t = 0.0; + let t = 0.0; for (let i = kernelSize - 1; i >= 0; i--) { let r = 1.0 + 2.0 * i; diff --git a/packages/use-shader-fx/src/materials/impl/blur/gaussianBlur/gaussianBlur.glsl.ts b/packages/use-shader-fx/src/materials/impl/blur/gaussianBlur/gaussianBlur.glsl.ts index b3a8d896..8574c5ec 100644 --- a/packages/use-shader-fx/src/materials/impl/blur/gaussianBlur/gaussianBlur.glsl.ts +++ b/packages/use-shader-fx/src/materials/impl/blur/gaussianBlur/gaussianBlur.glsl.ts @@ -9,15 +9,12 @@ export const vertex = ` export const fragment = ` precision highp int; - // uniform sampler2D src; uniform vec2 u_stepSize; uniform vec2 sigma; uniform float u_weights[KERNEL_SIZE]; void main() { - ${ShaderLib.samplingFx_fragment_begin} - float count = float(KERNEL_SIZE) - 1.0; vec4 color = vec4(0.0); @@ -57,8 +54,6 @@ export const fragment = ` vec4 usf_FragColor = vec4(sum.rgb / sumW, sum.a); - ${ShaderLib.samplingFx_fragment_end} - gl_FragColor = usf_FragColor; } `; diff --git a/packages/use-shader-fx/src/materials/impl/fluid/SplatMaterial.ts b/packages/use-shader-fx/src/materials/impl/fluid/SplatMaterial.ts index 73384f30..df751258 100644 --- a/packages/use-shader-fx/src/materials/impl/fluid/SplatMaterial.ts +++ b/packages/use-shader-fx/src/materials/impl/fluid/SplatMaterial.ts @@ -30,13 +30,13 @@ export class SplatMaterial extends FxMaterial { uniforms: { force: { value: new THREE.Vector2(0, 0) }, center: { value: new THREE.Vector2(0, 0) }, - scale: { value: new THREE.Vector2(120, 120) }, + scale: { value: new THREE.Vector2(60, 60) }, } as SplatUniforms, }); this.type = SplatMaterial.type; - this.forceBias = 30; + this.forceBias = 20; this.blending = THREE.AdditiveBlending; }