Renderer

[Brackets-Coder]

• Create a working drawable canvas
• Ensure consistent performance across various runtime framerates
• Ensure consistent performance across reasonable stage resolutions (very large resolutions may cause texture update lag)
• Support high-quality pen
• Try to break it and make sure it's stable

[astruegenius]

Try to break it and make sure it's stable

This is really something that we should do once we have a basic set of blocks.

[Civ3ro]

About hqp. Changing the pixelScale has the same effect. Take a look:
pixelScale = 1

pixelScale = 3

So we can check if hqp is activated and just change the pixelScale and then resize()

Oh, the images are with antialias: false,

Scratch.vm.renderer.setUseHighQualityRender = function(state) {
  Scratch.vm.renderer.setUseHighQualityRender.call(Scratch.vm.renderer, state);
  console.log("Renderer quality changed!", state);
};

[Brackets-Coder]

Take a look at brackets/three, I don't remember how that one handles hqpen but I think it does

[Brackets-Coder]

    resizeCanvas() {
      let w, h;
      if (this._renderer.useHighQualityRender) {
        w = this._renderer.canvas.width;
        h = this._renderer.canvas.height;
      } else {
        [w, h] = this._nativeSize;
      }
    
      this._canvas.width = w;
      this._canvas.height = h;
    
      this.threeRenderer.setSize(w, h);
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
    
      this.updateContent();
    }
  
    onNativeSizeChanged(event) {
      this._nativeSize = event.newSize;
      this._rotationCenter = [this._nativeSize[0] / 2, this._nativeSize[1] / 2];
      this.resizeCanvas();
    }

[Civ3ro]

So it works? Wait let me check it

[Brackets-Coder]

So it works? Wait let me check it

Kind of, it does scale when HQPen is enabled but it does get pretty inconsistent in performance—which is why I initially liked your drawable class better than mine. We just have to figure it out

[Civ3ro]

Yeah, it works. Only after going in and out of fullscreen.
Not an issue, or maybe?

[Civ3ro]

What does hpq really do? It just makes it look better by scaling the pixels for the stage canvas.
So... why dont we go with the pixelScale thing

[Brackets-Coder]

why dont we go with the pixelScale thing

You could, and tying it into a block might potentially give the user more control over the performance/quality ratio. However, you must understand that HQPen is really more complicated than a simple "scaling". The stage's runtime width and height is very different than the actual canvas pixel size. HQPen makes it so that pen drawings draw at the resolution of the canvas size, not the runtime size. That can fluctuate wildly based on whether the user is in fullscreen, small stage mode, or if a third party extension controls the canvas size. It would be better if we kept pixelScale as a multiplier and left the VM to do the heavy lifting for deciding the proper resolution

[Civ3ro]

Okay.

Well, to save the test i made somewhere:

let pixelScale = renderer.useHighQualityRender ? 2 : 1;

---

const originalHQP = Scratch.vm.renderer.setUseHighQualityRender;

    Scratch.vm.renderer.setUseHighQualityRender = function(state) {
      originalHQP.call(Scratch.vm.renderer, state);
      
      pixelScale = state ? 2 : 1;
      resize();
      console.log("HQP toggled!", pixelScale);
    };

This did not work 100%.
Made the canvas resize and set the center to a corner when hqp.

[Brackets-Coder]

This did not work 100%.

Like I said, supporting HQPen is difficult but necessary. I'll have to help you sometime soon but can't at the moment—maybe give me a few hours or till tomorrow? Thanks so much!

[Civ3ro]

OMG

I think i have it.

All that's left is to detect when going fullscreen! Or stage simply changes its real size (576x432), not the "scale" size (480x360).