Orillusion / orillusion

Orillusion is a pure Web3D rendering engine which is fully developed based on the WebGPU standard.
https://www.orillusion.com
MIT License
4.98k stars 621 forks source link

[BUG]: 在使用自定义canvas时,canvas会自己自动变得很大,无法修改 #159

Closed FliPPeDround closed 1 year ago

FliPPeDround commented 1 year ago

Bug描述

在使用自定义canvas时,canvas会自己自动变得很大,无法修改

const canvas = document.getElementById('canvas')
await Engine3D.init({
   canvasConfig: { canvas }
})

Bug复现流程

const canvas = document.getElementById('canvas')

期待的结果

简介明要的阐述你期待发生什么结果

报错截图

如果可以,提供发生错误的截图

测试引擎版本:

本地运行出错的Orillusion引擎版本, e.g. 0.6.1

本机系统 (请填写完整):

代码示例

https://codepen.io/FliPPeDround/pen/mdzzBBJ

其他信息

添加关于bug的其他描述信息

lslzl3000 commented 1 year ago

Screenshot 2023-05-18 at 13 01 18

我这里测试正常,不加css的话 canvas 是默认大小,没有发现自己变大的情况 如果需要自定义大小,可以通过 css 改变 canvas 大小:

Screenshot 2023-05-18 at 13 02 59

FliPPeDround commented 1 year ago

动画

我确实遇到了这个问题,在其他电脑上也复现了,我还需要提供什么信息可以帮助排除这个问题

image

lslzl3000 commented 1 year ago

@FliPPeDround 已排查到问题所在,主要是没有手动规范canvas的css大小,在dpr不等于1的屏幕上会导致canvas会根据内容大小resize,从而循环触发resize越来越大。

目前来讲,请手动设置一个 css 来规范canvas style 的 width 和 height,不要使用默认值(即无style width height) 我们后面会优化resize的方案,避免这种情况

lslzl3000 commented 1 year ago

已在 #163 中修复canvas无默认大小的情况,会跟随下个版本发布