refactor(rhi-webgl): rework canvas resolution API, follow display size by default

e2e/case/.initPostProcessEnv.ts

@@ -18,8 +18,6 @@ export async function initPostProcessEnv(
   shaderCompiler?: ShaderCompiler
 ) {
   WebGLEngine.create({ canvas: "canvas", shaderCompiler }).then((engine) => {
-    engine.canvas.resizeByClientSize();
-
     const scene = engine.sceneManager.activeScene;
     const rootEntity = scene.createRootEntity();
 

e2e/case/animator-additive.ts

@@ -20,7 +20,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 Logger.enable();
 
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/animator-blendShape-quantization.ts

@@ -19,7 +19,6 @@ WebGLEngine.create({
   canvas: "canvas",
   glTF: { meshOpt: { workerCount: 0 } }
 }).then(async (engine) => {
-  engine.canvas.resizeByClientSize();
   const scene = engine.sceneManager.activeScene;
   const rootNode = scene.createRootEntity();
   scene.ambientLight.diffuseSolidColor.set(1, 1, 1, 1);

e2e/case/animator-blendShape.ts

@@ -16,7 +16,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/animator-crossfade.ts

@@ -7,7 +7,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/animator-customAnimationClip.ts

@@ -26,7 +26,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/animator-customBlendShape.ts

@@ -23,7 +23,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/animator-event.ts

@@ -18,7 +18,7 @@ import {
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
   // camera

e2e/case/animator-multiSubMeshBlendShape.ts

@@ -8,7 +8,6 @@ import {
   DirectLight,
   Logger,
   SkinnedMeshRenderer,
-  SystemInfo,
   Vector3,
   WebGLEngine,
   GLTFResource,
@@ -23,8 +22,6 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.width = window.innerWidth * SystemInfo.devicePixelRatio;
-  engine.canvas.height = window.innerHeight * SystemInfo.devicePixelRatio;
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/animator-play-backwards.ts

@@ -7,7 +7,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/animator-play-beforeActive.ts

@@ -7,7 +7,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/animator-play.ts

@@ -7,7 +7,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/animator-reuse.ts

@@ -17,7 +17,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/animator-stateMachine.ts

@@ -10,16 +10,13 @@ import {
   Color,
   DirectLight,
   GLTFResource,
-  SystemInfo,
   TextRenderer,
   Vector3,
   WebGLEngine
 } from "@galacean/engine";
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.width = window.innerWidth * SystemInfo.devicePixelRatio;
-  engine.canvas.height = window.innerHeight * SystemInfo.devicePixelRatio;
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/animator-stateMachineScript.ts

@@ -20,7 +20,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/camera-fxaa.ts

@@ -17,7 +17,7 @@ initPostProcessEnv((camera: Camera) => {
   const postProcess = globalPostProcessEntity.addComponent(PostProcess);
 
   const bloomEffect = postProcess.addEffect(BloomEffect);
-  bloomEffect.threshold.value = 0.7874122893956174
+  bloomEffect.threshold.value = 0.7874122893956174;
   bloomEffect.intensity.value = 1;
 
   const tonemappingEffect = postProcess.addEffect(TonemappingEffect);

e2e/case/camera-opaque-texture.ts

@@ -111,7 +111,7 @@ WebGLEngine.create({ canvas: "canvas", shaderCompiler: new ShaderCompiler() }).t
       }
     }
   `);
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/camera-ssao.ts

@@ -30,7 +30,7 @@ WebGLEngine.create({
   shaderCompiler: new ShaderCompiler(),
   graphicDeviceOptions: { webGLMode: WebGLMode.WebGL1 }
 }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
 
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();

e2e/case/canvas-transparency.ts

@@ -28,7 +28,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas", graphicDeviceOptions: { alpha: false } }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
 
   engine.resourceManager
     .load([

e2e/case/gltf-blendshape.ts

@@ -10,7 +10,6 @@ import {
   DirectLight,
   Logger,
   SkinnedMeshRenderer,
-  SystemInfo,
   Vector3,
   WebGLEngine,
   GLTFResource
@@ -19,8 +18,6 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.width = window.innerWidth * SystemInfo.devicePixelRatio;
-  engine.canvas.height = window.innerHeight * SystemInfo.devicePixelRatio;
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/gltf-meshopt.ts

@@ -7,7 +7,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/gpu-instancing-auto-batch.ts

@@ -17,7 +17,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then(async (engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
 
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity("Root");

e2e/case/gpu-instancing-custom-data.ts

@@ -61,7 +61,7 @@ const customInstanceShaderSource = `Shader "CustomInstanceShader" {
 
 WebGLEngine.create({ canvas: "canvas", shaderCompiler }).then((engine) => {
   Shader.create(customInstanceShaderSource);
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
 
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity("Root");

e2e/case/material-LUT.ts

@@ -43,7 +43,7 @@ const shaderSource = `Shader "LUT-test" {
 // Create engine
 WebGLEngine.create({ canvas: "canvas", shaderCompiler })
   .then((engine) => {
-    engine.canvas.resizeByClientSize(2);
+    engine.canvas.setAutoResolution(2);
 
     const scene = engine.sceneManager.activeScene;
     const rootEntity = scene.createRootEntity();

e2e/case/material-blendMode.ts

@@ -7,8 +7,6 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 // Create engine
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/material-blinn-phong.ts

@@ -18,8 +18,6 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 // Create engine
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/material-pbr-clearcoat.ts

@@ -18,8 +18,6 @@ Logger.enable();
 
 // Create engine
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   const scene = engine.sceneManager.activeScene;
   const { background } = scene;
   const rootEntity = scene.createRootEntity();

e2e/case/material-pbr-specular.ts

@@ -21,8 +21,6 @@ Logger.enable();
 
 // Create engine
 WebGLEngine.create({ canvas: "canvas", shaderCompiler: new ShaderCompiler() }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/material-pbr.ts

@@ -16,8 +16,6 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 // Create engine
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/material-shader.ts

@@ -67,8 +67,6 @@ function createPlaneMesh(engine: WebGLEngine) {
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas", shaderCompiler }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   const shaderMap = {
     normal: Shader.create(normalShaderSource)
   };

e2e/case/material-shaderReplacement.ts

@@ -24,7 +24,6 @@ async function main() {
 
   // Create engine
   const engine = await WebGLEngine.create({ canvas: "canvas", shaderCompiler: new ShaderCompiler() });
-  engine.canvas.resizeByClientSize();
 
   initShader();
 

e2e/case/material-unlit.ts

@@ -8,7 +8,7 @@ Logger.enable();
 
 // Create engine
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize(2);
+  engine.canvas.setAutoResolution(2);
 
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();

e2e/case/material-white-furnace.ts

@@ -20,8 +20,6 @@ import {
 import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
 

e2e/case/multi-camera-no-clear.ts

@@ -29,8 +29,6 @@ WebGLEngine.create({
     antialias: false
   }
 }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   initFirstScene(engine);
   engine.run();
 });

e2e/case/multi-scene-clear.ts

@@ -20,8 +20,6 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   const firstCamera = initFirstScene(engine);
   const secondCamera = initSecondScene(engine);
 

e2e/case/multi-scene-no-clear.ts

@@ -27,8 +27,6 @@ WebGLEngine.create({
     webGLMode: WebGLMode.WebGL2
   }
 }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   const firstCamera = initFirstScene(engine);
   const secondCamera = initSecondScene(engine);
 

e2e/case/particleRenderer-burst-cycles.ts

@@ -25,8 +25,6 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E";
 WebGLEngine.create({
   canvas: "canvas"
 }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
   scene.background.solidColor = new Color(0, 0, 0, 1);

e2e/case/particleRenderer-customShader.ts

@@ -85,8 +85,6 @@ const customParticleShaderSource = `Shader "Test/ParticleCustom" {
 
 Logger.enable();
 WebGLEngine.create({ canvas: "canvas", shaderCompiler }).then((engine) => {
-  engine.canvas.resizeByClientSize();
-
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();
   scene.background.solidColor = new Color(0.05, 0.05, 0.05, 1);

e2e/case/particleRenderer-dream.ts

@@ -27,7 +27,6 @@ WebGLEngine.create({
   canvas: "canvas"
 }).then((engine) => {
   Logger.enable();
-  engine.canvas.resizeByClientSize();
 
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();

e2e/case/particleRenderer-emissive.ts

@@ -29,7 +29,6 @@ WebGLEngine.create({
   graphicDeviceOptions: { webGLMode: WebGLMode.Auto }
 }).then((engine) => {
   Logger.enable();
-  engine.canvas.resizeByClientSize();
 
   const scene = engine.sceneManager.activeScene;
   const rootEntity = scene.createRootEntity();