Toggling from OpenGLRenderer to Cairo or Canvas Renderer

Cheemsandfriends · October 28, 2023, 5:46pm

I always wondered,
In OpenFL there are two types of renderers: GPU based (OpenGL) and CPU based (Cairo/Canvas)
I wanted to know, is there a way to toggle everything to be only with the CPU, or are they meant to compliment each other in certain ways?

nanjizal · October 29, 2023, 2:18am

I experimented with drawing on lime quite awhile ago. My approach was to extend the Lime Application class ( details may well have changed ).

github.com

nanjizal/kitGL/blob/master/src/kitGL/glLime/setup/MainLime.hx

package kitGL.glLime.setup;

import lime.graphics.RenderContext;
import lime.graphics.WebGLRenderContext;
import lime.app.Application;
import kitGL.glLime.setup.IAppGL;
import kitGL.glLime.setup.NonGL;
class MainLime extends Application {
    var ready: Bool = false;
    var runSeconds: Float = 0; // maybe delay to start.
    var other: NonGL;
    var appGL: IAppGL;
    var width: Int;
    var height: Int;
    // need to define this
    public var appCreate: ( width: Float, heigh: Float )-> IAppGL;
    public function new() {
        super();
    }
    public override

This file has been truncated. show original

as you can see OpenFL/Lime provides ‘context’ so to use WebGL and Canvas context you would likely need to setup two contexts.
You can see I use the GL context here

github.com

nanjizal/kitGL/blob/master/src/kitGL/glLime/Ply.hx

package kitGL.glLime;

import lime.graphics.RenderContext;
import lime.graphics.WebGLRenderContext;
//import lime.Assets;
//import lime.utils.AssetType;
import lime.utils.Float32Array;
import lime.utils.UInt16Array;
import lime.math.Matrix4;
import lime.graphics.opengl.GLProgram;

import kitGL.glLime.Shaders;
import kitGL.glLime.HelpGL;
import kitGL.glLime.BufferGL;
import kitGL.glLime.setup.IAppGL;
import lime.graphics.opengl.GLBuffer;

class Ply implements IAppGL{
    var program: GLProgram;
    public var dataGL: DataGL;

This file has been truncated. show original

You can compare with NME which probably only use GL context so can extend the Application without context switches.

github.com

nanjizal/kitGL/blob/master/src/kitGL/glNme/Ply.hx

package kitGL.glNme;
import nme.app.NmeApplication;
import nme.app.Window;
import nme.gl.GL;
import nme.gl.GLProgram;
import nme.gl.GLBuffer;
//import nme.gl.Utils;
import kitGL.nme.BufferGL;
import kitGL.nme.ColorPositions;
import kitGL.nme.HelpGL;
import kitGL.nme.Shaders;


class Ply extends NmeApplication {
   var valid:Bool;
   var program: GLProgram;
   public var buf:    GLBuffer;
   public var dataGL: DataGL;
   public
   function new( window: Window ){

This file has been truncated. show original

With flash you would often share stage3D context with away3D/starling/feathers and have a cpu context, or even more but essentially I seem to remember you could have a front and back GPU layer and middle layer was normally CPU dynamic and timeline, but it got quite complex. Old article on flash MX talking about depths.
https://www.senocular.com/flash/tutorials/depths/?page=2

Cairo was for c# from my understanding and that is a lower tier haxe target, it can’t do Barycentric triangle distortions so it’s limited to mostly non 3D as you need 3D image distortions . I believe that you don’t really need Cairo it’s not important - was it because of Blackberry mobile support more than anything?

So ignoring flash ( AIR ) that leaves mostly GPU rendering for JS and C++, but via bitmaps stuff can be done with graphics and CPU and then drawn on a GPU context as an image.

The CPU modes seem to be
CAIRO, CANVAS, DOM, FLASH

DOM is really a fallback mode, so that just leaves CANVAS, I am not sure how OpenFL uses Canvas but Canvas internally uses WebGL in the browser?

So each context is a layer or depth. If you use Kha it has Graphics2 and Graphics4 you can draw one as an image on another to mix but it is normally GL.

Not sure if that really answers your question, but NME seems to just use GL context ( c++ ) on JS and C++. So perhaps only GL context is really relevant in the future? But think of graphics layers or dom layers for the GL or CPU you can use a renderTexture to draw one on the other but otherwise they are different.

You can force pure DOM, CANVAS or WebGL context for html target, but it is probably just use Stage3D and normal openfl.display.Sprites for CPU and GPU differences, and ignore Cairo as it is limiting and haxe c# is not priority haxe target.

I applogise for all errors in my limited understanding but maybe some gives insight.

joshtynjala · October 30, 2023, 3:43pm

Add the cairo define to force the software renderer on native targets.

<define name="cairo" unless="html5"/>

Add the canvas define to force the software renderer on the html5 target.

<define name="canvas" if="html5"/>

html5 also has an optional DOM renderer, using the dom define (don’t combine canvas and dom in the same project, though!).

<define name="dom" if="html5"/>

chokito · October 30, 2023, 4:06pm

The DOM renderer seems so “magical” to me… (just commenting)