Fisheye Skybox Shader - PullRequest
Новая
       14

Fisheye Skybox Shader

2 голосов
/ 23 марта 2020

Я пытаюсь написать зрителя панорамы. В основном это связано с отображением изображения в квад для симуляции скайбокса.

Для изображения с кубической картой это довольно тривиально. Либо скопируйте 6 частей изображения в 6 плоскостей карты куба , либо создайте шейдер, который выполняет математику кубической карты, как указано в спецификации OpenGL ES * c

Для прямого angular изображения, подобного Ricoh Theta

, вы можете использовать эту математику 

      // convert from direction (n) to texcoord (uv)
      float latitude = acos(n.y);
      float longitude = atan(n.z, n.x);
      vec2 sphereCoords = vec2(longitude, latitude) * vec2(0.5 / PI, 1.0 / PI);
      vec2 uv = fract(vec2(0.5,1.0) - sphereCoords);


const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');

const vs = `
attribute vec4 position;
varying vec4 v_position;
void main() {
  v_position = position;
  gl_Position = position;
  gl_Position.z = 1.0;
}
`;

const fs = `
precision highp float;
 
uniform sampler2D u_skybox;
uniform mat4 u_viewDirectionProjectionInverse;
 
varying vec4 v_position;

#define PI radians(180.0)

void main() {
  vec4 t = u_viewDirectionProjectionInverse * v_position;
  vec3 n = normalize(t.xyz / t.w);

  // convert from direction (n) to texcoord (uv)
  float latitude = acos(n.y);
  float longitude = atan(n.z, n.x);
  vec2 sphereCoords = vec2(longitude, latitude) * vec2(0.5 / PI, 1.0 / PI);
  vec2 uv = fract(vec2(0.5,1.0) - sphereCoords);

  // multiply u by 2 because we only have a 180degree view
  gl_FragColor = texture2D(u_skybox, uv * vec2(-2, 1));
}
`;


const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
const tex = twgl.createTexture(gl, {
  src: 'https://i.imgur.com/ChIfXM0.jpg',
  flipY: true,
});
const bufferInfo = twgl.primitives.createXYQuadBufferInfo(gl, 2);

function render(time) {
  time *= 0.001;
  
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const projectionMatrix = m4.perspective(45 * Math.PI / 180, aspect, 1, 20);
 
  const cameraMatrix = m4.rotationY(time * 0.1);
  m4.rotateX(cameraMatrix, Math.sin(time * 0.3) * 0.5, cameraMatrix);
 
  const viewMatrix = m4.inverse(cameraMatrix);
  viewMatrix[12] = 0;
  viewMatrix[13] = 0;
  viewMatrix[14] = 0;
 
  const viewDirectionProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
  const viewDirectionProjectionInverseMatrix = m4.inverse(viewDirectionProjectionMatrix);  
  
  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.setUniforms(programInfo, {
    u_viewDirectionProjectionInverse: viewDirectionProjectionInverseMatrix,
    u_skyBox: tex,
  });
  twgl.drawBufferInfo(gl, bufferInfo);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);
body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>

Но некоторые изображения не являются прямыми angular, они рыбий глаз?

Я пытался понять, что математика должна была сделать то же самое (сопоставить это с квадроциклом), но мне не повезло

В качестве ссылки я нашел эту страницу с преобразованиями из 3d в координаты "рыбий глаз". Там написано 

      // convert from direction (n) to texcoord (uv)
      float r = 2.0 * atan(length(n.xy), n.z) / PI;
      float theta = atan(n.y, n.x);
      vec2 uv = vec2(cos(theta), sin(theta)) * r * 0.5 + 0.5;


const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');

const vs = `
attribute vec4 position;
varying vec4 v_position;
void main() {
  v_position = position;
  gl_Position = position;
  gl_Position.z = 1.0;
}
`;

const fs = `
precision highp float;
 
uniform sampler2D u_skybox;
uniform mat4 u_viewDirectionProjectionInverse;
 
varying vec4 v_position;

#define PI radians(180.0)

void main() {
  vec4 t = u_viewDirectionProjectionInverse * v_position;
  vec3 n = normalize(t.xyz / t.w);
  
  // convert from direction (n) to texcoord (uv)
  float r = 2.0 * atan(length(n.xy), n.z) / PI;
  float theta = atan(n.y, n.x);
  vec2 uv = vec2(cos(theta), sin(theta)) * r * 0.5 + 0.5;

  #if 0
	// Calculate fisheye angle and radius
	float theta = atan(n.z, n.x);
	float phi = atan(length(n.xz), n.y);
	float r = phi / PI; 

	// Pixel in fisheye space
	vec2 uv = vec2(0.5) + r * vec2(cos(theta), sin(theta));
  #endif

  // multiply u by 2 because we only have a 180degree view
  gl_FragColor = texture2D(u_skybox, uv * vec2(-2, 1));
}
`;


