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.

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

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.

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.

http://flowtype.org

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

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.

As i pass screen width not camera viewport width

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

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

Most likely the bug was introduced in 08066ab

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

Most likely due to depth buffer precision.

Crucial for optimizing rendering of big scenes

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

Possibly based on scene-tree

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.

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/

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,

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/

KHR_lights glTF extension.

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...

As per glTF spec:

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

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

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

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

Currently only transform has it

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.

There seem to be three in place...

vColor is accessible only with instancing

Could be done using depth aware bilateral box blur like SSAO

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

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

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