WebGL or Three.js for faster 2D rendering?

[MrBurda]

Hello :). Warn: Question could be dumb. tl;dr: If I want to harvest the power of GPU for a low-level 2D rendering, should I use WebGL, three.js, or something similar? Or Pixi.js is the way? Other options?

Version with redundant personal information: I've been making this rendering/animation engine for pixel-art, which I intend to integrate in different projects... It has simple vector animation ui and simple script lang, for converting from vec to pixelated graphics and applying pixel-wise transformations. And now I need to draw these big "pixels" fast. Also the task of creating pixel texture and filling a triangular region with it is at hand. Also custom shaders, programmable from my lang. And that's the end of my ambitions at the moment.. What should I use to GPU this?

I learned a little Pixi.js, but it seems a little high level (?). As I understand it, WebGL is the ultimate low-level answer to GPU questions.. I just need to draw big squares and textures... Creating custom shaders would be awesome too. 

(Is the whole project stupid?) I have this problem (with ego?) of building everything from scratch, no engines etc. And as a result a heap of unfinished projects with years of dev behind them. HELP! One of the first forum questions for me.. have mercy. ?

[b10b]

For WebGL 2D my simple opinion would be "PixiJS is the way".  Easy to work with, performant, adaptable, somewhat lightweight, well adopted (good support and well documented), doesn't get in the way of your own opinions on how to structure a game.  I can't imagine how much effort it would be to develop something comparable, then convince enough strangers to adopt it so that you can strike up a conversation about whatever issue you're having and have someone contribute for the fun of it.  It's slick and makes game dev fun.

[8Observer8]

If you use pure WebGL instead of Three.js/Babylon.js you should make some things from scratch like a skeleton animation. It requires some time. But every way has their own cons and props. You will understand math better, will have more control, and will more independent. I study pure WebGL with glMatrix and physics engines (like Planck.js (Box2D), Ammo.js (Bullet Physics), Matter.js, and Cannon-es) for 2D and 3D games. My favorite books are:

• WebGL Programming Guide. Matsuda & Lea (I placed all examples on JSFiddle here)
• Build Your Own 2D Game Engine and Create Great Web Games: Using HTML5, JavaScript, and WebGL

Run this demo in browser by click

Edited April 14, 2022 by 8Observer8

[Charles Augeard]

Hi,

You can find ideas in my sample for webgl 2d:

http://punkcoders.free.fr/glbm/ 

[MrBurda]

Thanks, that was very valuable! I explored the sample, great. I'm doing the project in pure WebGL for now, then at some point I will look how much PIXI can simplify stuff.