Skip to content

Commit

Permalink
Fix scope loss when ShaderLab parse Pass (#2393)
Browse files Browse the repository at this point in the history 
* fix(shader-lab): scope loss when `ShaderLab` parse `Pass`
  • Loading branch information
@Sway007
Sway007 authored Oct 25, 2024
1 parent cb6f9d8 commit e8e8090
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 36 deletions.
71 changes: 35 additions & 36 deletions examples/shader-lab-multi-pass.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
`
: ``;

Expand Down Expand Up @@ -136,7 +136,7 @@ const loopPassSource = Array.from({ length: LAYER })
}
`;
})
.join('\n');
.join("\n");

const furShaderSource = `Shader "fur-unlit" {
SubShader "Default" {
Expand All @@ -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
Expand All @@ -176,21 +176,20 @@ 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);
const scene = engine.sceneManager.activeScene;
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);
Expand All @@ -199,24 +198,24 @@ 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;
const baseTexture = res[1] as Texture2D;
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);

Expand All @@ -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;
Expand All @@ -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();
});
});
1 change: 1 addition & 0 deletions packages/shader-lab/src/contentParser/ShaderContentParser.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -389,6 +389,7 @@ export class ShaderContentParser {
}

private static _parsePass(scanner: Scanner): IShaderPassContent {
this._newScope();
const ret = {
globalContents: [],
renderStates: { constantMap: {}, variableMap: {} },
Expand Down
12 changes: 12 additions & 0 deletions tests/src/shader-lab/shaders/multi-pass.shader
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -52,6 +60,8 @@ Shader "Triangle" {
Pass "0" {
vec3 u_color;

BlendState = transparentBlendState;

struct a2v {
vec4 POSITION;
};
Expand Down Expand Up @@ -79,6 +89,8 @@ Shader "Triangle" {
Pass "1" {
vec3 u_color;

BlendState = transparentBlendState;

struct a2v {
vec4 POSITION;
};
Expand Down

0 comments on commit e8e8090

Please sign in to comment.