AA+HDR+DOF: Why is Sketchfab superior in WebGL ?

Graphics Post-Processing
1

Today I am in a mood to provoke once again:

cf2ff39e279f468f9c5489b4ff51ac92

  • Incredible AA
  • HDR/Bloom
  • DOF

It looks like there´s a difference in rendering AA + postefffects when modell is moving or static.

Will this quality EVER be possible in Unity? :frowning:

(As a bloody noob I would ask:
Why is Unity going on to get in trouble targeting all these platforms (PC/Mac/iOS/Android/…) while WebGL done correctly seems to be able to cover them all?)

2

While I agree that Unity’s WebGL isn’t anything special, if all that Unity had to do in WebGL was load a model and apply some PostFX, I’m sure they’d be able to make something that looks like that. DoF that looks like that is very do-able on WebGL’s shader model (GLES IIRC? or 2.0), if you wrote it yourself, but you’d be missing out on many of the optimizations possible with DX11+ methods.

3

Sketchfab cranks everything up to 11 when everything is static, AA included. I haven’t looked at the code in detail but it looks like straight up supersampling (render at x2 or x4 resolution and downscale with fancy filtering), which looks great on static pictures but kills the frame time. This is why you see a difference in quality. As soon as you move you can see artifacts and flickers in high specular areas as it renders back in actual resolution.

Edit: our post-fx stack is also untested on WebGL at the moment as it’s still a work in progress.

1 Like
4

@Chman is correct. This AA is NOT real time.

@Cascho01 Hopefully this will help explain it:

DOF:
Sketchfab uses 2 dof’s. When you are moving around, you get a simple and fast to render hexagonal bokeh aperture dof:

606×513 344 KB

When you are idle (stop moving), you get a high quality dof - note how very smooth it is:

Anti Aliasing:
The exposure of the HDR cubemap of the background of the scene cleverly blends into the model, which distracts from the jaggies (as does the chromatic aberration). Here I am moving around the camera, and you can see there is no AA:


When Idle (not moving) - you get a beautiful AA - and supersampled:

5

Thanks for all the explanations!
My intend was to post my astonishment what a nice WebGL quality is already doable even across mobile platforms while Unity is still “a few” steps behind this.
This sadly forces me to switch to other products for WebGL-Only-Projects.
I really hope that Unity will catch up soon.

6

Great post!

Love @Chman 's asset work - both Colorful and Moments

Would be neat if there’s a post package that’s optimized for beautiful model loading