GL works, GPU bugs

pixijs-userland · Mar 24, 2024 · 71e4549 · 71e4549
1 parent 0a294a1
commit 71e4549
Show file tree

Hide file tree

Showing 9 changed files with 314 additions and 426 deletions.
diff --git a/examples/demo/main.js b/examples/demo/main.js
@@ -3,6 +3,15 @@
  * Created by Liza on 30.10.2015.
  */
 
+function getOptionValue(name) {
+    var params = location.search.slice(1).split('&');
+    for (var i=0;i<params.length;i++) {
+        if (params[i].substring(0, name.length) === name && params[i][name.length] === "=") {
+            return params[i].substring(name.length+1);
+        }
+    }
+    return null;
+}
 
 var _renderer;
 var rpgMakerLoader = requireRpgMaker();
@@ -14,74 +23,59 @@ var resolution = +(getOptionValue('resolution') || window.devicePixelRatio);
 var ratio = window.devicePixelRatio / resolution;
 
 PIXI.tilemap.Constant.boundCountPerBuffer = 4;
-// or
+
+window.go = async () => {
+    // or
 // PIXI.tilemap.Constant.maxTextures = 16;
 // both are fine for RMMV
 
-function resizeTilemap() {
-    if (!tilemap) return;
-    tilemap.width = (_renderer.width + 2*tilemap._margin) * scale;
-    tilemap.height = (_renderer.height + 2*tilemap._margin) * scale;
-    stage.scale.x = 1.0/scale;
-    stage.scale.y = 1.0/scale;
-    stage.filterArea = new PIXI.Rectangle(0, 0, _renderer.width*scale, _renderer.height*scale);
-}
+    function resizeTilemap() {
+        if (!tilemap) return;
+        tilemap.width = (_renderer.width + 2*tilemap._margin) * scale;
+        tilemap.height = (_renderer.height + 2*tilemap._margin) * scale;
+        stage.scale.x = 1.0/scale;
+        stage.scale.y = 1.0/scale;
+        stage.filterArea = new PIXI.Rectangle(0, 0, _renderer.width*scale, _renderer.height*scale);
+    }
 
-function resize() {
-    var r = ratio;
-    _renderer.resize(window.innerWidth * r | 0, window.innerHeight * r | 0);
-    resizeTilemap();
-}
+    function resize() {
+        var r = ratio;
+        _renderer.resize(window.innerWidth * r | 0, window.innerHeight * r | 0);
+        resizeTilemap();
+    }
 
-function getOptionValue(name) {
-    var params = location.search.slice(1).split('&');
-    for (var i=0;i<params.length;i++) {
-        if (params[i].substring(0, name.length) === name && params[i][name.length] === "=") {
-            return params[i].substring(name.length+1);
-        }
-    };
-    return null;
-};
-
-function isOptionValid(name) {
-    return location.search.slice(1).split('&').indexOf(name) >= 0;
-};
-
-function setupView() {
-    var backCanvas = document.querySelector('#backCanvas');
-    if (isOptionValid('canvas'))
-        _renderer = new PIXI.CanvasRenderer({width: backCanvas.width, height: backCanvas.height, view: backCanvas, resolution: resolution, antialias: 1, autoresize: true});
-    else
-        _renderer = PIXI.autoDetectRenderer({width: backCanvas.width, height: backCanvas.height, view: backCanvas, resolution: resolution, antialias: 1, autoresize: true});
-    resize();
-    window.addEventListener('resize', resize)
-}
+    function isOptionValid(name) {
+        return location.search.slice(1).split('&').indexOf(name) >= 0;
+    }
 
-function setupGame() {
-    requestAnimationFrame(update);
-    rpgMakerLoader.load('Map001', function(err, map) {
-        if (err) return;
-        tilemap = map;
-        tilemap.roundPixels = (scale==1);
-        stage = new PIXI.Container();
-        stage.addChild(tilemap);
-        resizeTilemap();
+    const app = new PIXI.Application();
+
+    await app.init({
+        preference: isOptionValid('webgpu') ? 'webgpu' : 'webgl',
+        hello: true,
+        resizeTo: window
     });
-}
 
-//window.requestAnimationFrame = function(cb) {
-//    return setTimeout(cb, 500);
-//}
+    const _renderer = app.renderer;
 
-var dt = 0, last = 0, animTime = 0;
+    document.body.appendChild(app.canvas);
 
-function update() {
-    var now = Date.now();
-    var dt = Math.min(1000, now-last);
-    dt/=1000;
-    last = now;
+    const tilemap = await rpgMakerLoader.load('Map001');
+    tilemap.roundPixels = (scale === 1);
+    stage = app.stage;
+    stage.addChild(tilemap);
+    resizeTilemap();
+
+    app.ticker.add(update);
+
+    var dt = 0, last = 0, animTime = 0;
+
+    function update() {
+        var now = Date.now();
+        var dt = Math.min(1000, now-last);
+        dt/=1000;
+        last = now;
 
-    if (stage) {
         tilemap.update();
 
         var dt2 = dt;
@@ -101,17 +95,7 @@ function update() {
         animTime += dt2;
         tilemap.origin.x = x2;
         tilemap.origin.y = y2;
-        _renderer.render(stage);
-        // WebGL fix for some devices
-        if (_renderer.gl) {
-            _renderer.gl.flush();
-        }
-    }
-    requestAnimationFrame(update);
-}
 
-
-window.go = function () {
-    setupView();
-    setupGame();
+        tilemap.updateTransformTick()
+    }
 }