After carefully following this tutorial, I am trying to replicate this effect on a plane in GLSL. I copied the exact steps and it appears in the video. One additional change that I have done is to use a custom dirToRectilinear function to map the equirectangular texture like it’s done with a skybox.
The effect is starting to appear but there is a gross deformation. I know Unreal‘s workflow cannot be copied to GLSL as is, but I am unable to find the missing piece to make it work. I’ve spent hours figuring it out but to no avail. Any help would be appreciated.
Fragment Shader:
uniform float uTime;
uniform vec3 cameraPosition;
uniform sampler2D uTex; // the equirectangular texture
varying vec2 vUv; // Plane's default UV
varying vec3 vNormal;
varying vec3 vFragPos; // localPos
varying vec3 vWorldPos; // worldPos
vec2 dirToRectilinear( vec3 dir ){
float x = atan( dir.z, dir.x ) / (PI * 2.) + .5;
float y = acos(dir.y) / PI;
return vec2(x, y);
}
void main()
{
// Every step in the tutorial is replicated in this shader
// UV part
vec2 uv = vUv * vec2(2., -2.);
uv -= vec2(1., -1.);
vec3 uv2 = vec3( uv, -1. );
// CAMERA part
vec3 toCam = normalize( cameraPosition - vFragPos );
toCam.x *= -1.;
toCam = 1. / toCam;
vec3 toCam2 = abs(toCam);
vec3 toCam3 = toCam * uv2;
vec3 toCam4 = toCam2 - toCam3;
float minNum = min(toCam4.x, toCam4.y);
vec3 toCam5 = vec3(
minNum,
minNum,
min( minNum, toCam4.z )
);
toCam5 *= normalize( cameraPosition - vFragPos ) * vec3( -1., 1., 1.);
toCam5 += uv2;
vec4 clr = texture( uTex, dirToRectilinear(toCam5) );
gl_FragColor = vec4( clr.rgb, 1. );
}
This is the texture I am trying to map:
WORKING EXAMPLE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
width: 100%;
height: 100vh;
canvas{
width: 100%;
height: 100%;
}
}<script type="module">
import {
Renderer,
Camera,
Orbit,
Transform,
TextureLoader,
Plane,
Program,
Mesh,
Vec3,
} from 'https://unpkg.com/ogl';
let vert = `
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat3 normalMatrix;
uniform float uTime;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vFragPos;
void main() {
vec3 pos = position;
vFragPos = pos;
vUv = uv;
vNormal = normalMatrix * normal;
gl_Position = vec4(projectionMatrix * modelViewMatrix * vec4(pos, 1.));
}`;
let frag = `
uniform float uTime;
uniform vec3 cameraPosition;
uniform sampler2D uTex; // the equirectangular texture
varying vec2 vUv; // Plane's default UV
varying vec3 vNormal;
varying vec3 vFragPos; // localPos
varying vec3 vWorldPos; // worldPos
vec2 dirToRectilinear( vec3 dir ){
float x = atan( dir.z, dir.x ) / (PI * 2.) + .5;
float y = acos(dir.y) / PI;
return vec2(x, y);
}
void main()
{
// UV
vec2 uv = vUv * vec2(2., -2.);
uv -= vec2(1., -1.);
vec3 uv2 = vec3( uv, -1. );
// CAMERA
vec3 toCam = normalize( cameraPosition - vFragPos );
toCam.x *= -1.;
toCam = 1. / toCam;
vec3 toCam2 = abs(toCam);
vec3 toCam3 = toCam * uv2;
vec3 toCam4 = toCam2 - toCam3;
float minNum = min(toCam4.x, toCam4.y);
vec3 toCam5 = vec3(
minNum,
minNum,
min( minNum, toCam4.z )
);
toCam5 *= normalize( cameraPosition - vFragPos ) * vec3( -1., 1., 1.);
toCam5 += uv2;
vec4 clr = texture( uTex, dirToRectilinear(toCam5) );
gl_FragColor = vec4( clr.rgb, 1. );
}`;
class Sketch{
constructor(){
// Vars
this.speed = 0;
this.init();
}
// INIT
init(){
this.renderer = new Renderer({dpr: 1, alpha: true});
this.gl = this.renderer.gl;
this.parent = document.body;
this.parent.appendChild(this.gl.canvas);
// Width and height of canvas
this.gl.canvas.width = window.innerWidth;
this.gl.canvas.height = window.innerHeight;
// Camera related
this.fov = 75;
this.asp = this.gl.canvas.width / this.gl.canvas.height;
this.camera = new Camera(this.gl, { fov: this.fov, far: 10 });
this.camera.position = new Vec3(0, 0, 2);
this.camera.lookAt([0,0,0]);
this.controls = new Orbit(this.camera);
this.scene = new Transform();
this.gl.clearColor(0.2, 0.2, 0.2, 1);
this.#geometry();
this.#resize();
this.#animate();
}
// RESIZE
#resize(){
this.renderer.setSize(this.parent.clientWidth, this.parent.clientHeight);
this.asp = this.gl.canvas.width / this.gl.canvas.height;
this.fov = 2 * Math.atan( Math.tan( 75 * Math.PI / 180 / 2 ) / this.asp ) * 180 / Math.PI;
this.camera.perspective({ fov: this.fov, aspect: this.asp });
}
// GEOMETRY
#geometry(){
// Object
let size = 1;
this.geometry = new Plane(this.gl, {
width: size*2,
height: size,
});
// Program
this.lightPos = new Vec3(1, 0, 1);
let defines = `
#define LIGHT
#define PI 3.14159265
`;
let vertPrefix = this.renderer.isWebgl2
? /* glsl */ `#version 300 es
#define attribute in
#define varying out
#define texture2D texture`
: ``;
let fragPrefix = this.renderer.isWebgl2
? /* glsl */ `#version 300 es
precision highp float;
#define varying in
#define texture2D texture
#define gl_FragColor FragColor
out vec4 FragColor;
`
: `
#extension GL_OES_standard_derivatives : enable
precision highp float;
`;
let tex = TextureLoader.load( this.gl, {
src: "https://i.sstatic.net/6HOGZ4RB.jpg",
});
this.program = new Program(this.gl, {
vertex: vertPrefix + defines + vert,
fragment: fragPrefix + defines + frag,
uniforms: {
uTex: { value: tex },
},
});
// Meshes
this.mesh = new Mesh(this.gl, { geometry: this.geometry, program: this.program });
this.mesh.setParent(this.scene);
}
// ANIMATE
#animate(){
// UPDATING VALUES
this.controls.update();
this.renderer.render({ scene: this.scene, camera: this.camera });
requestAnimationFrame( this.#animate.bind(this) );
}
}
new Sketch;
</script>