Back

Creating a DOOM-inspired aesthetic with PlayCanvas

80 points14 comments2 months agoomarshehata.me
by greggman32 months ago

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.

by OmarShehata2 months ago

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!)

by greggman32 months ago

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

by publicola19902 months ago

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

by egypturnash2 months ago

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.

by modeless2 months ago

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

by akritrime2 months ago

are there any open source one?

by xNeil2 months ago

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

+1
by freeCandy2 months ago

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

by brylie2 months ago

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/

by andybak2 months ago
by westoncb2 months ago

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.

by the__alchemist2 months ago

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