diff --git a/examples/shader-lab-multi-pass.ts b/examples/shader-lab-multi-pass.ts index 28f400bc2d..e461d947eb 100644 --- a/examples/shader-lab-multi-pass.ts +++ b/examples/shader-lab-multi-pass.ts @@ -18,11 +18,11 @@ import { Texture2D, Vector3, Vector4, - WebGLEngine, -} from '@galacean/engine'; -import { ShaderLab } from '@galacean/engine-shader-lab'; -import { OrbitControl } from '@galacean/engine-toolkit-controls'; -import * as dat from 'dat.gui'; + WebGLEngine +} from "@galacean/engine"; +import { ShaderLab } from "@galacean/engine-shader-lab"; +import { OrbitControl } from "@galacean/engine-toolkit-controls"; +import * as dat from "dat.gui"; const LAYER = 40; @@ -32,13 +32,13 @@ const shaderLab = new ShaderLab(); const loopPassSource = Array.from({ length: LAYER }) .map((_, index) => { const step = (1 / LAYER) * index; - const u_furOffset = step % 1 === 0 ? step + '.0' : step; + const u_furOffset = step % 1 === 0 ? step + ".0" : step; const renderStateSource = index > 0 ? ` BlendState = transparentBlendState; DepthState = transparentDepthState; - RenderQueueType = RenderQueueType.Transparent; + RenderQueueType = Transparent; ` : ``; @@ -136,7 +136,7 @@ const loopPassSource = Array.from({ length: LAYER }) } `; }) - .join('\n'); + .join("\n"); const furShaderSource = `Shader "fur-unlit" { SubShader "Default" { @@ -156,14 +156,14 @@ const furShaderSource = `Shader "fur-unlit" { vec4 POSITION; vec3 NORMAL; vec2 TEXCOORD_0; - } + }; struct v2f { vec2 v_uv; vec2 v_uv2; vec3 v_normal; vec3 v_pos; - } + }; #define PI 3.14159265359 #define RECIPROCAL_PI 0.31830988618 @@ -176,13 +176,12 @@ class RandomGravityScript extends Script { shaderData: ShaderData; progress = 0; onUpdate(deltaTime: number) { - const progress = - 0.5 + Math.cos((this.progress = this.progress + deltaTime * 2)) / 2; - this.shaderData.setFloat('u_gravityIntensity', progress); + const progress = 0.5 + Math.cos((this.progress = this.progress + deltaTime * 2)) / 2; + this.shaderData.setFloat("u_gravityIntensity", progress); } } -WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { +WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => { engine.canvas.resizeByClientSize(); const furShader = Shader.create(furShaderSource); @@ -190,7 +189,7 @@ WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { const rootEntity = scene.createRootEntity(); // camera - const cameraEntity = rootEntity.createChild('cameraNode'); + const cameraEntity = rootEntity.createChild("cameraNode"); cameraEntity.transform.setPosition(0, 0, 5); cameraEntity.addComponent(Camera); cameraEntity.addComponent(OrbitControl); @@ -199,16 +198,16 @@ WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { .load([ { type: AssetType.Texture2D, - url: 'https://mdn.alipayobjects.com/huamei_dmxymu/afts/img/A*R75iTZlbVfgAAAAAAAAAAAAADuuHAQ/original', + url: "https://mdn.alipayobjects.com/huamei_dmxymu/afts/img/A*R75iTZlbVfgAAAAAAAAAAAAADuuHAQ/original" }, { type: AssetType.Texture2D, - url: 'https://mdn.alipayobjects.com/huamei_dmxymu/afts/img/A*t1s4T7h_1OQAAAAAAAAAAAAADuuHAQ/original', + url: "https://mdn.alipayobjects.com/huamei_dmxymu/afts/img/A*t1s4T7h_1OQAAAAAAAAAAAAADuuHAQ/original" }, { type: AssetType.Env, - url: 'https://gw.alipayobjects.com/os/bmw-prod/6470ea5e-094b-4a77-a05f-4945bf81e318.bin', - }, + url: "https://gw.alipayobjects.com/os/bmw-prod/6470ea5e-094b-4a77-a05f-4945bf81e318.bin" + } ]) .then((res) => { const layerTexture = res[0] as Texture2D; @@ -216,7 +215,7 @@ WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { scene.ambientLight = res[2] as AmbientLight; // create sphere - const entity = rootEntity.createChild('sphere'); + const entity = rootEntity.createChild("sphere"); const renderer = entity.addComponent(MeshRenderer); renderer.mesh = PrimitiveMesh.createSphere(engine, 0.5, 16); @@ -225,13 +224,13 @@ WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { const shaderData = material.shaderData; - shaderData.setTexture('u_mainTex', baseTexture); - shaderData.setTexture('u_layerTex', layerTexture); + shaderData.setTexture("u_mainTex", baseTexture); + shaderData.setTexture("u_layerTex", layerTexture); - shaderData.setFloat('u_furLength', 0.5); - shaderData.setVector4('u_uvTilingOffset', new Vector4(5, 5, 0.5, 0.5)); - shaderData.setVector3('u_gravity', new Vector3(0, 0, 0)); - shaderData.setFloat('u_gravityIntensity', 0); + shaderData.setFloat("u_furLength", 0.5); + shaderData.setVector4("u_uvTilingOffset", new Vector4(5, 5, 0.5, 0.5)); + shaderData.setVector3("u_gravity", new Vector3(0, 0, 0)); + shaderData.setFloat("u_gravityIntensity", 0); const randomGravityScript = entity.addComponent(RandomGravityScript); randomGravityScript.shaderData = shaderData; @@ -242,25 +241,25 @@ WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { uvOffset: 0.5, enable: () => { randomGravityScript.enabled = !randomGravityScript.enabled; - shaderData.setFloat('u_gravityIntensity', 0); + shaderData.setFloat("u_gravityIntensity", 0); randomGravityScript.progress = 0; - }, + } }; - gui.add(debugInfo, 'u_furLength', 0, 1, 0.01).onChange((v) => { - shaderData.setFloat('u_furLength', v); + gui.add(debugInfo, "u_furLength", 0, 1, 0.01).onChange((v) => { + shaderData.setFloat("u_furLength", v); }); - gui.add(debugInfo, 'uvScale', 1, 20, 1).onChange((v) => { - const value = shaderData.getVector4('u_uvTilingOffset'); + gui.add(debugInfo, "uvScale", 1, 20, 1).onChange((v) => { + const value = shaderData.getVector4("u_uvTilingOffset"); value.x = value.y = v; }); - gui.add(debugInfo, 'uvOffset', -1, 1, 0.01).onChange((v) => { - const value = shaderData.getVector4('u_uvTilingOffset'); + gui.add(debugInfo, "uvOffset", -1, 1, 0.01).onChange((v) => { + const value = shaderData.getVector4("u_uvTilingOffset"); value.z = value.w = v; }); - gui.add(scene.ambientLight, 'diffuseIntensity', 0, 1, 0.01); - gui.add(debugInfo, 'enable').name('pause/resume'); + gui.add(scene.ambientLight, "diffuseIntensity", 0, 1, 0.01); + gui.add(debugInfo, "enable").name("pause/resume"); engine.run(); }); }); diff --git a/packages/shader-lab/src/contentParser/ShaderContentParser.ts b/packages/shader-lab/src/contentParser/ShaderContentParser.ts index 3d4b4a03a7..800936a84a 100644 --- a/packages/shader-lab/src/contentParser/ShaderContentParser.ts +++ b/packages/shader-lab/src/contentParser/ShaderContentParser.ts @@ -389,6 +389,7 @@ export class ShaderContentParser { } private static _parsePass(scanner: Scanner): IShaderPassContent { + this._newScope(); const ret = { globalContents: [], renderStates: { constantMap: {}, variableMap: {} }, diff --git a/tests/src/shader-lab/shaders/multi-pass.shader b/tests/src/shader-lab/shaders/multi-pass.shader index 2e7314ee81..bfb68f50fd 100644 --- a/tests/src/shader-lab/shaders/multi-pass.shader +++ b/tests/src/shader-lab/shaders/multi-pass.shader @@ -2,6 +2,14 @@ Shader "Triangle" { SubShader "Default" { mat4 renderer_MVPMat; + BlendState transparentBlendState { + Enabled = true; + SourceColorBlendFactor = BlendFactor.SourceAlpha; + DestinationColorBlendFactor = BlendFactor.OneMinusSourceAlpha; + SourceAlphaBlendFactor = BlendFactor.One; + DestinationAlphaBlendFactor = BlendFactor.OneMinusSourceAlpha; + } + struct a2v { vec4 POSITION; vec2 TEXCOORD_0; @@ -52,6 +60,8 @@ Shader "Triangle" { Pass "0" { vec3 u_color; + BlendState = transparentBlendState; + struct a2v { vec4 POSITION; }; @@ -79,6 +89,8 @@ Shader "Triangle" { Pass "1" { vec3 u_color; + BlendState = transparentBlendState; + struct a2v { vec4 POSITION; };