diff --git a/README.md b/README.md index 9cacb86b1c..0013443a68 100644 --- a/README.md +++ b/README.md @@ -40,9 +40,8 @@ Create a simple scene: ```typescript import { BlinnPhongMaterial, Camera, DirectLight, MeshRenderer, WebGLEngine, PrimitiveMesh } from "@galacean/engine"; -// Create engine by passing in the HTMLCanvasElement id and adjust canvas size +// Create engine by passing in the HTMLCanvasElement id (canvas auto-resizes by default) const engine = await WebGLEngine.create({ canvas: "canvas-id" }); -engine.canvas.resizeByClientSize(); // Get scene and create root entity const scene = engine.sceneManager.activeScene; diff --git a/docs/en/core/canvas.mdx b/docs/en/core/canvas.mdx index b8d9dcf669..84c043cbba 100644 --- a/docs/en/core/canvas.mdx +++ b/docs/en/core/canvas.mdx @@ -27,85 +27,94 @@ const engine = await WebGLEngine.create({ canvas: "canvas" }); console.log(engine.canvas); // => WebCanvas instance ``` -### Basic Adaptation +### Auto Resolution (Default) -Canvas size is generally controlled by the **device pixel ratio**. Taking [WebCanvas](/apis/rhi-webgl/#WebCanvas) as an example: +By default, the canvas render buffer automatically follows the display size, accounting for the device pixel ratio: -```mermaid -flowchart TD - A[HtmlCanvas.clientWidth] -->|pixelRatio| B[WebCanvas.width] - C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height] +```typescript +// Canvas auto-resizes out of the box +const engine = await WebGLEngine.create({ canvas: "canvas" }); ``` -Call `resizeByClientSize` to adapt the canvas: +When the display size of the canvas changes (e.g., when the browser window changes), the render buffer resizes automatically so the image stays sharp. In most cases, the default behavior meets adaptation needs. If you have more complex requirements, read the "Advanced Usage" section. + +### Auto Resolution with Custom Scale + +Use `setAutoResolution(scale)` to control how the device pixel ratio is applied. The `scale` parameter defaults to `1` (native sharpness): ```typescript -// Adjust canvas size using the device pixel ratio (window.devicePixelRatio) -engine.canvas.resizeByClientSize(); -// Adjust canvas size using a custom pixel ratio -engine.canvas.resizeByClientSize(1.5); +// Native sharpness (1x device pixel ratio) +engine.canvas.setAutoResolution(); + +// Save GPU load — render at 70% of native resolution +engine.canvas.setAutoResolution(0.7); + +// Supersample — render at 2x native resolution +engine.canvas.setAutoResolution(2); ``` -When the display size of the canvas changes (e.g., when the browser window changes), the image may appear stretched or compressed. You can restore it to normal by calling `resizeByClientSize`. In most cases, this line of code can meet the adaptation requirements. If you have more complex adaptation needs, please read the "Advanced Usage" section. +Calling `setAutoResolution` switches the canvas back to auto-resize mode, overriding a previous `setResolution` call. + +### Explicit Resolution Control + +If you need manual control over the render buffer size, use `setResolution`: + +```typescript +// Lock the render buffer to a fixed resolution, independent of display size +engine.canvas.setResolution(1920, 1080); +``` + +Once `setResolution` is called, the canvas stops following display size changes and stays at the specified resolution until `setAutoResolution` is called again. The `width` and `height` properties are read-only and reflect the current render buffer resolution. ## Advanced Usage Regarding adaptation, the key point is the **device pixel ratio**. Taking iPhone X as an example, the device pixel ratio `window.devicePixelRatio` is _3_, the window width `window.innerWidth` is _375_, and the physical screen pixel width is: 375 * 3 = *1125*. -Rendering pressure is proportional to the physical pixel width and height of the screen. The larger the physical pixel, the greater the rendering pressure and the more power it consumes. It is recommended to set the canvas width and height through APIs exposed by [WebCanvas](/apis/rhi-webgl/WebCanvas), rather than using native canvas APIs such as `canvas.width` or `canvas.style.width`. +Rendering pressure is proportional to the physical pixel width and height of the screen. The larger the physical pixel, the greater the rendering pressure and the more power it consumes. It is recommended to set the canvas resolution through APIs exposed by [WebCanvas](/apis/rhi-webgl/WebCanvas), rather than using native canvas APIs such as `canvas.width` or `canvas.style.width`. -> ⚠️ **Note**: Some front-end scaffolds may insert the following tag to modify the page's zoom ratio: +> **Note**: Some front-end scaffolds may insert the following tag to modify the page's zoom ratio: > > `` > > This line of code changes the value of `window.innerWidth` from 375 to 1125. -Apart from `resizeByClientSize`, which automatically adapts, the following two modes are recommended: +### How Auto-Resolution Works -### Energy-Saving Mode +```mermaid +flowchart TD + A[ResizeObserver] -->|monitors| B[Canvas Element] + B -->|devicePixelContentBoxSize| C[Device Pixels] + B -->|fallback: clientWidth × devicePixelRatio| C + C -->|× scale| D[Render Buffer Size] +``` -Considering that mobile devices, despite having high-definition screens (high device pixel ratio), may not have graphics card performance that meets the performance requirements for HD real-time rendering (the rendering area ratio of 3x screen to 2x screen is 9:4, and 3x screens can easily cause phones to overheat), the engine achieves adaptation by scaling the canvas in this mode. The code is as follows: +The engine uses a `ResizeObserver` to monitor the canvas element. On each resize, the observer captures the canvas's device-pixel dimensions, then the engine computes the render buffer size from one of two sources: -```typescript -const canvas = document.getElementById("canvas"); -const webcanvas = new WebCanvas(canvas); -const pixelRatio = window.devicePixelRatio; // If meta scale is set, please set to 1 -const scale = 3 / 2; // Calculate canvas size for 3x HD screen as if it were 2x - -/** - * Set energy-saving mode, defaults to full screen, but you can set any width and height - */ -webcanvas.width = (window.innerWidth * pixelRatio) / scale; -webcanvas.height = (window.innerHeight * pixelRatio) / scale; -webcanvas.setScale(scale, scale); // Scale canvas -``` +- **`devicePixelContentBoxSize` (Chrome/Edge/Firefox)**: Already represents exact device pixels, so only `scale` is applied +- **`clientWidth × devicePixelRatio` (Safari fallback)**: CSS pixels are multiplied by the device pixel ratio, then by `scale` -If the canvas width and height have been set via CSS (e.g., `width: 100vw; height: 100vh;`), you can scale the canvas by passing parameters to `resizeByClientSize`: +The resize is deferred to the next frame (`engine.update()`) to prevent tearing. -```typescript -const canvas = document.getElementById("canvas"); -const webcanvas = new WebCanvas(canvas); -const scale = 2 / 3; // Calculate canvas size for 3x HD screen as if it were 2x +### Energy-Saving Mode -webcanvas.resizeByClientSize(scale); // Scale canvas +Considering that mobile devices, despite having high-definition screens (high device pixel ratio), may not have graphics card performance that meets the performance requirements for HD real-time rendering (the rendering area ratio of 3x screen to 2x screen is 9:4, and 3x screens can easily cause phones to overheat), use a scale factor below `1` to reduce GPU load: + +```typescript +engine.canvas.setAutoResolution(2 / 3); ``` ### Fixed Width Mode -In certain situations, such as when a design draft has a fixed width of 750, developers might hard-code the canvas width to reduce adaptation costs. The code is as follows: +In certain situations, such as when a design draft has a fixed width of 750, developers might hard-code the canvas width to reduce adaptation costs: ```typescript import { WebCanvas } from "@galacean/engine"; -const canvas = document.getElementById("canvas"); -const webcanvas = new WebCanvas(canvas); -const fixedWidth = 750; // Fixed width of 750 +const canvas = document.getElementById("canvas") as HTMLCanvasElement; +const webCanvas = new WebCanvas(canvas); +const fixedWidth = 750; -/** - * Set fixed width mode - */ const scale = window.innerWidth / fixedWidth; -webcanvas.width = fixedWidth; -webcanvas.height = window.innerHeight / scale; -webcanvas.setScale(scale, scale); // Scale canvas -``` \ No newline at end of file +webCanvas.setResolution(fixedWidth, Math.round(window.innerHeight / scale)); +webCanvas.setScale(scale, scale); +``` diff --git a/docs/en/physics/query/raycast.mdx b/docs/en/physics/query/raycast.mdx index afde660da1..bac64d38b8 100644 --- a/docs/en/physics/query/raycast.mdx +++ b/docs/en/physics/query/raycast.mdx @@ -64,7 +64,6 @@ const engine = await WebGLEngine.create({ canvas: "canvas", physics: new PhysXPhysics() }); -engine.canvas.resizeByClientSize(); const scene = engine.scenes[0]; // Create a ray from origin pointing downward diff --git a/docs/en/platform/platform.mdx b/docs/en/platform/platform.mdx index 3ba21f63ad..11494e19a8 100644 --- a/docs/en/platform/platform.mdx +++ b/docs/en/platform/platform.mdx @@ -40,7 +40,7 @@ The platform-related export configuration will be described separately in the pl | WebGL Mode | Select the version to use with WebGL:
**Auto：** WebGL2.0 is preferred. If the operating environment does not support it, it will automatically switch to WebGL1.0
**WebGL1.0：** Using WebGL1.0
**WebGL2.0：** Using WebGL2.0 | | Alpha | Whether the canvas supports transparent background. If you want the content below the canvas to be visible, you can turn it on. | | Preserve Drawing Buffer | Controls whether the drawing buffer retains its contents after calling the gl.clear() method. | -| DPR Mode | [The pixel ratio of the device](/en/docs/core/canvas)，Control the size of the canvas by calling engine.canvas.resizeByClientSize:
**Auto：** Automatic adaptation, that is, the parameter is window.devicePixelRatio
**Fixed：** Developers set their own parameters After selecting Fixed, developers can enter the parameters they need to set. | +| DPR Mode | [Device pixel ratio](/en/docs/core/canvas)，Control the canvas resolution via `engine.canvas.setAutoResolution`:
**Auto：** Automatically follow the display size with devicePixelRatio
**Fixed：** Developer sets a custom scale parameter After selecting Fixed, developers can enter the scale value. | ## Supported export platforms Currently, Galacean supports exporting to the following platforms: diff --git a/docs/zh/core/canvas.mdx b/docs/zh/core/canvas.mdx index c749fdaf04..665f8c990e 100644 --- a/docs/zh/core/canvas.mdx +++ b/docs/zh/core/canvas.mdx @@ -27,85 +27,94 @@ const engine = await WebGLEngine.create({ canvas: "canvas" }); console.log(engine.canvas); // => WebCanvas 实例 ``` -### 基础适配 +### 自动分辨率（默认） -画布尺寸一般通过**设备像素比**控制，以 [WebCanvas](/apis/rhi-webgl/#WebCanvas) 为例： +默认情况下，画布会自动跟随显示尺寸调整渲染缓冲区，并适配设备像素比，无需手动干预： -```mermaid -flowchart TD - A[HtmlCanvas.clientWidth] -->|pixelRatio| B[WebCanvas.width] - C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height] +```typescript +// 画布自动适配尺寸，开箱即用 +const engine = await WebGLEngine.create({ canvas: "canvas" }); +``` + +当画布的显示尺寸发生变化时（比如浏览器窗口发生变化），画布会自动调整渲染缓冲区大小，画面始终保持清晰。一般情况下默认行为已经可以满足适配需求，如果你有更复杂的适配需求，请阅读"高级使用"部分。 + +### 自定义缩放比例 + +使用 `setAutoResolution(scale)` 控制设备像素比的缩放倍率。`scale` 参数默认为 `1`（原生清晰度）： + +```typescript +// 原生清晰度（1x 设备像素比） +engine.canvas.setAutoResolution(); + +// 降低 GPU 负载 — 以原生 70% 分辨率渲染 +engine.canvas.setAutoResolution(0.7); + +// 超采样 — 以原生 2x 分辨率渲染 +engine.canvas.setAutoResolution(2); ``` -调用 `resizeByClientSize` 适配画布： +调用 `setAutoResolution` 会将画布切回自动适配模式，覆盖之前 `setResolution` 的设置。 + +### 手动控制分辨率 + +如果需要对渲染缓冲区大小进行精确控制，可使用 `setResolution`： ```typescript -// 使用设备像素比（ window.devicePixelRatio ）调整画布尺寸， -engine.canvas.resizeByClientSize(); -// 自定义像素比调整画布尺寸 -engine.canvas.resizeByClientSize(1.5); +// 将渲染缓冲区锁定为固定分辨率，不再跟随显示尺寸变化 +engine.canvas.setResolution(1920, 1080); ``` -当画布的显示尺寸发生变化时（比如浏览器窗口发生变化时），画面可能出现拉伸或压缩，可以通过调用 `resizeByClientSize` 来恢复正常。一般情况下这行代码已经可以满足适配的需求，如果你有更复杂的适配需求，请阅读“高级使用”部分。 +调用 `setResolution` 后，画布不再跟随显示尺寸变化，始终保持在指定的分辨率，直到再次调用 `setAutoResolution` 恢复自动适配。`width` 和 `height` 属性为只读，反映当前渲染缓冲区的实际分辨率。 ## 高级使用 -关于适配，核心要注意的点是**设备像素比**，以 iPhoneX 为例，设备像素比 `window.devicePixelRatio` 为 _3_，  窗口宽度 `window.innerWidth` 为 _375_，屏幕物理像素宽度则为：375 * 3 = *1125\*。 +关于适配，核心要注意的点是**设备像素比**，以 iPhoneX 为例，设备像素比 `window.devicePixelRatio` 为 _3_，窗口宽度 `window.innerWidth` 为 _375_，屏幕物理像素宽度则为：375 * 3 = *1125*。 -渲染压力和屏幕物理像素高宽成正比，物理像素越大，渲染压力越大，也就越耗电。画布的高宽建议通过 [WebCanvas](/apis/rhi-webgl/WebCanvas) 暴露的 API 设置，不建议使用原生 canvas 的 API ，如 `canvas.width` 或 `canvas.style.width` 这些方法修改。 +渲染压力和屏幕物理像素高宽成正比，物理像素越大，渲染压力越大，也就越耗电。画布的高宽建议通过 [WebCanvas](/apis/rhi-webgl/WebCanvas) 暴露的 API 设置，不建议使用原生 canvas 的 API，如 `canvas.width` 或 `canvas.style.width` 这些方法修改。 -> ️ **注意**：有些前端脚手架会插入以下标签修改页面的缩放比： +> **注意**：有些前端脚手架会插入以下标签修改页面的缩放比： > > `` > > 这行代码会把 `window.innerWidth` 的值从 375 修改为 1125。 -除了 `resizeByClientSize` 自动适配，推荐使用以下两种模式： +### 自动分辨率工作原理 -### 节能模式 +```mermaid +flowchart TD + A[ResizeObserver] -->|监听| B[Canvas 元素] + B -->|devicePixelContentBoxSize| C[设备像素尺寸] + B -->|降级: clientWidth × devicePixelRatio| C + C -->|× scale| D[渲染缓冲区大小] +``` -考虑到移动端设备虽然是高清屏幕（设别像素比高）但实际显卡性能并不能很好地满足高清实时渲染的性能要求的情况（**3 倍屏和 2 倍屏渲染面积比是 9:4，3 倍屏较容易造成手机发烫**），此模式下引擎通过对画布缩放拉伸来达到适配的目的。代码如下： +引擎通过 `ResizeObserver` 监听 canvas 元素的尺寸变化。每次尺寸变化时，observer 捕获 canvas 的设备像素尺寸，然后引擎从以下两种来源之一计算渲染缓冲区大小： -```typescript -const canvas = document.getElementById("canvas"); -const webcanvas = new WebCanvas(canvas); -const pixelRatio = window.devicePixelRatio; // 如果已经设置 meta scale，请设置为 1 -const scale = 3 / 2; // 3 倍高清屏按 2 倍屏来计算画布尺寸 - -/** - * 设置节能模式，默认全屏，也可以自己设置任意高宽 - */ -webcanvas.width = (window.innerWidth * pixelRatio) / scale; -webcanvas.height = (window.innerHeight * pixelRatio) / scale; -webcanvas.setScale(scale, scale); // 拉伸画布 -``` +- **`devicePixelContentBoxSize`（Chrome/Edge/Firefox）**：已直接表示设备像素，只需乘以 `scale` +- **`clientWidth × devicePixelRatio`（Safari 降级方案）**：CSS 像素先乘以设备像素比，再乘以 `scale` -如果已经通过 CSS 设置了画布高宽（比如 `width: 100vw; height: 100vh;`），那么可以通过 `resizeByClientSize` 传参实现画布的缩放： +尺寸更新推迟到下一帧（`engine.update()` 时）执行，避免画面撕裂。 -```typescript -const canvas = document.getElementById("canvas"); -const webcanvas = new WebCanvas(canvas); -const scale = 2 / 3; // 3 倍高清屏按 2 倍屏来计算画布尺寸 +### 节能模式 + +考虑到移动端设备虽然是高清屏幕（设备像素比高）但实际显卡性能并不能很好地满足高清实时渲染的性能要求的情况（**3 倍屏和 2 倍屏渲染面积比是 9:4，3 倍屏较容易造成手机发烫**），可以通过缩放倍率来降低 GPU 负载： -webcanvas.resizeByClientSize(scale); // 拉伸画布 +```typescript +engine.canvas.setAutoResolution(2 / 3); ``` ### 固定宽度模式 -某些情况下，比如设计稿固定 750 宽度的情况，开发者有可能会写死画布宽度来降低适配成本。代码如下： +某些情况下，比如设计稿固定 750 宽度的情况，开发者有可能会写死画布宽度来降低适配成本： ```typescript import { WebCanvas } from "@galacean/engine"; -const canvas = document.getElementById("canvas"); -const webcanvas = new WebCanvas(canvas); -const fixedWidth = 750; // 固定 750 宽度 +const canvas = document.getElementById("canvas") as HTMLCanvasElement; +const webCanvas = new WebCanvas(canvas); +const fixedWidth = 750; -/** - * 设置固定宽度模式 - */ const scale = window.innerWidth / fixedWidth; -webcanvas.width = fixedWidth; -webcanvas.height = window.innerHeight / scale; -webcanvas.setScale(scale, scale); // 拉伸画布 +webCanvas.setResolution(fixedWidth, Math.round(window.innerHeight / scale)); +webCanvas.setScale(scale, scale); ``` diff --git a/docs/zh/physics/query/raycast.mdx b/docs/zh/physics/query/raycast.mdx index 942fb03c0b..d162446fe8 100644 --- a/docs/zh/physics/query/raycast.mdx +++ b/docs/zh/physics/query/raycast.mdx @@ -64,7 +64,6 @@ const engine = await WebGLEngine.create({ canvas: "canvas", physics: new PhysXPhysics() }); -engine.canvas.resizeByClientSize(); const scene = engine.scenes[0]; // 创建一条从原点向下的射线 diff --git a/docs/zh/platform/platform.mdx b/docs/zh/platform/platform.mdx index 04d54e053a..f77c66e91f 100644 --- a/docs/zh/platform/platform.mdx +++ b/docs/zh/platform/platform.mdx @@ -40,7 +40,7 @@ label: Platform | WebGL Mode | 选择使用 WebGL 的版本：
**Auto：** 优先使用 WebGL2.0, 如果运行环境不支持自动切到 WebGL1.0
**WebGL1.0：** 使用 WebGL1.0
**WebGL2.0：** 使用 WebGL2.0 | | Alpha | 画布是否支持透明背景，如果希望画布下方的内容可以透出可以开启 | | Preserve Drawing Buffer | 用于控制在调用 gl.clear() 方法后，绘图缓冲区是否保留其内容 | -| DPR Mode | [设备的像素比](/docs/core/canvas)，通过调用 engine.canvas.resizeByClientSize 来控制画布的尺寸
**Auto：** 自动适配，即参数为 window.devicePixelRatio
**Fixed：** 开发者自行设置参数 选择 Fixed 后，开发者可以自行输入需要设置的参数 | +| DPR Mode | [设备的像素比](/docs/core/canvas)，通过 `engine.canvas.setAutoResolution` 来控制画布的分辨率
**Auto：** 自动适配，即跟随显示尺寸并使用 devicePixelRatio
**Fixed：** 开发者自行设置缩放参数 选择 Fixed 后，开发者可以自行输入缩放倍率 | ## 支持的导出平台 目前 Galacean 支持导出的平台如下： diff --git a/e2e/case/.initPostProcessEnv.ts b/e2e/case/.initPostProcessEnv.ts index b4c8bd9ab3..bbcba54183 100644 --- a/e2e/case/.initPostProcessEnv.ts +++ b/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(); diff --git a/e2e/case/animator-additive.ts b/e2e/case/animator-additive.ts index 462f8f4f51..078952bcb0 100644 --- a/e2e/case/animator-additive.ts +++ b/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(); diff --git a/e2e/case/animator-blendShape-quantization.ts b/e2e/case/animator-blendShape-quantization.ts index afeed92e4f..653d91c6e3 100644 --- a/e2e/case/animator-blendShape-quantization.ts +++ b/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); diff --git a/e2e/case/animator-blendShape.ts b/e2e/case/animator-blendShape.ts index 4baa64029b..890228a29f 100644 --- a/e2e/case/animator-blendShape.ts +++ b/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(); diff --git a/e2e/case/animator-crossfade.ts b/e2e/case/animator-crossfade.ts index 6f96fcdd63..31762553c9 100644 --- a/e2e/case/animator-crossfade.ts +++ b/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(); diff --git a/e2e/case/animator-customAnimationClip.ts b/e2e/case/animator-customAnimationClip.ts index 03c5e787e3..ef2fd20be9 100644 --- a/e2e/case/animator-customAnimationClip.ts +++ b/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(); diff --git a/e2e/case/animator-customBlendShape.ts b/e2e/case/animator-customBlendShape.ts index 673a56b487..c0f6e05bde 100644 --- a/e2e/case/animator-customBlendShape.ts +++ b/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(); diff --git a/e2e/case/animator-event.ts b/e2e/case/animator-event.ts index eb83a74734..52f7a29e9b 100644 --- a/e2e/case/animator-event.ts +++ b/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 diff --git a/e2e/case/animator-multiSubMeshBlendShape.ts b/e2e/case/animator-multiSubMeshBlendShape.ts index 5c1365a758..cf4919cfad 100644 --- a/e2e/case/animator-multiSubMeshBlendShape.ts +++ b/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(); diff --git a/e2e/case/animator-play-backwards.ts b/e2e/case/animator-play-backwards.ts index 936a370048..b55cc36e3f 100644 --- a/e2e/case/animator-play-backwards.ts +++ b/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(); diff --git a/e2e/case/animator-play-beforeActive.ts b/e2e/case/animator-play-beforeActive.ts index 639397d802..a14b2eb8ac 100644 --- a/e2e/case/animator-play-beforeActive.ts +++ b/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(); diff --git a/e2e/case/animator-play.ts b/e2e/case/animator-play.ts index c958fca3a8..82e7966ac3 100644 --- a/e2e/case/animator-play.ts +++ b/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(); diff --git a/e2e/case/animator-reuse.ts b/e2e/case/animator-reuse.ts index 619718b5fe..f49d248739 100644 --- a/e2e/case/animator-reuse.ts +++ b/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(); diff --git a/e2e/case/animator-stateMachine.ts b/e2e/case/animator-stateMachine.ts index 4f449d8487..fe450c1729 100644 --- a/e2e/case/animator-stateMachine.ts +++ b/e2e/case/animator-stateMachine.ts @@ -10,7 +10,6 @@ import { Color, DirectLight, GLTFResource, - SystemInfo, TextRenderer, Vector3, WebGLEngine @@ -18,8 +17,6 @@ import { 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(); diff --git a/e2e/case/animator-stateMachineScript.ts b/e2e/case/animator-stateMachineScript.ts index 5f6d8d9f26..b1cec13332 100644 --- a/e2e/case/animator-stateMachineScript.ts +++ b/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(); diff --git a/e2e/case/camera-fxaa.ts b/e2e/case/camera-fxaa.ts index 67368129f1..4290c6b79c 100644 --- a/e2e/case/camera-fxaa.ts +++ b/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); diff --git a/e2e/case/camera-opaque-texture.ts b/e2e/case/camera-opaque-texture.ts index 7e39623e24..646ae31809 100644 --- a/e2e/case/camera-opaque-texture.ts +++ b/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(); diff --git a/e2e/case/camera-ssao.ts b/e2e/case/camera-ssao.ts index f07e1bd6f7..d38998ef58 100644 --- a/e2e/case/camera-ssao.ts +++ b/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(); diff --git a/e2e/case/canvas-transparency.ts b/e2e/case/canvas-transparency.ts index 9836304642..f140cb0334 100644 --- a/e2e/case/canvas-transparency.ts +++ b/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([ diff --git a/e2e/case/gltf-blendshape.ts b/e2e/case/gltf-blendshape.ts index 5d4c1bde89..6dde5095f1 100644 --- a/e2e/case/gltf-blendshape.ts +++ b/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(); diff --git a/e2e/case/gltf-meshopt.ts b/e2e/case/gltf-meshopt.ts index 538002ef63..e47fde0591 100644 --- a/e2e/case/gltf-meshopt.ts +++ b/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(); diff --git a/e2e/case/gpu-instancing-auto-batch.ts b/e2e/case/gpu-instancing-auto-batch.ts index e9f80e35ab..b45eeb6527 100644 --- a/e2e/case/gpu-instancing-auto-batch.ts +++ b/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"); diff --git a/e2e/case/gpu-instancing-custom-data.ts b/e2e/case/gpu-instancing-custom-data.ts index 1c6f1755dd..290f478ca9 100644 --- a/e2e/case/gpu-instancing-custom-data.ts +++ b/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"); diff --git a/e2e/case/material-LUT.ts b/e2e/case/material-LUT.ts index def9ea9c21..149c0fd5c1 100644 --- a/e2e/case/material-LUT.ts +++ b/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(); diff --git a/e2e/case/material-blendMode.ts b/e2e/case/material-blendMode.ts index 265c7b76ab..c9ee076d7c 100644 --- a/e2e/case/material-blendMode.ts +++ b/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(); diff --git a/e2e/case/material-blinn-phong.ts b/e2e/case/material-blinn-phong.ts index 15d93b04cf..4e510d59f7 100644 --- a/e2e/case/material-blinn-phong.ts +++ b/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(); diff --git a/e2e/case/material-pbr-clearcoat.ts b/e2e/case/material-pbr-clearcoat.ts index d4b8eefac4..5e66e9f209 100644 --- a/e2e/case/material-pbr-clearcoat.ts +++ b/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(); diff --git a/e2e/case/material-pbr-specular.ts b/e2e/case/material-pbr-specular.ts index db33c4c99d..a159b82d1a 100644 --- a/e2e/case/material-pbr-specular.ts +++ b/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(); diff --git a/e2e/case/material-pbr.ts b/e2e/case/material-pbr.ts index 243c09b10e..7cf589ba89 100644 --- a/e2e/case/material-pbr.ts +++ b/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(); diff --git a/e2e/case/material-shader.ts b/e2e/case/material-shader.ts index 7024f323f3..c77418bda1 100644 --- a/e2e/case/material-shader.ts +++ b/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) }; diff --git a/e2e/case/material-shaderReplacement.ts b/e2e/case/material-shaderReplacement.ts index 0ad9b0c548..0169446f3f 100644 --- a/e2e/case/material-shaderReplacement.ts +++ b/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(); diff --git a/e2e/case/material-unlit.ts b/e2e/case/material-unlit.ts index f1555ae096..6fccb3c086 100644 --- a/e2e/case/material-unlit.ts +++ b/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(); diff --git a/e2e/case/material-white-furnace.ts b/e2e/case/material-white-furnace.ts index 706602cc08..00baa80276 100644 --- a/e2e/case/material-white-furnace.ts +++ b/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(); diff --git a/e2e/case/multi-camera-no-clear.ts b/e2e/case/multi-camera-no-clear.ts index eef42c9539..6215088fc2 100644 --- a/e2e/case/multi-camera-no-clear.ts +++ b/e2e/case/multi-camera-no-clear.ts @@ -29,8 +29,6 @@ WebGLEngine.create({ antialias: false } }).then((engine) => { - engine.canvas.resizeByClientSize(); - initFirstScene(engine); engine.run(); }); diff --git a/e2e/case/multi-scene-clear.ts b/e2e/case/multi-scene-clear.ts index ca0b15b632..78cc90f01b 100644 --- a/e2e/case/multi-scene-clear.ts +++ b/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); diff --git a/e2e/case/multi-scene-no-clear.ts b/e2e/case/multi-scene-no-clear.ts index dd08bd09de..976e67e8ae 100644 --- a/e2e/case/multi-scene-no-clear.ts +++ b/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); diff --git a/e2e/case/particleRenderer-burst-cycles.ts b/e2e/case/particleRenderer-burst-cycles.ts index 597e38c7dd..7abe9e055b 100644 --- a/e2e/case/particleRenderer-burst-cycles.ts +++ b/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); diff --git a/e2e/case/particleRenderer-customShader.ts b/e2e/case/particleRenderer-customShader.ts index bb7451debd..8fdfcbce5b 100644 --- a/e2e/case/particleRenderer-customShader.ts +++ b/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); diff --git a/e2e/case/particleRenderer-dream.ts b/e2e/case/particleRenderer-dream.ts index ebc37614e8..714a91e12f 100644 --- a/e2e/case/particleRenderer-dream.ts +++ b/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(); diff --git a/e2e/case/particleRenderer-emissive.ts b/e2e/case/particleRenderer-emissive.ts index b1a20a1ad9..2de9f66fbe 100644 --- a/e2e/case/particleRenderer-emissive.ts +++ b/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(); diff --git a/e2e/case/particleRenderer-emit-billboard-stretched.ts b/e2e/case/particleRenderer-emit-billboard-stretched.ts index c717bac56f..5aead90270 100644 --- a/e2e/case/particleRenderer-emit-billboard-stretched.ts +++ b/e2e/case/particleRenderer-emit-billboard-stretched.ts @@ -29,7 +29,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); @@ -89,7 +88,8 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture const generator = particleRenderer.generator; generator.useAutoRandomSeed = false; - const { main, emission, rotationOverLifetime, textureSheetAnimation, sizeOverLifetime, colorOverLifetime } = generator; + const { main, emission, rotationOverLifetime, textureSheetAnimation, sizeOverLifetime, colorOverLifetime } = + generator; // Main module const { startLifetime, startSpeed, startSize, startRotationZ } = main; @@ -99,8 +99,6 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture main.simulationSpace = ParticleSimulationSpace.Local; // main.startRotation3D = true; main.startRotationZ.constant = 0; - - const coneShape = new ConeShape(); coneShape.angle = 0.01; diff --git a/e2e/case/particleRenderer-emit-mesh-cone-scale-3d-rotation-life-seperate.ts b/e2e/case/particleRenderer-emit-mesh-cone-scale-3d-rotation-life-seperate.ts index d8b3638f92..c468303d06 100644 --- a/e2e/case/particleRenderer-emit-mesh-cone-scale-3d-rotation-life-seperate.ts +++ b/e2e/case/particleRenderer-emit-mesh-cone-scale-3d-rotation-life-seperate.ts @@ -29,7 +29,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); diff --git a/e2e/case/particleRenderer-emit-mesh-cone-scale-3d-rotation.ts b/e2e/case/particleRenderer-emit-mesh-cone-scale-3d-rotation.ts index 3446cdbf1a..b6b93f8858 100644 --- a/e2e/case/particleRenderer-emit-mesh-cone-scale-3d-rotation.ts +++ b/e2e/case/particleRenderer-emit-mesh-cone-scale-3d-rotation.ts @@ -29,7 +29,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); @@ -123,4 +122,4 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture emission.shape = coneShape; return particleEntity; -} \ No newline at end of file +} diff --git a/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-life-seperate.ts b/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-life-seperate.ts index 3e65929bb8..947c5e9323 100644 --- a/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-life-seperate.ts +++ b/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-life-seperate.ts @@ -29,7 +29,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); @@ -92,7 +91,8 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture const generator = particleRenderer.generator; generator.useAutoRandomSeed = false; - const { main, emission, rotationOverLifetime, textureSheetAnimation, sizeOverLifetime, colorOverLifetime } = generator; + const { main, emission, rotationOverLifetime, textureSheetAnimation, sizeOverLifetime, colorOverLifetime } = + generator; // Main module const { startLifetime, startSpeed, startSize, startRotationZ } = main; @@ -127,4 +127,4 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture emission.shape = coneShape; return particleEntity; -} \ No newline at end of file +} diff --git a/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-life.ts b/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-life.ts index 8e7a3b355c..1f166514be 100644 --- a/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-life.ts +++ b/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-life.ts @@ -29,7 +29,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); @@ -92,7 +91,8 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture const generator = particleRenderer.generator; generator.useAutoRandomSeed = false; - const { main, emission, rotationOverLifetime, textureSheetAnimation, sizeOverLifetime, colorOverLifetime } = generator; + const { main, emission, rotationOverLifetime, textureSheetAnimation, sizeOverLifetime, colorOverLifetime } = + generator; // Main module const { startLifetime, startSpeed, startSize, startRotationZ } = main; @@ -126,4 +126,4 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture emission.shape = coneShape; return particleEntity; -} \ No newline at end of file +} diff --git a/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-world.ts b/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-world.ts index 090b9179f1..dcda6ea142 100644 --- a/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-world.ts +++ b/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation-world.ts @@ -29,7 +29,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); @@ -67,7 +66,7 @@ WebGLEngine.create({ }); function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture2D, glTFModel: GLTFResource): Entity { - const meshRenderer = rootEntity.createChild("Mesh").addComponent(MeshRenderer); + const meshRenderer = rootEntity.createChild("Mesh").addComponent(MeshRenderer); meshRenderer.mesh = PrimitiveMesh.createCylinder(engine); const unlitMaterial = new UnlitMaterial(engine); unlitMaterial.baseTexture = glTFModel.textures[0]; @@ -75,8 +74,7 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture const particleEntity = new Entity(engine, "EmitMeshParticle"); particleEntity.transform.rotation.set(30, -45, 30); - particleEntity.transform.scale.set(20,1,20); - + particleEntity.transform.scale.set(20, 1, 20); const particleRenderer = particleEntity.addComponent(ParticleRenderer); @@ -84,7 +82,7 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture material.baseColor = new Color(1.0, 1.0, 1.0, 1.0); // material.blendMode = BlendMode.Additive; material.baseTexture = glTFModel.textures[0]; - material.baseTexture.anisoLevel=12; + material.baseTexture.anisoLevel = 12; particleRenderer.setMaterial(material); particleRenderer.renderMode = ParticleRenderMode.Mesh; @@ -97,11 +95,11 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture // Main module const { startLifetime, startSpeed, startSize, startRotationZ } = main; - startSpeed.constant =1.0; + startSpeed.constant = 1.0; startSize.constant = 0.2; main.simulationSpace = ParticleSimulationSpace.World; - main.startRotationZ.constant=-90; + main.startRotationZ.constant = -90; // startLifetime.constantMin = 0.2; // startLifetime.constantMax = 0.8; // startLifetime.mode = ParticleCurveMode.TwoConstants; @@ -115,7 +113,7 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture // startSize.mode = ParticleCurveMode.TwoConstants; const coneShape = new ConeShape(); - coneShape.angle=0.01; + coneShape.angle = 0.01; emission.shape = coneShape; return particleEntity; diff --git a/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation.ts b/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation.ts index 6656fd5bed..912dd62913 100644 --- a/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation.ts +++ b/e2e/case/particleRenderer-emit-mesh-cone-scale-rotation.ts @@ -29,7 +29,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); @@ -75,7 +74,7 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture const particleEntity = new Entity(engine, "EmitMeshParticle"); particleEntity.transform.rotation.set(220, -20, 0); - particleEntity.transform.scale.set(10,1,1); + particleEntity.transform.scale.set(10, 1, 1); // var r=0; // setInterval(() => { @@ -89,7 +88,7 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture material.baseColor = new Color(1.0, 1.0, 1.0, 1.0); // material.blendMode = BlendMode.Additive; material.baseTexture = glTFModel.textures[0]; - material.baseTexture.anisoLevel=12; + material.baseTexture.anisoLevel = 12; particleRenderer.setMaterial(material); particleRenderer.renderMode = ParticleRenderMode.Mesh; @@ -102,11 +101,11 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture // Main module const { startLifetime, startSpeed, startSize, startRotationZ } = main; - startSpeed.constant =1.0; + startSpeed.constant = 1.0; startSize.constant = 0.2; main.simulationSpace = ParticleSimulationSpace.Local; - main.startRotationZ.constant=-45; + main.startRotationZ.constant = -45; // startLifetime.constantMin = 0.2; // startLifetime.constantMax = 0.8; // startLifetime.mode = ParticleCurveMode.TwoConstants; @@ -120,7 +119,7 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture // startSize.mode = ParticleCurveMode.TwoConstants; const coneShape = new ConeShape(); - coneShape.angle=0.01; + coneShape.angle = 0.01; emission.shape = coneShape; return particleEntity; diff --git a/e2e/case/particleRenderer-emit-mesh-cone.ts b/e2e/case/particleRenderer-emit-mesh-cone.ts index 6954fff204..265d10699e 100644 --- a/e2e/case/particleRenderer-emit-mesh-cone.ts +++ b/e2e/case/particleRenderer-emit-mesh-cone.ts @@ -41,7 +41,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); diff --git a/e2e/case/particleRenderer-emit-mesh-no-shape-world.ts b/e2e/case/particleRenderer-emit-mesh-no-shape-world.ts index 28c8e2edd0..77ca228968 100644 --- a/e2e/case/particleRenderer-emit-mesh-no-shape-world.ts +++ b/e2e/case/particleRenderer-emit-mesh-no-shape-world.ts @@ -28,7 +28,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); diff --git a/e2e/case/particleRenderer-emit-mesh-no-shape.ts b/e2e/case/particleRenderer-emit-mesh-no-shape.ts index e80c228f94..c47e03d989 100644 --- a/e2e/case/particleRenderer-emit-mesh-no-shape.ts +++ b/e2e/case/particleRenderer-emit-mesh-no-shape.ts @@ -28,7 +28,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); diff --git a/e2e/case/particleRenderer-emit-mesh-rotation-life-curve.ts b/e2e/case/particleRenderer-emit-mesh-rotation-life-curve.ts index c26405a3ff..d946107da7 100644 --- a/e2e/case/particleRenderer-emit-mesh-rotation-life-curve.ts +++ b/e2e/case/particleRenderer-emit-mesh-rotation-life-curve.ts @@ -32,8 +32,6 @@ type Mode = "constant" | "curve"; Logger.enable(); WebGLEngine.create({ canvas: "canvas" }).then((engine) => { - engine.canvas.resizeByClientSize(); - const scene = engine.sceneManager.activeScene; scene.background.mode = BackgroundMode.SolidColor; scene.background.solidColor.set(0.15, 0.15, 0.18, 1); diff --git a/e2e/case/particleRenderer-fire.ts b/e2e/case/particleRenderer-fire.ts index d1b0c56899..6df2df3400 100644 --- a/e2e/case/particleRenderer-fire.ts +++ b/e2e/case/particleRenderer-fire.ts @@ -36,7 +36,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/e2e/case/particleRenderer-force.ts b/e2e/case/particleRenderer-force.ts index 553007a2ce..3456f2c34b 100644 --- a/e2e/case/particleRenderer-force.ts +++ b/e2e/case/particleRenderer-force.ts @@ -31,7 +31,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const leftScene = engine.sceneManager.activeScene; const leftRootEntity = leftScene.createRootEntity(); diff --git a/e2e/case/particleRenderer-horizontal-billboard.ts b/e2e/case/particleRenderer-horizontal-billboard.ts index f05a3cffea..58a10c187c 100644 --- a/e2e/case/particleRenderer-horizontal-billboard.ts +++ b/e2e/case/particleRenderer-horizontal-billboard.ts @@ -20,7 +20,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); diff --git a/e2e/case/particleRenderer-limitVelocity.ts b/e2e/case/particleRenderer-limitVelocity.ts index 87b5d53044..a8f01712cf 100644 --- a/e2e/case/particleRenderer-limitVelocity.ts +++ b/e2e/case/particleRenderer-limitVelocity.ts @@ -28,8 +28,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); diff --git a/e2e/case/particleRenderer-noise.ts b/e2e/case/particleRenderer-noise.ts index 2f4c9220c6..2cbe0ed218 100644 --- a/e2e/case/particleRenderer-noise.ts +++ b/e2e/case/particleRenderer-noise.ts @@ -24,8 +24,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); diff --git a/e2e/case/particleRenderer-rateOverDistance.ts b/e2e/case/particleRenderer-rateOverDistance.ts index 8d36aa1a2e..533a8ea5e8 100644 --- a/e2e/case/particleRenderer-rateOverDistance.ts +++ b/e2e/case/particleRenderer-rateOverDistance.ts @@ -23,8 +23,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(); scene.background.solidColor = new Color(0, 0, 0, 1); diff --git a/e2e/case/particleRenderer-shape-mesh.ts b/e2e/case/particleRenderer-shape-mesh.ts index f44fe1deb8..5fd658231e 100644 --- a/e2e/case/particleRenderer-shape-mesh.ts +++ b/e2e/case/particleRenderer-shape-mesh.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(); diff --git a/e2e/case/particleRenderer-shape-transform.ts b/e2e/case/particleRenderer-shape-transform.ts index 9fa0c2417e..a940712cf0 100644 --- a/e2e/case/particleRenderer-shape-transform.ts +++ b/e2e/case/particleRenderer-shape-transform.ts @@ -22,7 +22,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); diff --git a/e2e/case/particleRenderer-sub-emitter.ts b/e2e/case/particleRenderer-sub-emitter.ts index 76621a4ec8..de59db1303 100644 --- a/e2e/case/particleRenderer-sub-emitter.ts +++ b/e2e/case/particleRenderer-sub-emitter.ts @@ -34,8 +34,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); diff --git a/e2e/case/particleRenderer-textureSheetAnimation.ts b/e2e/case/particleRenderer-textureSheetAnimation.ts index 23504f6c53..475cda208f 100644 --- a/e2e/case/particleRenderer-textureSheetAnimation.ts +++ b/e2e/case/particleRenderer-textureSheetAnimation.ts @@ -24,7 +24,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const ambientLight = scene.ambientLight; diff --git a/e2e/case/physx-collision-group.ts b/e2e/case/physx-collision-group.ts index 96ed4c7441..94263f6d80 100644 --- a/e2e/case/physx-collision-group.ts +++ b/e2e/case/physx-collision-group.ts @@ -72,7 +72,6 @@ function createPhysicsSphere( } WebGLEngine.create({ canvas: "canvas", physics: new PhysXPhysics() }).then((engine) => { - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity("root"); diff --git a/e2e/case/physx-collision.ts b/e2e/case/physx-collision.ts index 4700cd0fcb..a7e2989974 100644 --- a/e2e/case/physx-collision.ts +++ b/e2e/case/physx-collision.ts @@ -57,7 +57,6 @@ function addBox(rootEntity: Entity, cubeSize: number, x: number, y: number, z: n } WebGLEngine.create({ canvas: "canvas", physics: new PhysXPhysics() }).then((engine) => { - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity("root"); diff --git a/e2e/case/physx-customUrl.ts b/e2e/case/physx-customUrl.ts index cf31ecda23..ddc1d1a752 100644 --- a/e2e/case/physx-customUrl.ts +++ b/e2e/case/physx-customUrl.ts @@ -62,7 +62,6 @@ WebGLEngine.create({ wasmModeUrl: "../physx.release.js" }) }).then((engine) => { - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity("root"); diff --git a/e2e/case/physx-deferred-contact.ts b/e2e/case/physx-deferred-contact.ts index 2c661017ca..a3e903a3d5 100644 --- a/e2e/case/physx-deferred-contact.ts +++ b/e2e/case/physx-deferred-contact.ts @@ -18,7 +18,6 @@ import { PhysXPhysics } from "@galacean/engine-physics-physx"; import { initScreenshot, updateForE2E } from "./.mockForE2E"; WebGLEngine.create({ canvas: "canvas", physics: new PhysXPhysics() }).then((engine) => { - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity("root"); diff --git a/e2e/case/physx-mesh-collider-data.ts b/e2e/case/physx-mesh-collider-data.ts index ef5cd99b58..2e143e41c6 100644 --- a/e2e/case/physx-mesh-collider-data.ts +++ b/e2e/case/physx-mesh-collider-data.ts @@ -219,7 +219,6 @@ class CollisionScript extends Script { } WebGLEngine.create({ canvas: "canvas", physics: new PhysXPhysics() }).then((engine) => { - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity("root"); diff --git a/e2e/case/physx-mesh-collider.ts b/e2e/case/physx-mesh-collider.ts index c5f8d6cd66..f3d5f63701 100644 --- a/e2e/case/physx-mesh-collider.ts +++ b/e2e/case/physx-mesh-collider.ts @@ -57,7 +57,6 @@ function createFallingBox( const physics = new PhysXPhysics(PhysXRuntimeMode.WebAssemblySIMD); WebGLEngine.create({ canvas: "canvas", physics }).then((engine) => { - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity("root"); diff --git a/e2e/case/primitive-capsule.ts b/e2e/case/primitive-capsule.ts index 5e561d622e..ae9da8711a 100644 --- a/e2e/case/primitive-capsule.ts +++ b/e2e/case/primitive-capsule.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(); diff --git a/e2e/case/primitive-cone.ts b/e2e/case/primitive-cone.ts index 3e4be8256c..8eb2680ae6 100644 --- a/e2e/case/primitive-cone.ts +++ b/e2e/case/primitive-cone.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(); diff --git a/e2e/case/primitive-cuboid.ts b/e2e/case/primitive-cuboid.ts index 8c4e21f926..dd9e655672 100644 --- a/e2e/case/primitive-cuboid.ts +++ b/e2e/case/primitive-cuboid.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(); diff --git a/e2e/case/primitive-cylinder.ts b/e2e/case/primitive-cylinder.ts index c0ab21691a..77cf1c0043 100644 --- a/e2e/case/primitive-cylinder.ts +++ b/e2e/case/primitive-cylinder.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(); diff --git a/e2e/case/primitive-plane.ts b/e2e/case/primitive-plane.ts index 8d50906492..f56cf5f085 100644 --- a/e2e/case/primitive-plane.ts +++ b/e2e/case/primitive-plane.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(); diff --git a/e2e/case/primitive-sphere.ts b/e2e/case/primitive-sphere.ts index 162a962391..709da5c504 100644 --- a/e2e/case/primitive-sphere.ts +++ b/e2e/case/primitive-sphere.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(); diff --git a/e2e/case/primitive-torus.ts b/e2e/case/primitive-torus.ts index 90aa3a76ba..b658731611 100644 --- a/e2e/case/primitive-torus.ts +++ b/e2e/case/primitive-torus.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(); diff --git a/e2e/case/shader-mrt.ts b/e2e/case/shader-mrt.ts index 45a732e6ed..39513e1c12 100644 --- a/e2e/case/shader-mrt.ts +++ b/e2e/case/shader-mrt.ts @@ -83,8 +83,6 @@ const shaderSource = `Shader "/custom.shader" { Logger.enable(); WebGLEngine.create({ canvas: "canvas", shaderCompiler }).then((engine) => { - engine.canvas.resizeByClientSize(); - const shader = Shader.create(shaderSource); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/e2e/case/shader-renderState.ts b/e2e/case/shader-renderState.ts index f55e95d3de..c968c12d4e 100644 --- a/e2e/case/shader-renderState.ts +++ b/e2e/case/shader-renderState.ts @@ -85,8 +85,6 @@ const shaderSource = `Shader "Test RenderState" { Logger.enable(); WebGLEngine.create({ canvas: "canvas", shaderCompiler }).then((engine) => { - engine.canvas.resizeByClientSize(); - const shader = Shader.create(shaderSource); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/e2e/case/shadow-basic.ts b/e2e/case/shadow-basic.ts index d801ba02ae..cea64a22bc 100644 --- a/e2e/case/shadow-basic.ts +++ b/e2e/case/shadow-basic.ts @@ -19,7 +19,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(); scene.shadowResolution = ShadowResolution.Medium; diff --git a/e2e/case/shadow-transparent.ts b/e2e/case/shadow-transparent.ts index 4b7c5b3c98..8b03ecb580 100644 --- a/e2e/case/shadow-transparent.ts +++ b/e2e/case/shadow-transparent.ts @@ -26,7 +26,6 @@ WebGLEngine.create({ webGLMode: WebGLMode.WebGL2 } }).then((engine) => { - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); scene.shadowResolution = ShadowResolution.Medium; diff --git a/e2e/case/spriteMask-customStencil.ts b/e2e/case/spriteMask-customStencil.ts index 2056ae66f2..2feb29411a 100644 --- a/e2e/case/spriteMask-customStencil.ts +++ b/e2e/case/spriteMask-customStencil.ts @@ -109,8 +109,6 @@ const customStencilShaderSource = `Shader "CustomStencilSprite" { // Create engine WebGLEngine.create({ canvas: "canvas", shaderCompiler: new ShaderCompiler() }).then((engine) => { - engine.canvas.resizeByClientSize(); - // Register the custom stencil shader once. const customStencilShader = Shader.create(customStencilShaderSource); diff --git a/e2e/case/text-character-spacing.ts b/e2e/case/text-character-spacing.ts index 5db306f671..87fdb3058b 100644 --- a/e2e/case/text-character-spacing.ts +++ b/e2e/case/text-character-spacing.ts @@ -3,11 +3,17 @@ * @category Text */ -import { Camera, TextHorizontalAlignment, TextRenderer, TextVerticalAlignment, Vector3, WebGLEngine } from "@galacean/engine"; +import { + Camera, + TextHorizontalAlignment, + TextRenderer, + TextVerticalAlignment, + Vector3, + WebGLEngine +} from "@galacean/engine"; import { initScreenshot, updateForE2E } from "./.mockForE2E"; WebGLEngine.create({ canvas: "canvas" }).then((engine) => { - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/e2e/case/text-typed.ts b/e2e/case/text-typed.ts index c900dfec60..bbc58a50c7 100644 --- a/e2e/case/text-typed.ts +++ b/e2e/case/text-typed.ts @@ -19,7 +19,6 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E"; Logger.enable(); WebGLEngine.create({ canvas: "canvas" }).then((engine) => { - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); @@ -78,10 +77,15 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { } } - engine.resourceManager.load({ url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*1Bo5To15x0oAAAAAC_AAAAgAekp5AQ/钟齐志莽行书.json", type: AssetType.Font }).then((font) => { - const typedText = entity.addComponent(TypedText); - typedText.play(textRenderer, "我这一生，走过许多地方的桥儿"); - typedText.font = font; - updateForE2E(engine, 100, 100); - }); + engine.resourceManager + .load({ + url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*1Bo5To15x0oAAAAAC_AAAAgAekp5AQ/钟齐志莽行书.json", + type: AssetType.Font + }) + .then((font) => { + const typedText = entity.addComponent(TypedText); + typedText.play(textRenderer, "我这一生，走过许多地方的桥儿"); + typedText.font = font; + updateForE2E(engine, 100, 100); + }); }); diff --git a/e2e/case/texture-R8G8.ts b/e2e/case/texture-R8G8.ts index 1e33c73126..0bcce16c57 100644 --- a/e2e/case/texture-R8G8.ts +++ b/e2e/case/texture-R8G8.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(); diff --git a/e2e/case/texture-hdr-ktx2.ts b/e2e/case/texture-hdr-ktx2.ts index 5fb24d1a12..9442c6ca6f 100644 --- a/e2e/case/texture-hdr-ktx2.ts +++ b/e2e/case/texture-hdr-ktx2.ts @@ -55,7 +55,7 @@ const shaderSource = `Shader "test-hdr" { }`; WebGLEngine.create({ canvas: "canvas", shaderCompiler, ktx2Loader: { workerCount: 0 } }).then((engine) => { - engine.canvas.resizeByClientSize(2); + engine.canvas.setAutoResolution(2); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/e2e/case/texture-hdr.ts b/e2e/case/texture-hdr.ts index 7d78e5b71d..2c9531a82b 100644 --- a/e2e/case/texture-hdr.ts +++ b/e2e/case/texture-hdr.ts @@ -18,7 +18,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(); diff --git a/e2e/case/texture-sRGB-KTX2.ts b/e2e/case/texture-sRGB-KTX2.ts index 93b5c94ad6..99803b82aa 100644 --- a/e2e/case/texture-sRGB-KTX2.ts +++ b/e2e/case/texture-sRGB-KTX2.ts @@ -15,7 +15,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(); diff --git a/e2e/case/trailRenderer-basic.ts b/e2e/case/trailRenderer-basic.ts index 01955223bf..687869e330 100644 --- a/e2e/case/trailRenderer-basic.ts +++ b/e2e/case/trailRenderer-basic.ts @@ -168,7 +168,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { Logger.enable(); - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/e2e/case/ui-batch-order.ts b/e2e/case/ui-batch-order.ts index a0d234004f..44cca1b04c 100644 --- a/e2e/case/ui-batch-order.ts +++ b/e2e/case/ui-batch-order.ts @@ -16,7 +16,7 @@ import { initScreenshot, updateForE2E } from "./.mockForE2E"; registerGUI(); WebGLEngine.create({ canvas: "canvas" }).then((engine) => { - engine.canvas.resizeByClientSize(2); + engine.canvas.setAutoResolution(2); const scene = engine.sceneManager.activeScene; const root = scene.createRootEntity("root"); diff --git a/examples/src/CSS-DOM.ts b/examples/src/CSS-DOM.ts index c06dd346c6..192b998265 100644 --- a/examples/src/CSS-DOM.ts +++ b/examples/src/CSS-DOM.ts @@ -25,8 +25,6 @@ async function main() { graphicDeviceOptions: { webGLMode: WebGLMode.Auto } }); - engine.canvas.resizeByClientSize(); - // Create root entity const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/examples/src/buffer-mesh-independent.ts b/examples/src/buffer-mesh-independent.ts index e1a35d893c..dc67adc56d 100644 --- a/examples/src/buffer-mesh-independent.ts +++ b/examples/src/buffer-mesh-independent.ts @@ -65,7 +65,6 @@ main(); async function main() { // Create engine and get root entity. const engine = await WebGLEngine.create({ canvas: "canvas" }); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); diff --git a/examples/src/buffer-mesh-instance.ts b/examples/src/buffer-mesh-instance.ts index ac64da53be..1783099d5a 100644 --- a/examples/src/buffer-mesh-instance.ts +++ b/examples/src/buffer-mesh-instance.ts @@ -25,8 +25,6 @@ import { ShaderCompiler } from "@galacean/engine-shader-compiler"; // Create engine WebGLEngine.create({ canvas: "canvas", shaderCompiler: new ShaderCompiler() }).then((engine) => { - engine.canvas.resizeByClientSize(); - // Get scene and root entity const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity("Root"); diff --git a/examples/src/buffer-mesh-interleaved.ts b/examples/src/buffer-mesh-interleaved.ts index 15061d6904..9685498bee 100644 --- a/examples/src/buffer-mesh-interleaved.ts +++ b/examples/src/buffer-mesh-interleaved.ts @@ -23,8 +23,6 @@ import { // Create engine and get root entity WebGLEngine.create({ canvas: "canvas" }).then((engine) => { - engine.canvas.resizeByClientSize(); - const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); // Create light. diff --git a/examples/src/device-restore.ts b/examples/src/device-restore.ts index 8c8bf06450..9a278160c9 100644 --- a/examples/src/device-restore.ts +++ b/examples/src/device-restore.ts @@ -6,8 +6,6 @@ import { Animator, Camera, Color, GLTFResource, Vector3, WebGLEngine } from "@galacean/engine"; WebGLEngine.create({ canvas: "canvas" }).then((engine) => { - engine.canvas.resizeByClientSize(); - const rootEntity = engine.sceneManager.activeScene.createRootEntity(); rootEntity.scene.background.solidColor = new Color(0.39, 0.31, 0.55, 1.0); @@ -27,7 +25,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => { rootEntity.addChild(defaultSceneRoot); const animator = defaultSceneRoot.getComponent(Animator); - animator.play(animations![0].name); + animator?.play(animations![0].name); engine.on("devicelost", () => { domText.textContent = "Device is lost!"; diff --git a/examples/src/gltf-loader.ts b/examples/src/gltf-loader.ts index ae54a6d198..40f4fac362 100644 --- a/examples/src/gltf-loader.ts +++ b/examples/src/gltf-loader.ts @@ -186,7 +186,6 @@ class Oasis { } initScene() { - this.engine.canvas.resizeByClientSize(); this.controler.minDistance = 0; // debug sync diff --git a/examples/src/gpu-instancing-auto-batch.ts b/examples/src/gpu-instancing-auto-batch.ts index 3bf57fc429..ce27044161 100644 --- a/examples/src/gpu-instancing-auto-batch.ts +++ b/examples/src/gpu-instancing-auto-batch.ts @@ -126,7 +126,6 @@ WebGLEngine.create({ shaderCompiler }).then(async (engine) => { Shader.create(customInstanceShaderSource); - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity("Root"); diff --git a/examples/src/gpu-instancing-custom-data.ts b/examples/src/gpu-instancing-custom-data.ts index eb7c9e8917..52b0ea89a3 100644 --- a/examples/src/gpu-instancing-custom-data.ts +++ b/examples/src/gpu-instancing-custom-data.ts @@ -111,7 +111,6 @@ WebGLEngine.create({ shaderCompiler }).then((engine) => { Shader.create(customInstanceShaderSource); - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity("Root"); diff --git a/examples/src/paricle-emit-mesh.ts b/examples/src/paricle-emit-mesh.ts index 730e316257..1986ca4912 100644 --- a/examples/src/paricle-emit-mesh.ts +++ b/examples/src/paricle-emit-mesh.ts @@ -56,7 +56,8 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture const generator = particleRenderer.generator; generator.useAutoRandomSeed = false; - const { main, emission, rotationOverLifetime, textureSheetAnimation, sizeOverLifetime, colorOverLifetime } = generator; + const { main, emission, rotationOverLifetime, textureSheetAnimation, sizeOverLifetime, colorOverLifetime } = + generator; // Main module const { startLifetime, startSpeed, startSize, startRotationZ } = main; @@ -65,13 +66,12 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture main.simulationSpace = ParticleSimulationSpace.Local; main.startRotation3D = true; - main.startRotationX.constant = -40; + main.startRotationX.constant = -40; main.startRotationZ.constant = 0; - + // main.startRotationY.constant = 40; // main.startRotationZ.constant = -70; - rotationOverLifetime.enabled = true; rotationOverLifetime.separateAxes = true; rotationOverLifetime.rotationX.constant = 100; @@ -94,7 +94,6 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture // coneShape.angle = 0.01; // emission.shape = coneShape; - const coneShape = new ConeShape(); coneShape.angle = 0.01; emission.shape = coneShape; @@ -105,7 +104,6 @@ function createFireParticle(rootEntity: Entity, engine: Engine, texture: Texture async function main() { // Create engine and get root entity const engine = await WebGLEngine.create({ canvas: "canvas" }); - engine.canvas.resizeByClientSize(); const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root"); diff --git a/examples/src/project-loader.ts b/examples/src/project-loader.ts index 49c49400ca..127697bbd4 100644 --- a/examples/src/project-loader.ts +++ b/examples/src/project-loader.ts @@ -13,8 +13,6 @@ WebGLEngine.create({ canvas: document.getElementById("canvas") as HTMLCanvasElement, shaderCompiler }).then((engine) => { - engine.canvas.resizeByClientSize(); - engine.resourceManager .load({ url: "https://mdn.alipayobjects.com/oasis_be/afts/file/A*aE8_QotPNL4AAAAAQNAAAAgAekp5AQ/project.json", diff --git a/examples/src/screenshot.ts b/examples/src/screenshot.ts index 795241fd16..f60c81f0db 100644 --- a/examples/src/screenshot.ts +++ b/examples/src/screenshot.ts @@ -21,7 +21,6 @@ import { const gui = new dat.GUI(); WebGLEngine.create({ canvas: "canvas" }).then((engine) => { - engine.canvas.resizeByClientSize(); const scene = engine.sceneManager.activeScene; scene.background.solidColor.set(0, 0, 0, 0); const rootEntity = scene.createRootEntity(); diff --git a/examples/src/shader-01-basic-shader.ts b/examples/src/shader-01-basic-shader.ts index 34c001ca85..f92c1e9cea 100644 --- a/examples/src/shader-01-basic-shader.ts +++ b/examples/src/shader-01-basic-shader.ts @@ -113,8 +113,6 @@ function createTexture(engine: Engine): Promise { // 主程序 WebGLEngine.create({ canvas: "canvas", shaderCompiler: new ShaderCompiler() }).then(async (engine) => { - engine.canvas.resizeByClientSize(); - // 创建场景和相机 const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/examples/src/shader-02-render-state.ts b/examples/src/shader-02-render-state.ts index 464a1d38db..4a7538c064 100644 --- a/examples/src/shader-02-render-state.ts +++ b/examples/src/shader-02-render-state.ts @@ -121,8 +121,6 @@ function createPlane(engine: Engine, name: string, position: Vector3): Entity { // 主程序 Logger.enable(); WebGLEngine.create({ canvas: "canvas", shaderCompiler: new ShaderCompiler() }).then((engine) => { - engine.canvas.resizeByClientSize(); - // 创建场景和相机 const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/examples/src/shader-03-ui-script.ts b/examples/src/shader-03-ui-script.ts index d220609ce9..321a3e4b75 100644 --- a/examples/src/shader-03-ui-script.ts +++ b/examples/src/shader-03-ui-script.ts @@ -160,8 +160,6 @@ function createCheckerTexture(engine: Engine): Texture2D { // 主程序 Logger.enable(); WebGLEngine.create({ canvas: "canvas", shaderCompiler: new ShaderCompiler() }).then((engine) => { - engine.canvas.resizeByClientSize(); - // 创建场景和相机 const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/examples/src/shader-04-multi-pass.ts b/examples/src/shader-04-multi-pass.ts index b3f279ae02..427982f394 100644 --- a/examples/src/shader-04-multi-pass.ts +++ b/examples/src/shader-04-multi-pass.ts @@ -142,8 +142,6 @@ function createSphere(engine: Engine, name: string, position: Vector3): Entity { // 主程序 Logger.enable(); WebGLEngine.create({ canvas: "canvas", shaderCompiler: new ShaderCompiler() }).then((engine) => { - engine.canvas.resizeByClientSize(); - // 创建场景和相机 const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/examples/src/shader-05-advance.ts b/examples/src/shader-05-advance.ts index ea79a6664d..c69836b8e9 100644 --- a/examples/src/shader-05-advance.ts +++ b/examples/src/shader-05-advance.ts @@ -81,8 +81,6 @@ Shader "Tutorial/05-SkinnedUnlit" { Logger.enable(); WebGLEngine.create({ canvas: "canvas", shaderCompiler: new ShaderCompiler() }).then(async (engine) => { - engine.canvas.resizeByClientSize(); - // 创建场景和相机 const scene = engine.sceneManager.activeScene; const rootEntity = scene.createRootEntity(); diff --git a/examples/src/ui-batch-massive.ts b/examples/src/ui-batch-massive.ts index 62d3a5c2b2..8649effc87 100644 --- a/examples/src/ui-batch-massive.ts +++ b/examples/src/ui-batch-massive.ts @@ -21,8 +21,6 @@ import { registerGUI(); WebGLEngine.create({ canvas: "canvas" }).then((engine) => { - engine.canvas.resizeByClientSize(); - const scene = engine.sceneManager.activeScene; const root = scene.createRootEntity("root"); diff --git a/packages/core/src/Canvas.ts b/packages/core/src/Canvas.ts index 6fc64dc2cf..df4b0c5a2a 100644 --- a/packages/core/src/Canvas.ts +++ b/packages/core/src/Canvas.ts @@ -1,46 +1,69 @@ import { UpdateFlagManager } from "./UpdateFlagManager"; /** - * Canvas. + * The canvas the engine renders to; owns the render-buffer resolution. */ export abstract class Canvas { /* @internal */ _sizeUpdateFlagManager: UpdateFlagManager = new UpdateFlagManager(); - private _width: number; - private _height: number; + private _width: number = 0; + private _height: number = 0; /** - * The width of the canvas. + * The width component of the canvas resolution, in pixels. */ get width(): number { return this._width; } - set width(value: number) { - if (this._width !== value) { - this._width = value; - this._onWidthChanged(value); - this._sizeUpdateFlagManager.dispatch(); - } - } - /** - *The height of the canvas. + * The height component of the canvas resolution, in pixels. */ get height(): number { return this._height; } - set height(value: number) { - if (this._height !== value) { - this._height = value; - this._onHeightChange(value); + /** + * Lock the render buffer to an explicit resolution and stop following the display size. + * @param width - Render buffer width in pixels + * @param height - Render buffer height in pixels + * + * @throws + * Throw an error if width or height is not a positive finite number. + */ + setResolution(width: number, height: number): void { + if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) { + throw new Error(`Canvas.setResolution: invalid size ${width}x${height}`); + } + + this._exitAutoResize(); + this._setSize(width, height); + } + + /** + * Make the render buffer automatically follow the canvas display size. + * @param scale - Multiplier applied to the device pixel ratio (1 = native sharpness, 0.7 = save GPU, 2 = supersample), defaults to `1` + * + * @throws + * Throw an error if scale is not a positive finite number. + */ + abstract setAutoResolution(scale?: number): void; + + protected _setSize(width: number, height: number): void { + if (this._width !== width || this._height !== height) { + this._width = width; + this._height = height; + this._onSizeChanged(width, height); this._sizeUpdateFlagManager.dispatch(); } } - protected abstract _onWidthChanged(value: number): void; + _pumpPendingResize(): void {} + + abstract _destroy(): void; + + protected _exitAutoResize(): void {} - protected abstract _onHeightChange(value: number): void; + protected abstract _onSizeChanged(width: number, height: number): void; } diff --git a/packages/core/src/Engine.ts b/packages/core/src/Engine.ts index e1643ac002..07c8dc834e 100644 --- a/packages/core/src/Engine.ts +++ b/packages/core/src/Engine.ts @@ -322,6 +322,8 @@ export class Engine extends EventDispatcher { * Update the engine loop manually. If you call engine.run(), you generally don't need to call this function. */ update(): void { + this._canvas._pumpPendingResize(); + const time = this._time; time._update(); diff --git a/packages/galacean/README.md b/packages/galacean/README.md index 71bc59c556..8551c2785b 100644 --- a/packages/galacean/README.md +++ b/packages/galacean/README.md @@ -39,9 +39,8 @@ import { Engine, Scene, Entity } from "@galacean/engine"; ## Usage ```typescript -// Create engine by passing in the HTMLCanvasElement id and adjust canvas size +// Create engine by passing in the HTMLCanvasElement id (canvas auto-resizes by default) const engine = await WebGLEngine.create({ canvas: "canvas-id" }); -engine.canvas.resizeByClientSize(); // Get scene and create root entity const scene = engine.sceneManager.activeScene; diff --git a/packages/rhi-webgl/src/WebCanvas.ts b/packages/rhi-webgl/src/WebCanvas.ts index 41df0f6749..55bffdd878 100644 --- a/packages/rhi-webgl/src/WebCanvas.ts +++ b/packages/rhi-webgl/src/WebCanvas.ts @@ -11,13 +11,19 @@ export class WebCanvas extends Canvas { private _scale: Vector2 = new Vector2(); + private _resizeObserver?: ResizeObserver; + private _autoResolutionScale: number = 1; + private _pendingResize: boolean = false; + private _pendingDevicePixelWidth: number = 0; + private _pendingDevicePixelHeight: number = 0; + /** * The scale of canvas, the value is visible width/height divide the render width/height. * @remarks Need to re-assign after modification to ensure that the modification takes effect. */ get scale(): Vector2 { const webCanvas = this._webCanvas; - if (typeof OffscreenCanvas === "undefined" || !(webCanvas instanceof OffscreenCanvas)) { + if (!this._isOffscreenCanvas()) { this._scale.set( (webCanvas.clientWidth * devicePixelRatio) / webCanvas.width, (webCanvas.clientHeight * devicePixelRatio) / webCanvas.height @@ -28,23 +34,34 @@ export class WebCanvas extends Canvas { set scale(value: Vector2) { const webCanvas = this._webCanvas; - if (typeof OffscreenCanvas === "undefined" || !(webCanvas instanceof OffscreenCanvas)) { + if (!this._isOffscreenCanvas()) { webCanvas.style.transformOrigin = `left top`; webCanvas.style.transform = `scale(${value.x}, ${value.y})`; } } - /** - * Resize the rendering size according to the clientWidth and clientHeight of the canvas. - * @param pixelRatio - Pixel ratio - */ - resizeByClientSize(pixelRatio: number = window.devicePixelRatio): void { - const webCanvas = this._webCanvas; - if (typeof OffscreenCanvas === "undefined" || !(webCanvas instanceof OffscreenCanvas)) { - const exportWidth = webCanvas.clientWidth * pixelRatio; - const exportHeight = webCanvas.clientHeight * pixelRatio; - this.width = exportWidth; - this.height = exportHeight; + override setAutoResolution(scale: number = 1): void { + if (!Number.isFinite(scale) || scale <= 0) { + throw new Error(`WebCanvas.setAutoResolution: invalid scale ${scale}`); + } + + // OffscreenCanvas has no display size to follow + if (this._isOffscreenCanvas()) return; + + this._autoResolutionScale = scale; + + if (this._resizeObserver) { + // Already observing: reapply the new scale to the last measured size + this._pendingResize = true; + } else { + // observe() fires an initial entry, which sets the pending size (with exact device pixels when supported) + this._resizeObserver = new ResizeObserver((entries) => { + const box = entries[entries.length - 1].devicePixelContentBoxSize?.[0]; + this._pendingDevicePixelWidth = box ? box.inlineSize : 0; + this._pendingDevicePixelHeight = box ? box.blockSize : 0; + this._pendingResize = true; + }); + this._resizeObserver.observe(this._webCanvas); } } @@ -54,11 +71,8 @@ export class WebCanvas extends Canvas { */ constructor(webCanvas: HTMLCanvasElement | OffscreenCanvas) { super(); - const width = webCanvas.width; - const height = webCanvas.height; this._webCanvas = webCanvas; - this.width = width; - this.height = height; + this._setSize(webCanvas.width, webCanvas.height); } /** @@ -71,11 +85,51 @@ export class WebCanvas extends Canvas { this.scale = this._scale; } - protected override _onWidthChanged(value: number): void { - this._webCanvas.width = value; + /** + * @internal + */ + _isOffscreenCanvas(): boolean { + return typeof OffscreenCanvas !== "undefined" && this._webCanvas instanceof OffscreenCanvas; } - protected override _onHeightChange(value: number): void { - this._webCanvas.height = value; + override _pumpPendingResize(): void { + if (!this._pendingResize) return; + + const webCanvas = this._webCanvas; + if (webCanvas.clientWidth === 0 || webCanvas.clientHeight === 0) return; + + this._pendingResize = false; + const scale = this._autoResolutionScale; + if (this._pendingDevicePixelWidth > 0 && this._pendingDevicePixelHeight > 0) { + // Exact device pixels already include the device pixel ratio, so only apply the scale + this._setSize( + Math.round(this._pendingDevicePixelWidth * scale), + Math.round(this._pendingDevicePixelHeight * scale) + ); + } else { + // Fallback where `devicePixelContentBoxSize` is unavailable (Safari): clientWidth is CSS pixels + const pixelRatio = window.devicePixelRatio * scale; + this._setSize(Math.round(webCanvas.clientWidth * pixelRatio), Math.round(webCanvas.clientHeight * pixelRatio)); + } + } + + override _destroy(): void { + this._exitAutoResize(); + } + + protected override _exitAutoResize(): void { + if (this._resizeObserver) { + this._resizeObserver.disconnect(); + this._resizeObserver = undefined; + } + this._pendingResize = false; + this._pendingDevicePixelWidth = 0; + this._pendingDevicePixelHeight = 0; + } + + protected override _onSizeChanged(width: number, height: number): void { + const webCanvas = this._webCanvas; + webCanvas.width = width; + webCanvas.height = height; } } diff --git a/packages/rhi-webgl/src/WebGLEngine.ts b/packages/rhi-webgl/src/WebGLEngine.ts index 2d21b71801..d114e98f9b 100644 --- a/packages/rhi-webgl/src/WebGLEngine.ts +++ b/packages/rhi-webgl/src/WebGLEngine.ts @@ -1,9 +1,9 @@ -import { Engine, EngineConfiguration, Scene } from "@galacean/engine-core"; +import { Engine, EngineConfiguration, EngineEventType, Scene } from "@galacean/engine-core"; import { WebGLGraphicDevice, WebGLGraphicDeviceOptions } from "./"; import { WebCanvas } from "./WebCanvas"; /** - * WebGL platform engine,support includes WebGL1.0 and WebGL2.0. + * WebGL platform engine, supports WebGL 1.0 and WebGL 2.0. */ export class WebGLEngine extends Engine { /** @@ -16,6 +16,8 @@ export class WebGLEngine extends Engine { const webCanvas = new WebCanvas(typeof canvas === "string" ? document.getElementById(canvas) : canvas); const webGLGraphicDevice = new WebGLGraphicDevice(configuration.graphicDeviceOptions); const engine = new WebGLEngine(webCanvas, webGLGraphicDevice, configuration); + engine.once(EngineEventType.Shutdown, WebGLEngine._releaseCanvas); + webCanvas.setAutoResolution(); // @ts-ignore const promise = engine._initialize(configuration) as Promise; return promise.then(() => { @@ -25,16 +27,20 @@ export class WebGLEngine extends Engine { } /** - * Web canvas. + * The web canvas the engine renders to. */ override get canvas(): WebCanvas { // @ts-ignore return this._canvas as WebCanvas; } + + private static _releaseCanvas(engine: WebGLEngine): void { + engine.canvas._destroy(); + } } /** - * WebGL engine configuration. + * Options for `WebGLEngine.create()`. */ export interface WebGLEngineConfiguration extends EngineConfiguration { /** Canvas element or canvas id. */ diff --git a/packages/rhi-webgl/src/WebGLGraphicDevice.ts b/packages/rhi-webgl/src/WebGLGraphicDevice.ts index 7394b0409a..9e710c2a33 100644 --- a/packages/rhi-webgl/src/WebGLGraphicDevice.ts +++ b/packages/rhi-webgl/src/WebGLGraphicDevice.ts @@ -213,10 +213,10 @@ export class WebGLGraphicDevice implements IHardwareRenderer { this._webCanvas = webCanvas; const webGLOptions = this._webGLOptions; - let gl: (WebGLRenderingContext & WebGLExtension) | WebGL2RenderingContext; + let gl: (WebGLRenderingContext & WebGLExtension) | WebGL2RenderingContext | undefined; if (webGLMode == WebGLMode.Auto || webGLMode == WebGLMode.WebGL2) { gl = webCanvas.getContext("webgl2", webGLOptions); - if (!gl && (typeof OffscreenCanvas === "undefined" || !(webCanvas instanceof OffscreenCanvas))) { + if (!gl && !(canvas as WebCanvas)._isOffscreenCanvas()) { gl = webCanvas.getContext("experimental-webgl2", webGLOptions); } this._isWebGL2 = true; @@ -230,7 +230,7 @@ export class WebGLGraphicDevice implements IHardwareRenderer { if (!gl) { if (webGLMode == WebGLMode.Auto || webGLMode == WebGLMode.WebGL1) { gl = webCanvas.getContext("webgl", webGLOptions); - if (!gl && (typeof OffscreenCanvas === "undefined" || !(webCanvas instanceof OffscreenCanvas))) { + if (!gl && !(canvas as WebCanvas)._isOffscreenCanvas()) { gl = webCanvas.getContext("experimental-webgl", webGLOptions); } this._isWebGL2 = false; diff --git a/tests/src/core/2d/text/__screenshots__/TextRenderer.test.ts/TextRenderer-bounds-1.png b/tests/src/core/2d/text/__screenshots__/TextRenderer.test.ts/TextRenderer-bounds-1.png deleted file mode 100644 index f88c55c1ca..0000000000 Binary files a/tests/src/core/2d/text/__screenshots__/TextRenderer.test.ts/TextRenderer-bounds-1.png and /dev/null differ diff --git a/tests/src/core/Camera.test.ts b/tests/src/core/Camera.test.ts index 0892400f07..2aa6fefa21 100644 --- a/tests/src/core/Camera.test.ts +++ b/tests/src/core/Camera.test.ts @@ -171,13 +171,12 @@ describe("camera test", function () { expect(viewportPoint.z).to.be.closeTo(expectedviewportPoint.z, 0.1, "Result z should match expected value"); const webCanvas = engine.canvas; - webCanvas.width = 100; - webCanvas.height = 1000; + webCanvas.setResolution(100, 1000); camera.viewportToWorldPoint(viewportPoint, worldPoint); expect(worldPoint.x).to.be.closeTo(-1.73, 0.1, "Result x should match expected value"); expect(worldPoint.y).to.be.closeTo(17.32, 0.1, "Result y should match expected value"); expect(worldPoint.z).to.be.closeTo(-30, 0.1, "Result z should match expected value"); - webCanvas.width = webCanvas.height = 256; + webCanvas.setResolution(256, 256); }); it("viewport to world point, while isOrthographic = true", () => { diff --git a/tests/src/core/__screenshots__/Sprite.test.ts/Sprite-get-set-size-1.png b/tests/src/core/__screenshots__/Sprite.test.ts/Sprite-get-set-size-1.png deleted file mode 100644 index f88c55c1ca..0000000000 Binary files a/tests/src/core/__screenshots__/Sprite.test.ts/Sprite-get-set-size-1.png and /dev/null differ diff --git a/tests/src/core/__screenshots__/SpriteMask.test.ts/SpriteMask--render-1.png b/tests/src/core/__screenshots__/SpriteMask.test.ts/SpriteMask--render-1.png deleted file mode 100644 index f88c55c1ca..0000000000 Binary files a/tests/src/core/__screenshots__/SpriteMask.test.ts/SpriteMask--render-1.png and /dev/null differ diff --git a/tests/src/core/__screenshots__/SpriteMask.test.ts/SpriteMask-get-set-size-1.png b/tests/src/core/__screenshots__/SpriteMask.test.ts/SpriteMask-get-set-size-1.png deleted file mode 100644 index f88c55c1ca..0000000000 Binary files a/tests/src/core/__screenshots__/SpriteMask.test.ts/SpriteMask-get-set-size-1.png and /dev/null differ diff --git a/tests/src/core/__screenshots__/SpriteRenderer.test.ts/SpriteRenderer--render-1.png b/tests/src/core/__screenshots__/SpriteRenderer.test.ts/SpriteRenderer--render-1.png deleted file mode 100644 index f88c55c1ca..0000000000 Binary files a/tests/src/core/__screenshots__/SpriteRenderer.test.ts/SpriteRenderer--render-1.png and /dev/null differ diff --git a/tests/src/core/__screenshots__/SpriteRenderer.test.ts/SpriteRenderer-get-set-size-1.png b/tests/src/core/__screenshots__/SpriteRenderer.test.ts/SpriteRenderer-get-set-size-1.png deleted file mode 100644 index f88c55c1ca..0000000000 Binary files a/tests/src/core/__screenshots__/SpriteRenderer.test.ts/SpriteRenderer-get-set-size-1.png and /dev/null differ diff --git a/tests/src/core/audio/__screenshots__/AudioSource.test.ts/AudioSource-load-1.png b/tests/src/core/audio/__screenshots__/AudioSource.test.ts/AudioSource-load-1.png deleted file mode 100644 index f88c55c1ca..0000000000 Binary files a/tests/src/core/audio/__screenshots__/AudioSource.test.ts/AudioSource-load-1.png and /dev/null differ diff --git a/tests/src/core/input/InputManager.test.ts b/tests/src/core/input/InputManager.test.ts index d63b1e03af..c552d39465 100644 --- a/tests/src/core/input/InputManager.test.ts +++ b/tests/src/core/input/InputManager.test.ts @@ -23,7 +23,8 @@ body.appendChild(canvasDOM); describe("InputManager", async () => { const engine = await WebGLEngine.create({ canvas: canvasDOM, physics: new PhysXPhysics() }); const { inputManager, canvas } = engine; - canvas.resizeByClientSize(2); + // Twice the 5x5 CSS size, so pointer coordinates map at a 2x ratio. + canvas.setResolution(10, 10); const scene = engine.sceneManager.scenes[0]; const root = scene.createRootEntity("root"); diff --git a/tests/src/rhi-webgl/WebCanvas.test.ts b/tests/src/rhi-webgl/WebCanvas.test.ts new file mode 100644 index 0000000000..05fc5d5533 --- /dev/null +++ b/tests/src/rhi-webgl/WebCanvas.test.ts @@ -0,0 +1,38 @@ +import { WebCanvas } from "@galacean/engine"; +import { describe, expect, it } from "vitest"; + +describe("WebCanvas", () => { + describe("_isOffscreenCanvas", () => { + it("should return false when _webCanvas is an HTMLCanvasElement", () => { + const canvas = document.createElement("canvas"); + const webCanvas = new WebCanvas(canvas); + expect((webCanvas as any)._isOffscreenCanvas()).toBe(false); + }); + + it("should return true when _webCanvas is an OffscreenCanvas", () => { + const offscreen = new OffscreenCanvas(300, 150); + const webCanvas = new WebCanvas(offscreen); + expect((webCanvas as any)._isOffscreenCanvas()).toBe(true); + }); + + it("should return false when _webCanvas is replaced with an HTMLCanvasElement after construction", () => { + const canvas = document.createElement("canvas"); + const webCanvas = new WebCanvas(canvas); + + // Replace the internal canvas with an HTMLCanvasElement + const anotherCanvas = document.createElement("canvas"); + webCanvas._webCanvas = anotherCanvas; + expect((webCanvas as any)._isOffscreenCanvas()).toBe(false); + }); + + it("should return true when _webCanvas is replaced with an OffscreenCanvas after construction", () => { + const canvas = document.createElement("canvas"); + const webCanvas = new WebCanvas(canvas); + + // Replace the internal canvas with an OffscreenCanvas + const offscreen = new OffscreenCanvas(300, 150); + webCanvas._webCanvas = offscreen; + expect((webCanvas as any)._isOffscreenCanvas()).toBe(true); + }); + }); +}); diff --git a/tests/src/rhi-webgl/WebGLEngine.test.ts b/tests/src/rhi-webgl/WebGLEngine.test.ts index 91cd371285..b92af54fca 100644 --- a/tests/src/rhi-webgl/WebGLEngine.test.ts +++ b/tests/src/rhi-webgl/WebGLEngine.test.ts @@ -102,4 +102,52 @@ describe("webgl engine test", () => { engine.destroy(); } }); + + it("canvas auto resize", async () => { + // create enters auto mode by default and attaches an observer. + const canvas = document.createElement("canvas"); + const engine = await WebGLEngine.create({ canvas }); + engine.run(); + const webCanvas = engine.canvas; + const observer = (webCanvas as any)._resizeObserver; + expect(observer).toBeDefined(); + + // Re-entering auto reuses the same observer and updates the scale. + webCanvas.setAutoResolution(0.5); + expect((webCanvas as any)._resizeObserver).toBe(observer); + expect((webCanvas as any)._autoResolutionScale).toBe(0.5); + + // A pending resize is applied on the next frame pump. jsdom has no layout, so stub clientWidth/Height. + Object.defineProperty(canvas, "clientWidth", { value: 800, configurable: true }); + Object.defineProperty(canvas, "clientHeight", { value: 600, configurable: true }); + (webCanvas as any)._pendingResize = true; + webCanvas._pumpPendingResize(); + expect((webCanvas as any)._pendingResize).toBe(false); + expect(webCanvas.width).toBe(Math.round(800 * window.devicePixelRatio * 0.5)); + expect(webCanvas.height).toBe(Math.round(600 * window.devicePixelRatio * 0.5)); + + // A pending resize is skipped while the canvas has no layout size (never a 0x0 buffer). + Object.defineProperty(canvas, "clientWidth", { value: 0, configurable: true }); + (webCanvas as any)._pendingResize = true; + webCanvas._pumpPendingResize(); + expect((webCanvas as any)._pendingResize).toBe(true); // kept so a later frame's pump retries + + // setResolution locks a fixed size and exits auto mode (observer released). + webCanvas.setResolution(320, 240); + expect((webCanvas as any)._resizeObserver).toBeUndefined(); + expect(webCanvas.width).toBe(320); + expect(webCanvas.height).toBe(240); + + // setResolution rejects invalid sizes; setAutoResolution rejects invalid scales. + expect(() => webCanvas.setResolution(0, 100)).to.throw(); + expect(() => webCanvas.setResolution(-1, 100)).to.throw(); + expect(() => webCanvas.setAutoResolution(0)).to.throw(); + expect(() => webCanvas.setAutoResolution(-1)).to.throw(); + + // destroy releases the observer. + webCanvas.setAutoResolution(); + expect((webCanvas as any)._resizeObserver).toBeDefined(); + engine.destroy(); + expect((webCanvas as any)._resizeObserver).toBeUndefined(); + }); }); diff --git a/tests/src/ui/Image.test.ts b/tests/src/ui/Image.test.ts index ca13eef6a0..eaa6bd026a 100644 --- a/tests/src/ui/Image.test.ts +++ b/tests/src/ui/Image.test.ts @@ -7,8 +7,7 @@ describe("Image", async () => { const canvas = document.createElement("canvas"); const engine = await WebGLEngine.create({ canvas: canvas }); const webCanvas = engine.canvas; - webCanvas.width = 750; - webCanvas.height = 1334; + webCanvas.setResolution(750, 1334); const scene = engine.sceneManager.scenes[0]; const root = scene.createRootEntity("root"); diff --git a/tests/src/ui/Text.test.ts b/tests/src/ui/Text.test.ts index c00c3c2d6a..99c3299472 100644 --- a/tests/src/ui/Text.test.ts +++ b/tests/src/ui/Text.test.ts @@ -21,8 +21,7 @@ describe("Text", async () => { const canvas = document.createElement("canvas"); const engine = await WebGLEngine.create({ canvas: canvas }); const webCanvas = engine.canvas; - webCanvas.width = 750; - webCanvas.height = 1334; + webCanvas.setResolution(750, 1334); const scene = engine.sceneManager.scenes[0]; const root = scene.createRootEntity("root"); @@ -154,8 +153,7 @@ describe("Text - referenceResolutionPerUnit dirty propagation", async () => { const canvas = document.createElement("canvas"); const engine = await WebGLEngine.create({ canvas }); const webCanvas = engine.canvas; - webCanvas.width = 750; - webCanvas.height = 1334; + webCanvas.setResolution(750, 1334); const scene = engine.sceneManager.scenes[0]; const root = scene.createRootEntity("regression-root"); diff --git a/tests/src/ui/UICanvas.test.ts b/tests/src/ui/UICanvas.test.ts index aa8f70e866..5e534763c8 100644 --- a/tests/src/ui/UICanvas.test.ts +++ b/tests/src/ui/UICanvas.test.ts @@ -8,8 +8,7 @@ describe("UICanvas", async () => { const canvas = document.createElement("canvas"); const engine = await WebGLEngine.create({ canvas: canvas }); const webCanvas = engine.canvas; - webCanvas.width = 750; - webCanvas.height = 1334; + webCanvas.setResolution(750, 1334); const scene = engine.sceneManager.scenes[0]; const root = scene.createRootEntity("root"); diff --git a/tests/src/ui/UIEvent.test.ts b/tests/src/ui/UIEvent.test.ts index 982173e0a2..cbc87ba359 100644 --- a/tests/src/ui/UIEvent.test.ts +++ b/tests/src/ui/UIEvent.test.ts @@ -12,8 +12,7 @@ describe("UIEvent", async () => { const engine = await WebGLEngine.create({ canvas: canvasDOM }); const webCanvas = engine.canvas; - webCanvas.width = 300; - webCanvas.height = 300; + webCanvas.setResolution(300, 300); const scene = engine.sceneManager.scenes[0]; const root = scene.createRootEntity("root"); const inputManager = engine.inputManager; diff --git a/tests/src/ui/UIGroup.test.ts b/tests/src/ui/UIGroup.test.ts index 18d11056ce..93d30b420f 100644 --- a/tests/src/ui/UIGroup.test.ts +++ b/tests/src/ui/UIGroup.test.ts @@ -8,8 +8,7 @@ describe("UIGroup", async () => { const canvas = document.createElement("canvas"); const engine = await WebGLEngine.create({ canvas: canvas }); const webCanvas = engine.canvas; - webCanvas.width = 750; - webCanvas.height = 1334; + webCanvas.setResolution(750, 1334); const scene = engine.sceneManager.scenes[0]; const root = scene.createRootEntity("root"); diff --git a/tests/src/ui/UIInteractive.test.ts b/tests/src/ui/UIInteractive.test.ts index 0a11923bae..b44f7a50ec 100644 --- a/tests/src/ui/UIInteractive.test.ts +++ b/tests/src/ui/UIInteractive.test.ts @@ -31,8 +31,7 @@ describe("Button", async () => { const canvas = document.createElement("canvas"); const engine = await WebGLEngine.create({ canvas: canvas }); const webCanvas = engine.canvas; - webCanvas.width = 750; - webCanvas.height = 1334; + webCanvas.setResolution(750, 1334); const scene = engine.sceneManager.scenes[0]; const root = scene.createRootEntity("root"); diff --git a/tests/src/ui/UITransform.test.ts b/tests/src/ui/UITransform.test.ts index f835b82055..534f0f3927 100644 --- a/tests/src/ui/UITransform.test.ts +++ b/tests/src/ui/UITransform.test.ts @@ -1,18 +1,12 @@ import { WebGLEngine } from "@galacean/engine"; -import { - HorizontalAlignmentMode, - UICanvas, - UITransform, - VerticalAlignmentMode, -} from "@galacean/engine-ui"; +import { HorizontalAlignmentMode, UICanvas, UITransform, VerticalAlignmentMode } from "@galacean/engine-ui"; import { describe, expect, it } from "vitest"; describe("UITransform", async () => { const canvas = document.createElement("canvas"); const engine = await WebGLEngine.create({ canvas }); const webCanvas = engine.canvas; - webCanvas.width = 750; - webCanvas.height = 1334; + webCanvas.setResolution(750, 1334); const scene = engine.sceneManager.scenes[0]; const root = scene.createRootEntity("root"); @@ -321,9 +315,11 @@ describe("UITransform", async () => { const child = parent.createChild("stretch-child-manual"); const t = child.transform as UITransform; t.horizontalAlignment = HorizontalAlignmentMode.LeftAndRight; - t.alignLeft = 10; t.alignRight = 20; + t.alignLeft = 10; + t.alignRight = 20; t.verticalAlignment = VerticalAlignmentMode.TopAndBottom; - t.alignTop = 5; t.alignBottom = 15; + t.alignTop = 5; + t.alignBottom = 15; // Layout-driven size expect(t.size.x).to.eq(170); @@ -336,7 +332,6 @@ describe("UITransform", async () => { expect(t.size.y).to.eq(130); }); }); - }); it("widget changes reflect in worldPosition when parent moves", () => { @@ -375,9 +370,9 @@ describe("UITransform", async () => { const originX = testMatrix.elements[12]; const originY = testMatrix.elements[13]; const originZ = testMatrix.elements[14]; - const modifyX = testMatrix.elements[12] = originX + 50; - const modifyY = testMatrix.elements[13] = originY + 50; - const modifyZ = testMatrix.elements[14] = originZ + 50; + const modifyX = (testMatrix.elements[12] = originX + 50); + const modifyY = (testMatrix.elements[13] = originY + 50); + const modifyZ = (testMatrix.elements[14] = originZ + 50); childTransform.localMatrix = testMatrix; const actualMatrix = childTransform.localMatrix; expect(actualMatrix.elements[12]).to.not.eq(modifyX); @@ -449,7 +444,7 @@ describe("UITransform", async () => { originalTransform.alignLeft = 10; originalTransform.alignRight = 20; originalTransform.alignCenter = 5; - + originalTransform.verticalAlignment = VerticalAlignmentMode.TopAndBottom; originalTransform.alignTop = 15; originalTransform.alignBottom = 25; @@ -462,7 +457,7 @@ describe("UITransform", async () => { expect(clonedTransform.alignLeft).to.eq(10); expect(clonedTransform.alignRight).to.eq(20); expect(clonedTransform.alignCenter).to.eq(5); - + expect(clonedTransform.verticalAlignment).to.eq(VerticalAlignmentMode.TopAndBottom); expect(clonedTransform.alignTop).to.eq(15); expect(clonedTransform.alignBottom).to.eq(25); @@ -497,13 +492,13 @@ describe("UITransform", async () => { parent.addComponent(UICanvas); const parentTransform = parent.transform as UITransform; parentTransform.size.set(300, 200); - + const original = parent.createChild("original-behavior"); const originalTransform = original.transform as UITransform; - + originalTransform.horizontalAlignment = HorizontalAlignmentMode.Left; originalTransform.alignLeft = 20; - + const cloned = original.clone(); parent.addChild(cloned); const clonedTransform = cloned.transform as UITransform; @@ -518,4 +513,4 @@ describe("UITransform", async () => { enum UITransformModifyFlags { Size = 0x200, Pivot = 0x400 -} \ No newline at end of file +} diff --git a/tests/vitest.config.ts b/tests/vitest.config.ts index e6d2526da8..d6c396b06e 100644 --- a/tests/vitest.config.ts +++ b/tests/vitest.config.ts @@ -18,6 +18,7 @@ export default defineProject({ browser: { provider: "playwright", enabled: true, + screenshotFailures: false, instances: [ { browser: "chromium",