const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
const tex = twgl.createTexture(gl, {
  src: 'https://i.imgur.com/dzXCQwM.jpg',
  flipY: true,
});
const bufferInfo = twgl.primitives.createXYQuadBufferInfo(gl, 2);

function render(time) {
  time *= 0.001;
  
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const projectionMatrix = m4.perspective(45 * Math.PI / 180, aspect, 1, 20);
 
  const cameraMatrix = m4.rotationY(time * 0.1);
  m4.rotateX(cameraMatrix, 0.7 + Math.sin(time * 0.3) * .7, cameraMatrix);
 
  const viewMatrix = m4.inverse(cameraMatrix);
  viewMatrix[12] = 0;
  viewMatrix[13] = 0;
  viewMatrix[14] = 0;
 
  const viewDirectionProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
  const viewDirectionProjectionInverseMatrix = m4.inverse(viewDirectionProjectionMatrix);  
  
  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.setUniforms(programInfo, {
    u_viewDirectionProjectionInverse: viewDirectionProjectionInverseMatrix,
    u_skyBox: tex,
  });
  twgl.drawBufferInfo(gl, bufferInfo);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);
body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>

Также это

Я явно что-то упускаю.

1 Ответ

3 голосов
/ 23 марта 2020

Я полагаю, что ошибка заключается в этой логике c: 

// multiply u by 2 because we only have a 180degree view
gl_FragColor = texture2D(u_skybox, uv * vec2(-2, 1));

Хотя это работает в прямом angular случае, потому что математика работает так, что z-компонент влияет только на долготу, он больше не действует в случае «рыбий глаз», поскольку n.z влияет на обе оси.

Вы можете учесть отрицательный z-компонент в формуле, взяв абсолютное значение n.z и переворачивая n.x, когда z отрицательно: 

  // convert from direction (n) to texcoord (uv)
  float r = 2.0 * atan(length(n.xy), abs(n.z)) / PI;
  float theta = atan(n.y, n.x * sign(n.z));
  vec2 uv = vec2(cos(theta), sin(theta)) * r * 0.5 + vec2(0.5);

Вот оно в действии: 

const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');

const vs = `
attribute vec4 position;
varying vec4 v_position;
void main() {
  v_position = position;
  gl_Position = position;
  gl_Position.z = 1.0;
}
`;

const fs = `
precision highp float;
 
uniform sampler2D u_skybox;
uniform mat4 u_viewDirectionProjectionInverse;
 
varying vec4 v_position;

#define PI radians(180.0)

void main() {
  vec4 t = u_viewDirectionProjectionInverse * v_position;
  vec3 n = normalize(t.xyz / t.w);
  
  // convert from direction (n) to texcoord (uv)
  float r = 2.0 * atan(length(n.xy), abs(n.z)) / PI;
  float theta = atan(n.y, n.x * sign(n.z));
  vec2 uv = vec2(cos(theta), sin(theta)) * r * 0.5 + vec2(0.5);

  gl_FragColor = texture2D(u_skybox, uv * vec2(-1.0, 1.0));
}
`;


const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
const tex = twgl.createTexture(gl, {
  src: 'https://i.imgur.com/dzXCQwM.jpg',
  flipY: true,
});
const bufferInfo = twgl.primitives.createXYQuadBufferInfo(gl, 2);

function render(time) {
  time *= 0.001;
  
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const projectionMatrix = m4.perspective(45 * Math.PI / 180, aspect, 1, 20);
 
  const cameraMatrix = m4.rotationY(time * 0.1);
  m4.rotateX(cameraMatrix, 0.7 + Math.sin(time * 0.3) * .7, cameraMatrix);
 
  const viewMatrix = m4.inverse(cameraMatrix);
  viewMatrix[12] = 0;
  viewMatrix[13] = 0;
  viewMatrix[14] = 0;
 
  const viewDirectionProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
  const viewDirectionProjectionInverseMatrix = m4.inverse(viewDirectionProjectionMatrix);  
  
  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.setUniforms(programInfo, {
    u_viewDirectionProjectionInverse: viewDirectionProjectionInverseMatrix,
    u_skyBox: tex,
  });
  twgl.drawBufferInfo(gl, bufferInfo);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);
body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>
...