Frameworks for game-style UI with WebGL?

Question

I'm at the point where I am starting to write shaders to do custom effects in WebGL, such as combining a left and a right image to make an anaglyph image.What I'm thinking about next is about how to make "game like" UIs on the web for desktop and mobile. Some things that I am inspired by are:(1) The Playstation 3 interface https://en.wikipedia.org/wiki/XrossMediaBar(2) Interfaces in video games for viewing a database or documentation about the game world. I'd like to make something similar but for some part of the real world.The Pok&eacute;dex from Pok&eacute;mon is a familiar example but it's not such a good one because Pok&eacute;mon games mostly run on low-spec handhelds, so I am thinking more about what you'd see on a PC or TV console games... But instead of using a game controller you'd be using the touchscreen, mouse or keyboard.(3) However I very much like how games for the Nintendo DS/3DS use the touchscreen such as peeling stickers in Paper Mario Sticker Star and how you can make Luigi fight in the boss battles in Mario and Luigi Dream Team. So some advanced capability for touch gestures is wanted.I'd prefer programming in Javascript, could accept Typescript but it would be a hard sell if it (say) compiled something else to WebAssembly unless that came with awesome capabilities.

theschwa · Accepted Answer

I think you can do a lot of this with React-three-fiber:https://docs.pmnd.rs/react-three-fiber/getting-started/intro... in combination with React-three-flex: https://github.com/pmndrs/react-three-flex . React-three-fiber lets you make three.js components in react, and react-three-flex will let you do flexbox style layouts to make interesting UIs. You still get all of the capabilities of three.js with a lot of the plumbing done for you. Check out the examples from react-three-flex for some examples close to what it sounds like you want to achieve.

JLCarveth · Answer

Not entirely sure if this is what you're looking for, but there was a thread here yesterday with links to several CSS libraries that emulate various UIs, notably library to emulate the Sony PS1 and another for the NES.[0] - https://news.ycombinator.com/item?id=32430061

exz · Answer

WebGL Game Frameworks: https://phaser.io/ https://pixijs.com/Game Engines: https://godotengine.org/ https://ctjs.rocks/ https://defold.com/ https://unity.com/

Frameworks for game-style UI with WebGL?

Not entirely sure if this is what you're looking for, but there was a thread here yesterday with links to several CSS libraries that emulate various UIs, notably library to emulate the Sony PS1 and another for the NES.
[0] - https://news.ycombinator.com/item?id=32430061

WebGL Game Frameworks: https://phaser.io/ https://pixijs.com/
Game Engines: https://godotengine.org/ https://ctjs.rocks/ https://defold.com/ https://unity.com/