Creating a DOOM-inspired aesthetic with PlayCanvas | Hacker News Reader

Creating a DOOM-inspired aesthetic with PlayCanvas

omarshehata.me

80 pointsOmarShehata14 comments

That raw PNG data doesn't make it into a canvas via the canvas 2D API is not a bug, as pointed out in the responses in the bug report. It's the way the 2D canvas API has always been.

WebGL on the other hand, has the option to tell the browser not to apply colorspace info or whatever other tweaks the browser would usually to do the data so if you want to read a PNG raw you can load it as a texture, attach it to a framebuffer, and call readPixels and get the raw data. You don't need to decode PNGs in JS although that's certainly a viable solution.

Thanks greggman! It does make sense why it behaves this way, I was confused why Chrome doesn't behave similarly.

(huge fan of your work by the way!)

Different browsers behave differently because the spec is flexible (good or bad). For example exactly what algo is used to draw a line is not specified AFAIK which allows a browser to use a faster algo if they have one rather than spell it out down to the pixel. For example if they fall back to software rendering maybe they don't antialias.

Of course that has pluses and minus. The plus is browsers can try to be more efficient. The minus is the issue you ran into which is frustrating.

Maybe someone (me?) should go update the MDN docs with a note :P

Perhaps the article could do with a better intro, explaining what PlayCanvas is, for example.

https://playcanvas.com/ describes itself as “the web-first game engine”. It appears to be yet another attempt to build an Unreal/Unity engine with an integrated editor suite, with “entirely in your browser” as a flagship feature.

Also they were acquired by Snap a while ago. They've built a pretty impressive engine IMO. There are some pretty cool games and non-game experiences built on it. Such as https://venge.io

are there any open source one?

Godot engine can export foe Web and has also been ported to run in a Web browser, although the desktop editor is probably more performant/reliable:

https://godotengine.org/

https://editor.godotengine.org/releases/latest/

To some extent https://www.babylonjs.com/

PlayCanvas is MIT-licensed. https://github.com/playcanvas/engine

Only the engine is open source, the editor used to create the apps/games is not. https://github.com/playcanvas/engine#playcanvas-editor

It's a bit more complicated than than. The front-end framework that the PlayCanvas Editor is built on (PCUI) is also open source: https://github.com/playcanvas/pcui Other open source tools like the glTF viewer are also built on it: https://github.com/playcanvas/playcanvas-viewer The rest of the Editor code is unminified and unobfuscated. The is done deliberately so devs can write extensions, report bugs and generally understand how it works. More of the Editor codebase will be open sourced over time.

This is a nice, inventive high-level explanation. Linking scroll position in the article to showcase various features in a live version of the renderer was a great idea.

Also, for those unfamiliar with PlayCanvas: it's an open source javascript game engine that is kinda like halfway between something like three.js and e.g. Unity—pretty lightweight, but still comes with a nice scene editor etc.

This is weird. Each item described feels not like something useful or original, but part of a workaround for this specific engine used.

Reply on news.ycombinator.com