
Global Illumination in WebGL - mrmaxm
https://playcanv.as/p/ZV4PW6wr/
======
westoncb
I'm surprised I never see playcanvas on HN. It's great technology that should
be better known IMO.

I first came across it working on a project where I needed to load and animate
a number of complex .fbx character models. Spent loads of time trying to do
this with three.js (in 2017) + all manner of converters to different formats.
I tried every supported loader and they were all broken in various ways.

Then somehow I found playcanvas and had the models loaded and working
flawlessly in a very short period of time. That experience extended to
basically everything else I tried with the system—it's well polished.

The editor UI is very nice, and yet remains lightweight in a way where I still
feel more like I'm working with something like three.js than e.g. Unity. I
personally still prefer three.js for _most_ projects I work on, but it would
be a very good option for certain projects and I always keep it in mind. It's
also open source:
[https://github.com/playcanvas](https://github.com/playcanvas)

The downside is for the free tier you get their logo on your app, and you
can't hide the source (and anyone can fork your project). On the up-side, the
pricing was something like $15/month last time I checked.

For a very simple example, here's an asteroids game I spent a few days making
with it:
[https://playcanvas.com/project/479850/overview/rocks](https://playcanvas.com/project/479850/overview/rocks)
(you can play or jump into the editor and modify from that link.)

~~~
crazygringo
Ahhh, your game reminds me of Maelstrom -- even though all the sprites were
prerendered, the sprites were rendered in 3D and I spent _so_ many hours on
it...

[https://en.wikipedia.org/wiki/Maelstrom_(1992_video_game)](https://en.wikipedia.org/wiki/Maelstrom_\(1992_video_game\))

[https://www.youtube.com/watch?v=stxgF2fBq9c](https://www.youtube.com/watch?v=stxgF2fBq9c)

~~~
mvexel
Oh man. I spent so many hours playing Maelstrom on my LC 475.. Through your
wiki link I discovered that Ambrosia open sourced the game - there are even
OSX binaries.
[https://www.libsdl.org/projects/Maelstrom/binary.html](https://www.libsdl.org/projects/Maelstrom/binary.html)

------
gavanwoolery
Neat, dont have time to dive in the source right now but whats the trick?
Light probes? Edit: Ah, nevermind its one click away:

"Illumination technique used here is:

Realtime direct shadowmapping with time blended lighmaps for global
illumination on: walls, ceiling and floor.

For furniture we use spherical harmonics L2 with spatial and time blending for
ambient light.

Reflections made with time blended box projected cubemaps for image based
lighting on physically based materials.

Post processing done with color grading by LUT (lookup tables) and vignette."

------
ridaj
20 years ago this kind of stuff took minutes per frame on state-of-the-art SGI
workstations. Now I get > 25 fps in my phone browser. Wow.

------
redka
Very cool seeing PlayCanvas on HN! I've been using[1] their framework for a
several years and I have to say it's the best out there. Only babylon.js comes
close for 3d game engines for the browser but PlayCanvas has the Editor[2]
which makes a world of a difference.

[1] [https://redka.games](https://redka.games) [2]
[https://developer.playcanvas.com/en/user-
manual/designer/](https://developer.playcanvas.com/en/user-manual/designer/)

~~~
1ark
babylon.js has an editor.
[http://editor.babylonjs.com/](http://editor.babylonjs.com/)

~~~
redka
That's true but the editor for babylon.js is very simple. There's a big
difference between the two. Apart from the much better UI the Editor for
PlayCanvas is well featured with things like uploading and auto-conversion of
3D models and textures, cloud save, light mapping, sprite editor,
comprehensive engine configuration, texture compression and much more.

------
echelon
Has anyone done video compositing in WebGL?

I'm very interested in moving video editing tools to the cloud where the heavy
rendering can be offloaded and the browser can do lightweight work and scaled
down approximations.

As a side effect you'd be able to use such an editor on Linux, which while not
a central motivator, is compelling.

~~~
antoineMoPa
I'm working on a web based movie sequencer with special effects as a side
project right now and the development of this thing is absolutely doomed.
There are tons of problems on this path (codec/browser compatibility, browser
bugs, slow performances, firefox unable to go to a desired time fast enough
during render, etc.)

------
mixedbit
Is the explanation text correct that direct shadowmapping is used only on
walls, ceiling and floor? The shadows on furniture also look like they would
require shadowmaping.

~~~
mrmaxm
Shadowmapping is used on everything. But GI lightmapping only on walls ceiling
and floor.

------
mleonhard
The color palette makes it look like a video game.

------
sroussey
Is the WebGL 2? Does not render in Safari.

~~~
sitharus
I had that problem, but I'd turned on the experimental WebGL 2.0 support.
Turned it off and it ran fine.

~~~
sroussey
Ah! I had that turned on. Thanks! What is the default for these experiments? I
can see me turning that one on, but a lot of others are enabled that don’t
make sense to me.

------
wetpaws
I'm trying to imagine seeing this 10 years ago and my mind gets blown.

------
ovenchips
Awesome use of PlayCanvas. Nice job!

------
werdnapk
Crashed my Firefox tab. :(

~~~
solotronics
Adam Weishaupt strikes again!

------
_bxg1
Amazing. Would be really cool if this got integrated with Three.js, which last
I checked doesn't really have a global illumination story.

~~~
mrmaxm
You can make demo like this in Three.js already. Difference is, how much
labour it takes.

None of existing WebGL engines offers real GI.

------
bot1
Honestly, Unity WebGL GI looks way better and probably is also easier to
integrate into your mesh modelling/texturing workflow.

edit: plus unity is basically free to use

~~~
codesushi42
Yep, I don't know why anyone would bother to write their own engine instead,
unless it's out of pure curiosity.

~~~
pcwalton
This rubs me the wrong way. If people enjoy writing graphics engines, even if
it's not economically rational to do so, then they should do that!

This is an especially pointless complaint when it comes to video games,
because, from a purely economic standpoint, few programmers capable of writing
production-quality global illumination should be working on games _at all_ as
opposed to getting a job doing something else. (This is a hard pill to
swallow, but it is nevertheless true.) The market, especially the indie
market, is oversaturated, and, as a result, most people who are highly skilled
and involved in game development are, to varying degrees, in it for fun as
opposed to money. Since game developers are doing it for fun, why not
encourage them to do what they enjoy most?

~~~
codesushi42
If you want to ship a game, don't write your own engine. End of story.

~~~
pcwalton
I don't agree with that statement, but even if it were true, it's off topic
for this HN submission. The point of this demo isn't "use this instead of
Unity if you want to ship a game". It's "look at this neat thing I made". I
prefer to encourage that instead of being gratuitously negative.

~~~
codesushi42
It is not off topic at all. Don't reinvent the wheel if you want fast,
meaningful results. DRY. You should know better. Otherwise it's only useful
for curiosity's sake, as stated.

Save yourself the pain and use Unity instead if your goal is to ship
something.

~~~
thrax
What if I want to ship a game engine?

~~~
pjmlp
Then you better be a 10x engine developer to be able to beat what is already
out there.

~~~
Crinus
This is a common mistake people make. If you make a custom engine you do not
need to beat what is already out there since you are certainly not going to
use every single feature that the engines out there use. Bespoke engines (that
are actually used in games) aren't trying to replace Unreal or Unity, they are
only providing what the games they are used for need - anything else is
unnecessary. Even in the high end AAA space, most bespoke engines do not
provide everything that Unreal does - they focus only on the specifics their
development teams need.

This is especially important to keep in mind when it comes to smaller (be it
indie or "AA") developers - the developers who write their own engines aren't
trying to replace Unreal, these engines only support a tiny tiny fraction of
the functionality that Unreal does and that is fine because that functionality
is what these developers need. If anything, for a smaller developer that does
not have the necessary developer manpower to mold an existing gargantuan
engine like Unreal to their needs it can be a better choice to go with their
own engine than try to understand and modify Unreal.

~~~
codesushi42
Spoken like a true armchair game developer.

Writing your own engine is never your most important problem as an indie
developer nowadays. It's not important at all.

If you have lost sight of that, then you've already failed.

~~~
Crinus
I never claimed that writing your own engine is the most important problem an
indie developer would have. If there is a "most important problem" that would
be getting exposure for your game when gamers are drowned by multimillion-
funded advertisements for multimillion-funded games (and more often than not,
negative news about those multimillion-funded games - visit a gaming forum
like /r/games or similar and you will see a lot of posts, videos and comments
of how bad games are nowadays, how developers are screwing everyone, etc while
everyone making those ignores all the smaller developers who are not doing
that, mainly because they are simply invisible to most people).

My comment was about responses that compare custom engines with middleware
engines-as-products like Unreal and Unity that imply that a custom engine has
to provide at least as much as unreal and unity which is certainly not the
case.

And my comment wasn't even about indies, this is the case with non-indie
studios too - even AAA ones. In fact the previous AAA game i worked at used a
custom engine that had zero networking support (outside of some debugging
stuff) - because the games that the studio built were single player titles and
thus they didn't need such a feature. This is something that an engine-as-a-
product like Unreal or Unity cannot do, they have to care about multi player
support even if many of the games they'll be used for are single player only,
because some of their customers will also need to create multi player games.

------
sprash
This shows again that the RTX feature on NVidia cards is completely pointless.
With some clever hacks you get the same visual fidelity with traditional
OpenGL ES and with one order of magnitude better performance.

~~~
onion2k
Only because the scene is static though. If you wanted good reflections of
interactive models on a volumetric blob with a shiny material (eg the T1000
from Terminator 2) in real time you're going to need ray-tracing.

~~~
mixedbit
It is not static, the light source moves, it is the same as if the models
would move. They explain that they update light probes, they could do the same
if the models would move.

I think the limitation here is the number of lights. They use shadowmaps for
direct shadows. You can update shadowmaps interactively for a couple of light
sources, but if you have dozens of lights, as is often the case with
architectural scenes, shadow maps updating can become a bottleneck.

~~~
mrmaxm
We have precalculated all probes and lightmaps (25) in advance due to defined
light trajectory. This clever hacks, tricks the user into believing it is a
real deal - that was a desired goal of demo. Doing true GI in WebGL wont be
commercially viable option, yet.

