From 09ea76aa14f3f96b16328ca0badc7399cfcc2043 Mon Sep 17 00:00:00 2001 From: Davide Tantillo Date: Tue, 23 Jul 2024 14:31:17 +0200 Subject: [PATCH] [ts] poc wegl overlay --- spine-ts/spine-webgl/example/canvas.html | 380 ++++++++++++++++++++++ spine-ts/spine-webgl/example/canvas2.html | 187 +++++++++++ spine-ts/spine-webgl/src/SceneRenderer.ts | 2 +- spine-ts/spine-webgl/src/SpineCanvas.ts | 15 +- 4 files changed, 577 insertions(+), 7 deletions(-) create mode 100644 spine-ts/spine-webgl/example/canvas.html create mode 100644 spine-ts/spine-webgl/example/canvas2.html diff --git a/spine-ts/spine-webgl/example/canvas.html b/spine-ts/spine-webgl/example/canvas.html new file mode 100644 index 000000000..065ce0360 --- /dev/null +++ b/spine-ts/spine-webgl/example/canvas.html @@ -0,0 +1,380 @@ + + + + + + OverlayCanvas Example + + + + + + +
+

OverlayCanvas Example

+ +

Scroll down to div.

+ +
+ +
+

Spine Box 1

+
+ +
+ +
+

Spine Box 2

+
+ +
+ +
+

Raptor Box

+
+ +
+ +
+

Celeste Box

+
+ +

End of content.

+
+ + + + \ No newline at end of file diff --git a/spine-ts/spine-webgl/example/canvas2.html b/spine-ts/spine-webgl/example/canvas2.html new file mode 100644 index 000000000..769dd2648 --- /dev/null +++ b/spine-ts/spine-webgl/example/canvas2.html @@ -0,0 +1,187 @@ + + + + + + OverlayCanvas Example + + + + + + + +
+

OverlayCanvas Example

+ +

Scroll down to div.

+ +
+ +
+

Spine Box 1

+
+ +
+ +
+

Spine Box 2

+
+ +
+ +
+

Spine Box 3

+
+ +
+ +
+

Raptor Box

+
+ +
+ +
+

Celeste Box

+
+ +

End of content.

+
+ + + + \ No newline at end of file diff --git a/spine-ts/spine-webgl/src/SceneRenderer.ts b/spine-ts/spine-webgl/src/SceneRenderer.ts index c4e4c9bc1..652e8e0fb 100644 --- a/spine-ts/spine-webgl/src/SceneRenderer.ts +++ b/spine-ts/spine-webgl/src/SceneRenderer.ts @@ -82,7 +82,7 @@ export class SceneRenderer implements Disposable { } begin () { - this.camera.update(); + // this.camera.update(); this.enableRenderer(this.batcher); } diff --git a/spine-ts/spine-webgl/src/SpineCanvas.ts b/spine-ts/spine-webgl/src/SpineCanvas.ts index e11f67c1f..31500fdd4 100644 --- a/spine-ts/spine-webgl/src/SpineCanvas.ts +++ b/spine-ts/spine-webgl/src/SpineCanvas.ts @@ -76,6 +76,9 @@ export class SpineCanvas { /** The input processor used to listen to mouse, touch, and keyboard events. */ readonly input: Input; + public reqAnimationFrameId?:number; + public loop: FrameRequestCallback; + private disposed = false; /** Constructs a new spine canvas, rendering to the provided HTML canvas. */ @@ -93,16 +96,16 @@ export class SpineCanvas { this.htmlCanvas = canvas; this.context = new ManagedWebGLRenderingContext(canvas, config.webglConfig); - this.renderer = new SceneRenderer(canvas, this.context); + this.renderer = new SceneRenderer(canvas, this.context, false); this.gl = this.context.gl; this.assetManager = new AssetManager(this.context, config.pathPrefix); this.input = new Input(canvas); if (config.app.loadAssets) config.app.loadAssets(this); - let loop = () => { + this.loop = () => { if (this.disposed) return; - requestAnimationFrame(loop); + this.reqAnimationFrameId = requestAnimationFrame(this.loop); this.time.update(); if (config.app.update) config.app.update(this, this.time.delta); if (config.app.render) config.app.render(this); @@ -115,13 +118,13 @@ export class SpineCanvas { if (config.app.error) config.app.error(this, this.assetManager.getErrors()); } else { if (config.app.initialize) config.app.initialize(this); - loop(); + this.loop(0); } return; } - requestAnimationFrame(waitForAssets); + this.reqAnimationFrameId = requestAnimationFrame(waitForAssets); } - requestAnimationFrame(waitForAssets); + this.reqAnimationFrameId = requestAnimationFrame(waitForAssets); } /** Clears the canvas with the given color. The color values are given in the range [0,1]. */