5 ms·

Creating a DOOM-inspired aesthetic with PlayCanvas

80 points by OmarShehata 5y ago

publicola1990 5y ago
Perhaps the article could do with a better intro, explaining what PlayCanvas is, for example.
- egypturnash 5y ago
  https://playcanvas.com/ 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.
  - modeless 5y 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 https://venge.io
  - akritrime 5y ago
    are there any open source one?
    - brylie 5y 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://godotengine.org/ https://editor.godotengine.org/releases/latest/ https://editor.godotengine.org/releases/latest/
    - andybak 5y ago
      To some extent https://www.babylonjs.com/ https://www.babylonjs.com/
    - xNeil 5y ago
      PlayCanvas is MIT-licensed. https://github.com/playcanvas/engine https://github.com/playcanvas/engine
      - freeCandy 5y ago
        Only the engine is open source, the editor used to create the apps/games is not. https://github.com/playcanvas/engine#playcanvas-editor https://github.com/playcanvas/engine#playcanvas-editor
        ovenchips 5y ago
        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 https://github.com/playcanvas/pcui Other open source tools like the glTF viewer are also built on it: https://github.com/playcanvas/playcanvas-viewer 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.
greggman3 5y 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.
- OmarShehata 5y 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!)
  - greggman3 5y 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
the__alchemist 5y ago
This is weird. Each item described feels not like something useful or original, but part of a workaround for this specific engine used.
westoncb 5y 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.

80 points by OmarShehata 5y ago

publicola1990 5y ago

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

egypturnash 5y ago
https://playcanvas.com/ 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.
- modeless 5y 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 https://venge.io
- akritrime 5y ago
  are there any open source one?
  - brylie 5y 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://godotengine.org/ https://editor.godotengine.org/releases/latest/ https://editor.godotengine.org/releases/latest/
  - andybak 5y ago
    To some extent https://www.babylonjs.com/ https://www.babylonjs.com/
  - xNeil 5y ago
    PlayCanvas is MIT-licensed. https://github.com/playcanvas/engine https://github.com/playcanvas/engine
    - freeCandy 5y ago
      Only the engine is open source, the editor used to create the apps/games is not. https://github.com/playcanvas/engine#playcanvas-editor https://github.com/playcanvas/engine#playcanvas-editor
      - ovenchips 5y ago
        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 https://github.com/playcanvas/pcui Other open source tools like the glTF viewer are also built on it: https://github.com/playcanvas/playcanvas-viewer 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.

greggman3 5y 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.

OmarShehata 5y 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!)
- greggman3 5y 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

the__alchemist 5y ago

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

westoncb 5y 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.