fix: render

docs/src/render.ts

@@ -4,35 +4,67 @@ import { render } from '../../src'
 async function init(): Promise<void> {
   fonts.fallbackFont = await fonts.load({ family: 'fallbackFont', src: '/fonts/AaHouDiHei.woff' })
 
-  document.body.append(
-    await render({
-      data: [
-        {
-          tag: 'Image2D',
-          props: {
-            style: { left: 0, top: 0, width: 100, height: 100 },
-            src: '/example.jpg',
-          },
+  render({
+    debug: true,
+    data: [
+      {
+        tag: 'Image2D',
+        props: {
+          style: { left: 0, top: 0, width: 100, height: 100 },
+          src: '/example.jpg',
         },
-        {
-          tag: 'Image2D',
-          props: {
-            style: { left: 100, top: 100, width: 100, height: 100 },
-            src: '/example.jpg',
-          },
+      },
+      {
+        tag: 'Image2D',
+        props: {
+          style: { left: 100, top: 100, width: 100, height: 100 },
+          src: '/example.jpg',
         },
-        {
-          tag: 'Text2D',
-          props: {
-            style: { left: 200, top: 200, width: 100, height: 100 },
-            content: '/example.jpg',
-          },
+      },
+      {
+        tag: 'Text2D',
+        props: {
+          style: { left: 200, top: 200, width: 100, height: 100 },
+          content: '/example.jpg',
         },
-      ],
-      width: 500,
-      height: 500,
-    }),
-  )
+      },
+    ],
+    width: 500,
+    height: 500,
+  }).then((res) => {
+    document.body.append(res)
+  })
+
+  render({
+    debug: true,
+    data: [
+      {
+        tag: 'Image2D',
+        props: {
+          style: { left: 0, top: 0, width: 100, height: 100 },
+          src: '/example.jpg',
+        },
+      },
+      {
+        tag: 'Image2D',
+        props: {
+          style: { left: 100, top: 100, width: 100, height: 100 },
+          src: '/example.jpg',
+        },
+      },
+      {
+        tag: 'Text2D',
+        props: {
+          style: { left: 200, top: 200, width: 100, height: 100 },
+          content: '/example.jpg',
+        },
+      },
+    ],
+    width: 150,
+    height: 150,
+  }).then((res) => {
+    document.body.append(res)
+  })
 }
 
 init()

src/Engine.ts

@@ -181,8 +181,9 @@ export class Engine extends SceneTree {
   }
 
   async waitAndRender(delta = 0): Promise<void> {
+    await assets.waitUntilLoad()
     this._process(delta)
-    await this.waitUntilLoad()
+    await this.nextTick()
     this._render(this.renderer)
   }
 

src/core/renderer/webgl/modules/WebGLFramebufferModule.ts

@@ -301,8 +301,8 @@ export class WebGLFramebufferModule extends WebGLModule {
       this._renderer.viewport.bind({
         x: 0,
         y: 0,
-        width: this._renderer.screen.width,
-        height: this._renderer.screen.height,
+        width: this._renderer.screen.width * this._renderer.pixelRatio,
+        height: this._renderer.screen.height * this._renderer.pixelRatio,
       })
     }
   }

src/render.ts

@@ -5,6 +5,7 @@ export interface RenderOptions {
   data: Record<string, any> | Node | (Node | Record<string, any>)[]
   width: number
   height: number
+  debug?: boolean
   time?: number
   onBeforeRender?: (engine: Engine) => void | Promise<void>
 }
@@ -36,12 +37,16 @@ async function start(sleep = 100): Promise<void> {
 }
 
 async function task(options: RenderOptions): Promise<HTMLCanvasElement> {
-  const { data, width, height, time = 0 } = options
-
-  engine ??= new Engine({ width: 1, height: 1 })
+  const { data, width, height, debug = false, time = 0 } = options
+  engine ??= new Engine({
+    width: 1,
+    height: 1,
+    preserveDrawingBuffer: true,
+  })
+  engine.debug = debug
   engine.root.removeChildren()
   engine.timeline.currentTime = time
-  engine.resize(width, height)
+  engine.resize(width, height, true)
   ;(Array.isArray(data) ? data : [data]).forEach((v) => {
     if (v instanceof Node) {
       engine!.root.appendChild(v)

src/scene/main/Node.ts

@@ -6,7 +6,9 @@ import type {
   InputEventKey,
   InputEventMap,
   Maskable,
-  WebGLRenderer } from '../../core'
+  PropertyDeclaration,
+  WebGLRenderer,
+} from '../../core'
 import type { SceneTree } from './SceneTree'
 import type { Viewport } from './Viewport'
 import { clamp,
@@ -227,6 +229,16 @@ export class Node extends CoreObject {
     }
   }
 
+  protected override _update(changed: Map<PropertyKey, any>): void {
+    this._tree?.log(this.name, 'updating')
+    super._update(changed)
+  }
+
+  protected override _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void {
+    this._tree?.log(this.name, `updating [${String(key)}]`)
+    super._updateProperty(key, value, oldValue, declaration)
+  }
+
   protected _onTreeEnter(tree: SceneTree): void {
     this._treeEnter(tree)
     this.emit('treeEntered', tree)

src/scene/main/SceneTree.ts

@@ -89,14 +89,12 @@ export class SceneTree extends MainLoop {
 
   protected _renderScreen(renderer: WebGLRenderer): void {
     renderer.state.reset()
-    const { pixelRatio } = renderer
-    const { width, height } = this.root
     renderer.framebuffer.bind(null)
     renderer.viewport.bind({
       x: 0,
       y: 0,
-      width: width * pixelRatio,
-      height: height * pixelRatio,
+      width: this.root.width * renderer.pixelRatio,
+      height: this.root.height * renderer.pixelRatio,
     })
     if (this.backgroundColor) {
       renderer.gl.clearColor(...this._backgroundColor.toArray())

src/scene/main/Viewport.ts

@@ -129,8 +129,8 @@ export class Viewport extends Node implements Rectangulable {
     if (this.valid) {
       renderer.flush()
       this._tree?.setCurrentViewport(this)
-      renderer.framebuffer.bind(this._glFramebuffer(renderer))
       this.upload(renderer)
+      renderer.framebuffer.bind(this._glFramebuffer(renderer))
       return true
     }
     return false