pex-gl / pex-renderer Goto Github PK

Right now we multiply final color (direct + indirect) with SSAO which is incorrect. Doing z-prepass ( #5 ) and calculating SSAO in advance is the way to go.

Possibly based on scene-tree

Compare with gltf as I think we have gamma colors and gltf has linear https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#metallic-roughness-material

Render z-buffer first to avoid duplicated pixel shader work.

This would also allow to compute SSAO in advance and use when shading.

With the latest code (pex-renderer and pex-context) the following is now possible:

window.addEventListener('resize', () => {
  const W = window.innerWidth
  const H = window.innerHeight
  ctx.gl.canvas.width = W // ctx will pickup that change and update default viewport
  ctx.gl.canvas.height = H
  cameraEnt.getComponent('Camera').set({
    viewport: [0, 0, W, H]
  })
})

You need to update only Camera as all width/height code has been removed from the Renderer itself.

This ctx.gl.canvas.width is a bit ugly so alternatively we could do

window.addEventListener('resize', () => {
  ctx.resize(window.innerWidth, window.innerHeight)
  cameraEnt.getComponent('Camera').set({
    viewport: [0, 0, window.innerWidth, window.innerHeight]
  })
})

There is a question about "retina resolution" that requires the following code.

window.addEventListener('resize2', () => {
  const W = window.innerWidth
  const H = window.innerHeight
  ctx.gl.canvas.width = W * 2
  ctx.gl.canvas.height = H * 2
  ctx.gl.canvas.style.width = W + 'px'
  ctx.gl.canvas.style.height = H + 'px'

  cameraEnt.getComponent('Camera').set({
    viewport: [0, 0, W * 2, H * 2]
  })
})

Changing it to the ctx.resize version is ambiguous...

ctx.resize(W * 2, H * 2) // who sets canvas.style.width = W ?
ctx.resize(W, H, 2) //?
ctx.resize(W, H, { pixelRatio: 2 }) //?
ctx.resize(H, H, { scale: 2 }) //?

// and additionally
var ctx = createContext({ width: W, height: H, pixelRatio: 2 })
//ctx.defaultState.viewport[2] is now W * 2...

Left is cube [20, 0.2, 7] scaled by [1, 1, 1]. Right is cube [1, 1, 1] scaled by [20, 0.2, 7]

It's different than other engines https://github.com/vorg/pbr-compare

I think it's different as i made it so it matches RTT FBOs,

Most likely due to depth buffer precision.

There are problems with using CubeMaps for Prefiltered Mipmaped Radiance Environment Maps

• textureCubeLod is still not supported in Firefox on OSX
• seamless cubemap filtering is not available in WebGL 1
• most importantly we can't render to HDR CubeMap mipmap levels > 0 on iOS

Use Octahedral maps as described in WebGL Insights: HDR Rendering could solve all that issues.

Could be done using depth aware bilateral box blur like SSAO

https://github.com/sbtron/glTF/blob/30de0b365d1566b1bbd8b9c140f9e995d3203226/specification/2.0/README.md#pbrmetallicroughnessmetallicroughnesstexture

The metalness values are sampled from the B channel. The roughness values are sampled from the G channel.

https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#materialocclusiontexture

The occlusion values are sampled from the R channel.

http://flowtype.org

Currently with post-processing on the resulting scene has black background.

So no point doing postprocessing. How can i pack HDR in RGBA and transparency? Probably not possible and have to stick to forward rendering on top of the map.

WebGL Deferred Irradiance Volumes on Codeflow has good explanation how to do it.

As per glTF spec:

https://github.com/KhronosGroup/glTF/blob/main/specification/2.0/Specification.adoc#alpha-coverage

Currently when we spread the glow too much it starts to separate instead of becoming smoother and smoother like here
http://www.curious-creature.com/2017/08/14/physically-based-rendering-demo/

There seem to be three in place...

https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit

renderer.material({ baseColor: [1, 0, 0, 1] }) //unlit
renderer.material({ baseColor: [1, 0, 0, 1], roughness: 1 }) //flat but with lights and shadow
renderer.material({ baseColor: [1, 0, 0, 1], metallic: 1 }) //upgraded to pbr mode with all props
renderer.material({ baseColor: [1, 0, 0, 1], ssrMap: texture }) //upgraded to skin
renderer.material({ vert: '', frag: '' }) // custom material

As i pass screen width not camera viewport width

vColor is accessible only with instancing

Implement deferred renderer for multiple lights.

Starting point
http://marcinignac.com/blog/deferred-rendering-explained/
https://github.com/vorg/pex-exp-deferred-rendering

Additional Notes:
Normal packing http://aras-p.info/texts/CompactNormalStorage.html

Works on my old GeForce and Intel GPU

The problem seems to be with addressing array of depth maps for directional lights

#define NUM_LIGHTS 1

// gl.DEPTH_COMPONENT, NEAREST, NEAREST
uniform sampler2D uDirectionalLightShadowMap;
uniform sampler2D uDirectionalLightShadowMaps[NUM_LIGHTS];

// not working
// get 0 or 1 on Radeon Pro 460
// get 0 on Intel HD Graphics 630
for (int i = 0; i < NUM_LIGHTS; i++) {
 float depth = texture2D(uDirectionalLightShadowMaps[i], uv).r;
}

// working, I get depth gradient
float depth = texture2D(uDirectionalLightShadowMap, lightUV).r;
float depth = texture2D(uDirectionalLightShadowMaps[0], lightUV).r;

Although separated use case (bunny with shadows in raw pex-context) can't recreate the issue.

The _textures doesn't exist yet as initPostprocessing happen after set.

Crucial for optimizing rendering of big scenes

Lighthouse3D tutorial on View Frustum Culling http://www.lighthouse3d.com/tutorials/view-frustum-culling/

Macbook Pro (Retina, 13-inch, Mid 2014)
Intel Iris 1536 MB

Running

depcheck --ignore-dirs=examples,experiments

returns quite a lot of old unused stuff still being installed

Unused dependencies
* async
* gl-constants
* glsl-atmosphere
* glsl-fxaa
* glsl-gamma
* glsl-inverse
* glsl-perturb-normal
* glsl-random
* glsl-transpose
* is-mobile
* pex-cam
* pex-context
* pex-draw
* pex-gl
* pex-gui
* pex-io
* primitive-cube
* primitive-sphere
* scene-tree
Missing dependencies
* plask
* glslify-sync

KHR_lights glTF extension.

Currently only transform has it

Most likely the bug was introduced in 08066ab

Sharp object leak to the foreground

Currently DOF is using bilateral blur with sharpness=0 but this causes the halo.

This can be potentially solved e.g. by custom blur with Signed Circle of Confusion (blur radius) idea:
https://bartwronski.com/2014/12/09/designing-a-next-generation-post-effects-pipeline/amp/

Adding more lights with shadows maps can bump number of textures higher than max supported (e.g. 16). Additional lights should have shadows disabled or a warning issued.

It's because of pipeline catching https://github.com/pex-gl/pex-nodes/issues/108