Verify and document equirect panorama orientation about pex-renderer HOT 9 CLOSED

Lol everybody is different..

PEX
https://github.com/pex-gl/pex-renderer/blob/master/shaders/chunks/env-map-equirect.glsl.js

vec2 envMapEquirect(vec3 wcNormal) {
  float flipEnvMap = -1.0;
  // I assume envMap texture has been flipped the WebGL way (pixel 0,0 is a the bottom)
  // therefore we flip wcNorma.y as acos(1) = 0
  float phi = acos(-wcNormal.y);
  float theta = atan(wcNormal.x, flipEnvMap * wcNormal.z) + PI;
  return vec2(theta / TWO_PI, phi / PI);
}

ThreeJS
https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/equirect_frag.glsl.js

vec3 direction = normalize( vWorldDirection );
	vec2 sampleUV;
	sampleUV.y = asin( clamp( direction.y, - 1.0, 1.0 ) ) * RECIPROCAL_PI + 0.5;
	sampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;
	vec4 texColor = texture2D( tEquirect, sampleUV );

BabylonJS
https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/ShadersInclude/reflectionFunction.fx#L21

        vec3 direction = normalize(vDirectionW);
	float lon = atan(direction.z, direction.x);
	float lat = acos(direction.y);
	vec2 sphereCoords = vec2(lon, lat) * RECIPROCAL_PI2 * 2.0;
	float s = sphereCoords.x * 0.5 + 0.5;
	float t = sphereCoords.y;	
        #ifdef REFLECTIONMAP_MIRROREDEQUIRECTANGULAR_FIXED
		return vec3(1.0 - s, t, 0);
	#else
		return vec3(s, t, 0);
	#endif

ClayGL
https://github.com/pissang/claygl/blob/master/src/shader/source/skybox.glsl#L43

   vec3 eyePos = viewInverse[3].xyz;
    vec3 V = normalize(v_WorldPosition - eyePos);
#ifdef EQUIRECTANGULAR
    float phi = acos(V.y);
    // consistent with cubemap.
    // atan(y, x) is same with atan2 ?
    float theta = atan(-V.x, V.z) + PI * 0.5;
    vec2 uv = vec2(theta / 2.0 / PI, phi / PI);
    vec4 texel = decodeHDR(texture2D(environmentMap, fract(uv)));
#else

@dmnsgn can you push filament upstream?

from pex-renderer.

Looking at my own blog post http://marcinignac.com/blog/pragmatic-pbr-hdr/

It would look like North is to the right so ThreeJS/Babylon are correct.

from pex-renderer.

I've made example to test all this before but need to find the source code for it.

Update: It's here https://github.com/pex-gl/pex-context/blob/master/examples/render-to-cubemap.js

from pex-renderer.

Uhm, consensus is a bit complicated if the source files are different..

assets/Pisa/three/nz.png

assets/Pisa/pex/pisa/negz.hdr

Actual code in pex and babylon use equirect panorama (here with added face overlay, red=X)

from pex-renderer.

So I checked What Would YouTube Say with their equirect video spec.

There is 360 video PR mentioning "fixed" "mirrored" equirectangular texture. Digging what does it mean.

material.reflectionTexture.coordinatesMode = BABYLON.Texture.FIXED_EQUIRECTANGULAR_MIRRORED_MODE; // matches src

from pex-renderer.

@dmnsgn would you know how to load equirect hdr as bg in three?

from pex-renderer.

@dmnsgn can you push filament upstream?

Just did but atm:

• no support for Chrome 73 (will be fixed next version) so only in Firefox (which is struggling but you can see it on its own here: https://dmnsgn.github.io/pbr-compare/build/filament.html)
• their assets for env map have a specific format, I have to find a tool to convert pisa

Uhm, consensus is a bit complicated if the source files are different..

I have removed all ldr format and only using .hdr (except for playcanvas because it's impossible to find an example using .hdr). https://github.com/dmnsgn/pbr-compare/tree/master/assets/Pisa
Then hopefully the splitted hdr ['px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr'], have the correct orientation 🤔?

@dmnsgn would you know how to load equirect hdr as bg in three?

Loading a single hdr file is not possible yet: mrdoob/three.js#9688

from pex-renderer.

Official filament demos don't run in FF on my machine somehow, yours also doesn't. I get ctx is null 🤔

Lucky me running old chrome ;D

For cubemaps there is tool cmgen (cubemap gen). Example here https://github.com/google/filament/blob/a38c40cf1136c5f3c7e310dba0d53e7d567e5343/web/docs/tutorial_suzanne.md#bake-environment-map

from pex-renderer.

Arnold VR Camera https://docs.arnoldrenderer.com/display/A5AFCUG/VR+Camera

Paul Bourke http://paulbourke.net/miscellaneous/cubemaps/

Panorama in question

No matter if front is +Z or -Z that axis is along the street (like pex) not along the wall (like three and babylon)

from pex-renderer.