diff --git a/e2e/case/material-shaderLab.ts b/e2e/case/material-shaderLab.ts index 63557513e3..67de7df859 100644 --- a/e2e/case/material-shaderLab.ts +++ b/e2e/case/material-shaderLab.ts @@ -18,7 +18,7 @@ import { VertexElementFormat, WebGLEngine } from "@galacean/engine"; -import { ShaderLab } from "@galacean/engine-shader-lab"; +import { ShaderLab } from "@galacean/engine-shaderlab"; import { initScreenshot, updateForE2E } from "./.mockForE2E"; const shaderLab = new ShaderLab(); diff --git a/e2e/case/project-loader.ts b/e2e/case/project-loader.ts index bd61cb1d02..59e983264c 100644 --- a/e2e/case/project-loader.ts +++ b/e2e/case/project-loader.ts @@ -3,27 +3,27 @@ * @category Advance */ import { Logger, WebGLEngine, AssetType, Camera } from "@galacean/engine"; -import { ShaderLab } from "@galacean/engine-shader-lab"; +import { ShaderLab } from "@galacean/engine-shaderlab"; import { registerIncludes } from "@galacean/engine-toolkit"; -import { initScreenshot, updateForE2E } from './.mockForE2E'; +import { initScreenshot, updateForE2E } from "./.mockForE2E"; // Create ShaderLab const shaderLab = new ShaderLab(); registerIncludes(); Logger.enable(); -WebGLEngine.create({ canvas: "canvas", shaderLab }).then( (engine) => { +WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => { engine.canvas.resizeByClientSize(2); engine.resourceManager .load({ type: AssetType.Project, url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*o15SSopTBh0AAAAAAAAAAAAADkp5AQ/project.json" - }).then(() => { + }) + .then(() => { updateForE2E(engine); - const cameraEntity = - engine.sceneManager.activeScene.findEntityByName('Camera'); - const camera = cameraEntity.getComponent(Camera) - initScreenshot(engine, camera) - }) + const cameraEntity = engine.sceneManager.activeScene.findEntityByName("Camera"); + const camera = cameraEntity.getComponent(Camera); + initScreenshot(engine, camera); + }); }); diff --git a/e2e/case/shaderLab-mrt.ts b/e2e/case/shaderLab-mrt.ts index c46e78b133..f855464183 100644 --- a/e2e/case/shaderLab-mrt.ts +++ b/e2e/case/shaderLab-mrt.ts @@ -4,7 +4,7 @@ */ import { Camera, Color, Logger, Material, MeshRenderer, PrimitiveMesh, Shader, WebGLEngine } from "@galacean/engine"; -import { ShaderLab } from "@galacean/engine-shader-lab"; +import { ShaderLab } from "@galacean/engine-shaderlab"; import { initScreenshot, updateForE2E } from "./.mockForE2E"; const shaderLab = new ShaderLab(); diff --git a/e2e/case/shaderLab-renderState.ts b/e2e/case/shaderLab-renderState.ts index 007ea3d354..6182330d00 100644 --- a/e2e/case/shaderLab-renderState.ts +++ b/e2e/case/shaderLab-renderState.ts @@ -16,7 +16,7 @@ import { Shader, WebGLEngine } from "@galacean/engine"; -import { ShaderLab } from "@galacean/engine-shader-lab"; +import { ShaderLab } from "@galacean/engine-shaderlab"; import { initScreenshot, updateForE2E } from "./.mockForE2E"; const shaderLab = new ShaderLab(); diff --git a/examples/buffer-mesh-particle-shader-effect.ts b/examples/buffer-mesh-particle-shader-effect.ts index 326526b541..e6f517ad2f 100644 --- a/examples/buffer-mesh-particle-shader-effect.ts +++ b/examples/buffer-mesh-particle-shader-effect.ts @@ -18,10 +18,10 @@ import { Shader, BaseMaterial, Script, - WebGLEngine, -} from '@galacean/engine'; -import { OrbitControl } from '@galacean/engine-toolkit-controls'; -import { ShaderLab } from '@galacean/engine-shader-lab'; + WebGLEngine +} from "@galacean/engine"; +import { OrbitControl } from "@galacean/engine-toolkit-controls"; +import { ShaderLab } from "@galacean/engine-shaderlab"; const shaderLab = new ShaderLab(); @@ -97,27 +97,27 @@ class ParticleMeshMaterial extends BaseMaterial { } get texture1(): Texture2D { - return this.shaderData.getTexture('texture1'); + return this.shaderData.getTexture("texture1"); } set texture1(value: Texture2D) { - this.shaderData.setTexture('texture1', value); + this.shaderData.setTexture("texture1", value); } get texture2(): Texture2D { - return this.shaderData.getTexture('texture2'); + return this.shaderData.getTexture("texture2"); } set texture2(value: Texture2D) { - this.shaderData.setTexture('texture2', value); + this.shaderData.setTexture("texture2", value); } get progress(): number { - return this.shaderData.getFloat('progress'); + return this.shaderData.getFloat("progress"); } set progress(value: number) { - this.shaderData.setFloat('progress', value); + this.shaderData.setFloat("progress", value); } } @@ -125,9 +125,7 @@ class AnimationComponent extends Script { time = 0; mtl: ParticleMeshMaterial | undefined; onAwake() { - this.mtl = this.entity - .getComponent(MeshRenderer)! - .getMaterial() as ParticleMeshMaterial; + this.mtl = this.entity.getComponent(MeshRenderer)!.getMaterial() as ParticleMeshMaterial; } onUpdate(time: number) { this.time += time; @@ -232,38 +230,38 @@ function createPlaneParticleMesh( new VertexBufferBinding( new Buffer(engine, BufferBindFlag.VertexBuffer, indexBuffer), 3 * Float32Array.BYTES_PER_ELEMENT - ), + ) ]); mesh.setVertexElements([ - new VertexElement('POSITION', 0, VertexElementFormat.Vector3, 0), - new VertexElement('UV', 0, VertexElementFormat.Vector2, 1), - new VertexElement('INDEX', 0, VertexElementFormat.Vector3, 2), + new VertexElement("POSITION", 0, VertexElementFormat.Vector3, 0), + new VertexElement("UV", 0, VertexElementFormat.Vector2, 1), + new VertexElement("INDEX", 0, VertexElementFormat.Vector3, 2) ]); mesh.addSubMesh(0, vertexCount); return mesh; } -WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { +WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => { engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); const particleMeshShader = Shader.create(shaderSource); - const cameraEntity = rootEntity.createChild('camera'); + const cameraEntity = rootEntity.createChild("camera"); cameraEntity.addComponent(Camera); cameraEntity.transform.position.set(0, 0, 50); cameraEntity.addComponent(OrbitControl); engine.resourceManager .load([ - 'https://gw.alipayobjects.com/zos/OasisHub/440001901/3736/spring.jpeg', - 'https://gw.alipayobjects.com/zos/OasisHub/440001901/9546/winter.jpeg', + "https://gw.alipayobjects.com/zos/OasisHub/440001901/3736/spring.jpeg", + "https://gw.alipayobjects.com/zos/OasisHub/440001901/9546/winter.jpeg" ]) .then((assets) => { - const entity = rootEntity.createChild('plane'); + const entity = rootEntity.createChild("plane"); const renderer = entity.addComponent(MeshRenderer); const mesh = createPlaneParticleMesh(engine, 20, 20, 80, 80, true); const mtl = new ParticleMeshMaterial(engine, particleMeshShader); diff --git a/examples/shader-lab-multi-pass.ts b/examples/shader-lab-multi-pass.ts index e461d947eb..0a6bf33207 100644 --- a/examples/shader-lab-multi-pass.ts +++ b/examples/shader-lab-multi-pass.ts @@ -20,7 +20,7 @@ import { Vector4, WebGLEngine } from "@galacean/engine"; -import { ShaderLab } from "@galacean/engine-shader-lab"; +import { ShaderLab } from "@galacean/engine-shaderlab"; import { OrbitControl } from "@galacean/engine-toolkit-controls"; import * as dat from "dat.gui"; diff --git a/examples/shader-lab-simple.ts b/examples/shader-lab-simple.ts index 29bd452cb8..de2fde6da3 100644 --- a/examples/shader-lab-simple.ts +++ b/examples/shader-lab-simple.ts @@ -4,8 +4,8 @@ * @thumbnail https://mdn.alipayobjects.com/merchant_appfe/afts/img/A*C7Y1RaI_ZJEAAAAAAAAAAAAADiR2AQ/original */ -import { GUI } from 'dat.gui'; -import { OrbitControl } from '@galacean/engine-toolkit-controls'; +import { GUI } from "dat.gui"; +import { OrbitControl } from "@galacean/engine-toolkit-controls"; import { BufferMesh, Camera, @@ -19,9 +19,9 @@ import { MeshRenderer, Shader, Material, - Color, -} from '@galacean/engine'; -import { ShaderLab } from '@galacean/engine-shader-lab'; + Color +} from "@galacean/engine"; +import { ShaderLab } from "@galacean/engine-shaderlab"; const shaderLab = new ShaderLab(); @@ -108,59 +108,50 @@ Shader "Lines" { function createPlaneMesh(engine: WebGLEngine) { const mesh = new BufferMesh(engine); - const vertices = new Float32Array([ - -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, - ]); - const vertexBuffer = new Buffer( - engine, - BufferBindFlag.VertexBuffer, - vertices, - BufferUsage.Static - ); + const vertices = new Float32Array([-1, -1, 1, 1, -1, 1, 1, 1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1]); + const vertexBuffer = new Buffer(engine, BufferBindFlag.VertexBuffer, vertices, BufferUsage.Static); mesh.setVertexBufferBinding(vertexBuffer, 12); - mesh.setVertexElements([ - new VertexElement('POSITION', 0, VertexElementFormat.Vector3, 0), - ]); + mesh.setVertexElements([new VertexElement("POSITION", 0, VertexElementFormat.Vector3, 0)]); mesh.addSubMesh(0, 6); return mesh; } Logger.enable(); -WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { +WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => { engine.canvas.resizeByClientSize(); const shaderMap = { normal: Shader.create(normalShaderSource), - lines: Shader.create(linesShaderSource), + lines: Shader.create(linesShaderSource) }; 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); // create plane - const triangle = rootEntity.createChild('plane'); + const triangle = rootEntity.createChild("plane"); const renderer = triangle.addComponent(MeshRenderer); renderer.mesh = createPlaneMesh(engine); const shader = shaderMap.lines; const material = new Material(engine, shader); - material.shaderData.setColor('u_color', new Color(1.0, 1.0, 0)); + material.shaderData.setColor("u_color", new Color(1.0, 1.0, 0)); renderer.setMaterial(material); engine.run(); const state = { - shader: 'lines', + shader: "lines" }; function addGUI() { - const gui = new GUI({ name: 'Switch Shader' }); - gui.add(state, 'shader', Object.keys(shaderMap)).onChange((v) => { + const gui = new GUI({ name: "Switch Shader" }); + gui.add(state, "shader", Object.keys(shaderMap)).onChange((v) => { material.shader = shaderMap[v]; }); } diff --git a/examples/shader-lab.ts b/examples/shader-lab.ts index 8b62dcf7a1..ce9dadd708 100644 --- a/examples/shader-lab.ts +++ b/examples/shader-lab.ts @@ -18,32 +18,32 @@ import { AmbientLight, AssetType, SkyBoxMaterial, - BackgroundMode, -} from '@galacean/engine'; -import { OrbitControl } from '@galacean/engine-toolkit-controls'; -import { ShaderLab } from '@galacean/engine-shader-lab'; + BackgroundMode +} from "@galacean/engine"; +import { OrbitControl } from "@galacean/engine-toolkit-controls"; +import { ShaderLab } from "@galacean/engine-shaderlab"; // Create ShaderLab const shaderLab = new ShaderLab(); Logger.enable(); -WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { +WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => { engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const { background } = scene; const rootEntity = scene.createRootEntity(); - const cameraEntity = rootEntity.createChild('camera_node'); + const cameraEntity = rootEntity.createChild("camera_node"); cameraEntity.transform.setPosition(5, 5, 10); cameraEntity.addComponent(Camera); cameraEntity.addComponent(OrbitControl).target = new Vector3(0, 1, 0); - const lightEntity = rootEntity.createChild('light_node'); + const lightEntity = rootEntity.createChild("light_node"); lightEntity.addComponent(DirectLight); lightEntity.transform.setPosition(-10, 10, 10); lightEntity.transform.lookAt(new Vector3(0, 0, 0)); - const planeEntity = rootEntity.createChild('plane_node'); + const planeEntity = rootEntity.createChild("plane_node"); const renderer = planeEntity.addComponent(MeshRenderer); renderer.mesh = PrimitiveMesh.createPlane(engine, 10, 10); const planeMaterial = new BlinnPhongMaterial(engine); @@ -60,9 +60,7 @@ WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { Promise.all([ engine.resourceManager - .load( - 'https://gw.alipayobjects.com/os/bmw-prod/150e44f6-7810-4c45-8029-3575d36aff30.gltf' - ) + .load("https://gw.alipayobjects.com/os/bmw-prod/150e44f6-7810-4c45-8029-3575d36aff30.gltf") .then((asset) => { const { defaultSceneRoot } = asset; rootEntity.addChild(defaultSceneRoot); @@ -74,7 +72,7 @@ WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { const renderers = new Array(); defaultSceneRoot.getComponentsIncludeChildren(MeshRenderer, renderers); - const shadowShader = Shader.find('PlanarShadow'); + const shadowShader = Shader.find("PlanarShadow"); for (let i = 0, n = renderers.length; i < n; i++) { const material = renderers[i].getMaterial(); @@ -82,22 +80,22 @@ WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { material.shader = shadowShader; const shaderData = material.shaderData; - shaderData.setFloat('u_planarShadowFalloff', 0.2); - shaderData.setFloat('u_planarHeight', 0.01); - shaderData.setColor('u_planarShadowColor', new Color(0, 0, 0, 1)); - shaderData.setVector3('u_lightDir', lightDirection); + shaderData.setFloat("u_planarShadowFalloff", 0.2); + shaderData.setFloat("u_planarHeight", 0.01); + shaderData.setColor("u_planarShadowColor", new Color(0, 0, 0, 1)); + shaderData.setVector3("u_lightDir", lightDirection); } }), engine.resourceManager .load({ type: AssetType.Env, - url: 'https://gw.alipayobjects.com/os/bmw-prod/f369110c-0e33-47eb-8296-756e9c80f254.bin', + url: "https://gw.alipayobjects.com/os/bmw-prod/f369110c-0e33-47eb-8296-756e9c80f254.bin" }) .then((ambientLight) => { scene.ambientLight = ambientLight; skyMaterial.texture = ambientLight.specularTexture; skyMaterial.textureDecodeRGBM = true; - }), + }) ]); engine.run(); diff --git a/examples/shader-water.ts b/examples/shader-water.ts index 46889cb472..5764bc264c 100644 --- a/examples/shader-water.ts +++ b/examples/shader-water.ts @@ -3,8 +3,8 @@ * @category Material * @thumbnail https://mdn.alipayobjects.com/merchant_appfe/afts/img/A*eGEwSZhJsoYAAAAAAAAAAAAADiR2AQ/original */ -import { OrbitControl } from '@galacean/engine-toolkit-controls'; -import * as dat from 'dat.gui'; +import { OrbitControl } from "@galacean/engine-toolkit-controls"; +import * as dat from "dat.gui"; import { AssetType, Camera, @@ -17,9 +17,9 @@ import { Texture2D, Vector3, WebGLEngine, - Logger, -} from '@galacean/engine'; -import { ShaderLab } from '@galacean/engine-shader-lab'; + Logger +} from "@galacean/engine"; +import { ShaderLab } from "@galacean/engine-shaderlab"; const shaderLab = new ShaderLab(); Logger.enable(); @@ -176,14 +176,14 @@ const shaderSource = `Shader "customWater" { const gui = new dat.GUI(); // create engine -WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { +WebGLEngine.create({ canvas: "canvas", shaderLab }).then((engine) => { engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); // create camera - const cameraEntity = rootEntity.createChild('camera_entity'); + const cameraEntity = rootEntity.createChild("camera_entity"); cameraEntity.transform.position = new Vector3(0, 0, 15); cameraEntity.addComponent(Camera); const orbitControl = cameraEntity.addComponent(OrbitControl); @@ -195,19 +195,19 @@ WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { class ShaderMaterial extends Material { constructor(engine: Engine) { - super(engine, Shader.find('customWater')); + super(engine, Shader.find("customWater")); - this.shaderData.setFloat('u_sea_height', 0.6); - this.shaderData.setFloat('u_water_scale', 0.2); - this.shaderData.setFloat('u_water_speed', 3.5); - this.shaderData.setColor('u_sea_base', new Color(0.1, 0.2, 0.22)); - this.shaderData.setColor('u_water_color', new Color(0.8, 0.9, 0.6)); + this.shaderData.setFloat("u_sea_height", 0.6); + this.shaderData.setFloat("u_water_scale", 0.2); + this.shaderData.setFloat("u_water_speed", 3.5); + this.shaderData.setColor("u_sea_base", new Color(0.1, 0.2, 0.22)); + this.shaderData.setColor("u_water_color", new Color(0.8, 0.9, 0.6)); } } const material = new ShaderMaterial(engine); // 创建球体形的海面 - const sphereEntity = rootEntity.createChild('sphere'); + const sphereEntity = rootEntity.createChild("sphere"); const renderer = sphereEntity.addComponent(MeshRenderer); renderer.mesh = PrimitiveMesh.createSphere(engine, 3, 50); renderer.setMaterial(material); @@ -216,41 +216,41 @@ WebGLEngine.create({ canvas: 'canvas', shaderLab }).then((engine) => { engine.resourceManager .load({ type: AssetType.Texture2D, - url: 'https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*AC4IQZ6mfCIAAAAAAAAAAAAAARQnAQ', + url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*AC4IQZ6mfCIAAAAAAAAAAAAAARQnAQ" }) .then((texture: Texture2D) => { - material.shaderData.setTexture('u_texture', texture); + material.shaderData.setTexture("u_texture", texture); engine.run(); }); // debug function openDebug() { const shaderData = material.shaderData; - const baseColor = shaderData.getColor('u_sea_base'); - const waterColor = shaderData.getColor('u_water_color'); + const baseColor = shaderData.getColor("u_sea_base"); + const waterColor = shaderData.getColor("u_water_color"); const debug = { - sea_height: shaderData.getFloat('u_sea_height'), - water_scale: shaderData.getFloat('u_water_scale'), - water_speed: shaderData.getFloat('u_water_speed'), + sea_height: shaderData.getFloat("u_sea_height"), + water_scale: shaderData.getFloat("u_water_scale"), + water_speed: shaderData.getFloat("u_water_speed"), sea_base: [baseColor.r * 255, baseColor.g * 255, baseColor.b * 255], - water_color: [waterColor.r * 255, waterColor.g * 255, waterColor.b * 255], + water_color: [waterColor.r * 255, waterColor.g * 255, waterColor.b * 255] }; - gui.add(debug, 'sea_height', 0, 3).onChange((v) => { - shaderData.setFloat('u_sea_height', v); + gui.add(debug, "sea_height", 0, 3).onChange((v) => { + shaderData.setFloat("u_sea_height", v); }); - gui.add(debug, 'water_scale', 0, 4).onChange((v) => { - shaderData.setFloat('u_water_scale', v); + gui.add(debug, "water_scale", 0, 4).onChange((v) => { + shaderData.setFloat("u_water_scale", v); }); - gui.add(debug, 'water_speed', 0, 4).onChange((v) => { - shaderData.setFloat('u_water_speed', v); + gui.add(debug, "water_speed", 0, 4).onChange((v) => { + shaderData.setFloat("u_water_speed", v); }); - gui.addColor(debug, 'sea_base').onChange((v) => { + gui.addColor(debug, "sea_base").onChange((v) => { baseColor.r = v[0] / 255; baseColor.g = v[1] / 255; baseColor.b = v[2] / 255; }); - gui.addColor(debug, 'water_color').onChange((v) => { + gui.addColor(debug, "water_color").onChange((v) => { waterColor.r = v[0] / 255; waterColor.g = v[1] / 255; waterColor.b = v[2] / 255;