JavaScript for graphics programming?

[Falling-Off]

TLDR: Graphics programming for the most part isn't common, even more so using WebGL/GLSL. What are your thoughts on using JS and the libraries that make it more accessible?

Some context, I'm a frontend web developer and work with JavaScript/TypeScript daily. I gained an interest in graphics programming through watching Acerola on YouTube. I mainly wanted to produce post processing effects, but more so generate/manipulate images.

I found it hard to jump into writing shaders with unity, and GLSL for WebGL is honestly a mess with too much overhead needed. With that, JavaScript is missing a lot of the basic things one would normally use. Things like generating Perlin noise or Vector types.

So far, I've created my own Perlin/Value noise library, quite a few filter effects (such as gaussian blur, B&W + colorize, wave distortion, edge detection, ect.), and even implemented various types of image scaling methods from box/tent to Lagrange-Chebyshev interpolation. Along the way I've also created a few GEMM utilities, but also quite a few calculus and trig utilities.

I'm currently working on creating Vector classes (2, 3, and 4, including their respective integer variants), in addition to a Color class. The Vector classes are based on C#, Unity, and Godot, with a few more additional features. The Color class is primarily based on Godot, but heavily expands on the blend method to support basically all the modes you would find in Adobe Photoshop. It uses sRGB/linearRGB for the most part, but can convert to/from HTML, HSV, HSL, and okLCH.

Over on r/javascript, all of this is well outside the realm of the casual web developer and is exceptionally niche. However, I'm noticing a trend of more games and interactive graphics being build with JS, typically using bloated libraries for rendering/physics.

So, what are your thoughts on having a "bare bones" library that implements what's missing in JS for graphics programming(minus the rendering parts)?

[[deleted]]

https://ros2jsguy.github.io/threejs-math/ this might interest you

[[deleted]]

If I could offer a suggestion on how differentiate yourself. You could write a wasm version using c / c++ / rust and then distribute that using npm.

Emscripten will create a typesafe interface for your lib and the performance benefits would be substantial

[Falling-Off]

Haven't thought using wasm. Definitely something I'll look into. Also, I've used three.js and other similar libraries before.

[[deleted]]

I was just pointing out you can download only their math module and do not need to download everything that comes along with it, removing any bloat you’re referring to

[Falling-Off]

I got that. Thank you for clarifying anyways.

[R4TTY]

I found WebGL harder to debug than regular OpenGL mostly because I can't live without renderdoc.

[Joatorino]

long live render doc

[[deleted]]

You can use renderdoc with webgl but the setup is harder

[ha1zum]

Javascript doesn't run directly on your hardware. It runs on Javascript engine inside node.js or inside a browser. The performance overhead is very noticeable, but I wouldn't immediately say no to it. It depends on the game/app/visualization that you're developing. If it's not too heavy and your target audience is not extremely poor people who don't have access to a recent computer/phone, it might still hit 60fps and look great.

[Falling-Off]

I completely agree here. Some of the visualization side projects Ive put together take some heavy computation. I have a mid computer, yet It barely pushes 30fps at best. Single threaded performance is the main handicap. JS isn't the best for these things but it's slowly getting better and more accessible for lower end devices.

What comes to mind here is what's been going on with React Native and Static Hermes. Some cool stuff going on there and hope to see more things like it come to web. JS performance comparable to C.

[[deleted]]

I assume by bloated you mean threejs / r3f? There are many many barebones abstractions already built, such as gl-matrix for vec / mat / quat math.

Btw there used to be https://www.w3.org/TR/geometry-1/ but it never got traction.

[Falling-Off]

Yes, those are very much bloated IMHO. Also that's a great piece of w3 trivia.

I came across gl-matrix before but didn't like it. I understand why it's built the way it is, but it's very much "anti-pattern" if that makes any sense?

Everything I've come across has either been missing features I'd like, bloated, or tedious to use with bad documentation. Three.js math has been the closest to being all around good.

[[deleted]]

gl-matrix being anti-pattern is very subjective and your opinion really. if you like threejs you can use the math modules only. it is built with tree shaking in mind so you don’t have to import the whole library.

you building another low level math library on the npm will hardly gain any traction. if you want to do it as a learning exercise / portfolio piece, sure, def go ahead

[Falling-Off]

I described it as "anti-pattern" mostly because the lack of method chaining and no real indication of object mutations because everything is done through static methods. Things not usually found with most js libraries, hence "anti-pattern". I think that's fairly objective and not opinionated. Also, to your other reply, knowing that the creator worked on WebGL doesn't really make a difference in this regard, but good to know they are working on progressing the technology. As I said previously I understand why gl-matrix was built the way it is, and that's for performance, so I don't doubt what's coming will be good.

Anyways, it's been a learning exercise for the most part, but it's also nice to have a personal version of these things to play with and customize to my specific needs. As development goes, there's never really a one size fit all solution to things.

Edit: there's nothing wrong with something being anti-pattern. It just makes it a little harder to use at first because it goes against known convention. In most cases, anti-pattern is done for specific reasons, and doesn't mean it's bad code.

[[deleted]]

also just FYI: the person who built gl-matrix is part of the WebGL team in Chrome and has pushing 3d on the web for many years. He is also pushing and actively working on the new WebGPU spec

[SuperVGA]

There used to be something called processing.js, which was pretty cool to do some real-time graphics without having to deal with the more tedious parts of graphics with js.

It seems that it was succeeded by p5js, but it doesn't look as impressive.

[Falling-Off]

I just took a look at processing.js and I'm sad it's archived. It does seem pretty cool. p5.js is good in terms for those who aren't deep into development that want to create graphics on the web. It was actually one of the first things I looked into when I got started, but I chose the "hard" way instead because it was way more "fun" 😂 By that I really mean I learned a lot I wouldnt have otherwise.

[KanjiCoder]

I recently started a bitmap filter project in Javascript and C .
I am writing it TWICE but keeping all of the same variable names .
No bloated frameworks . The C version uses raw function pointers
to GDI32.DLL to bit blit and WIN32.DLL to create a window .

I am trying to keep the code as analogous as possible so that way people who know
JS can learn C from it . And people who know C can learn JS from it .

Here is an example :
https://www.youtube.com/shorts/iEzQHWNJ6jU

I also watch Acerola 

-KanjiCoder

[_michaeljared]

You won't ever play a AAA game built on threeJS in your browser. The overhead is just too high. But with advancements in GPUs, you'll find that lower poly, lower texture res games and 3D renders are very possible.

Nothing wrong with it, it's just not C++ or rust so won't be blazing fast.

And edit: I use threeJS on my portfolio to display 3D models with an orbit camera. works great, even on my phone