Help - Pixi.JS

[FlokiTV]

I'm working on game with pixi, based on webgl 2
I can run my project on this environment?
Now I'm using Electron to do this

[raub]

Hello. I've never tried running pixi with this environment. It should be possible, but may take some tweaking.

If you are comfortable with Electron, you should probably stick to it. Because it has HTML and stuff. The only thing why you would like to use Node3D is GPGPU interop between OpenGL and CUDA/OpenCL.

[FlokiTV]

Yes, I'm developing 2D games with sprite stack tecnic, this is a lot of math for canvas or DOM.
At first a made this https://codepen.io/FlokiTV/pen/WNRedMd

So, I found PixiJS and working on this https://www.youtube.com/watch?v=AHIlnUA3IxM

With Webgl2 and a GPU, on browser works fine, I'm looking for a good alternative to port my game with out implement a full browser like Electron

[FlokiTV]

You can show me a simple example to I can start? ( Node3D )

[raub]

If it helps... As I've mentioned, there is a number of extra hacks involved. I got it working with the current versions of the libraries.

npm init -g
npm i 3d-core-raub pixi.js

And I used this example https://pixijs.io/examples/#/demos-basic/container.js

const init = require('3d-core-raub');
global.self = global;

const { loop, canvas, Image, webgl, doc } = init();

global.self.WebGLRenderingContext = webgl.WebGLRenderingContext;
global.self.addEventListener = doc.addEventListener.bind(doc);
global.self.removeEventListener = doc.removeEventListener.bind(doc);
webgl.getContextAttributes = () => ({ stencil: true });
webgl.isContextLost = () => false;
webgl.getInternalformatParameter = () => 1;

Image.prototype.fillRect = () => {};

const createOld = doc.createElement.bind(doc);
doc.createElement = (name) => {
    if (name === 'div' || name === 'a') {
        return { style: {} };
    }
    return createOld(name);
};

Object.defineProperty(Image.prototype, 'onerror', {
    get() { return this.listeners('error'); },
    set(cb) { cb ? this.on('error', cb) : this.removeAllListeners('error'); },
});
Object.defineProperty(Image.prototype, 'onload', {
    get() { return this.listeners('load'); },
    set(cb) { cb ? this.on('load', cb) : this.removeAllListeners('load'); },
});

const enforceF32 = v => v instanceof Array ? new Float32Array(v) : v;
const _bufferSubData = webgl.bufferSubData;
webgl.bufferSubData = (target, offset, v) => {
	if (v instanceof ArrayBuffer) {
		v = new Float32Array(v);
	}
	return _bufferSubData(target, offset, enforceF32(v));
};


// based on https://pixijs.io/examples/#/demos-basic/container.js

const PIXI = require('pixi.js');
const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
    view: canvas,
});

const container = new PIXI.Container();

app.stage.addChild(container);

// Create a new texture
const texture = PIXI.Texture.from('https://pixijs.io/examples/examples/assets/bunny.png');

// Create a 5x5 grid of bunnies
for (let i = 0; i < 25; i++) {
    const bunny = new PIXI.Sprite(texture);
    bunny.anchor.set(0.5);
    bunny.x = (i % 5) * 40;
    bunny.y = Math.floor(i / 5) * 40;
    container.addChild(bunny);
}

// Move container to the center
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;

// Center bunny sprite in local container coordinates
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;

// Listen for animate update
app.ticker.add((delta) => {
    // rotate the container!
    // use delta to create frame-independent transform
    container.rotation -= 0.01 * delta;
});

Pixi seems to rely heavily on Canvas and DOM, so I can't tell how much tampering will it take to get more sophisticated demos working. In the end it might be a good idea to use Electron for your project, because why not.

In my previous message I've already mentioned a very specific thing 3d-core-raub was designed for - GL interop: https://docs.nvidia.com/cuda/cuda-runtime-api/group__CUDART__OPENGL.html and https://software.intel.com/content/www/us/en/develop/articles/opencl-and-opengl-interoperability-tutorial.html . I guess you don't really need those, and it kind of loses the point.

[FlokiTV]

Really thanks for you time