鱼眼Skybox着色器

Gman 发表于 Dev

man

我正在尝试编写全景查看器。通常，这涉及将图像映射到四边形以模拟天空盒。

对于立方体贴图图像，它很简单。无论是6个部位的图像复制到立方体地图的6个面的要么做一个着色器，做作为的OpenGL ES规范中指定的立方体贴图数学

对于像来自理光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>

但是有些图像不是等矩形的，它们是鱼眼？

我一直在试图找出做相同事情所需的数学运算（将其映射到基于Quad的Skybox），但是我一直没有运气

作为参考，我发现此页面具有从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>

Also this

Clearly I'm missing something.

Klaycon

I believe the error lies in this logic:

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

Although this works in the equirectangular case because the math works out such that the z-component only affects longitude, it is no longer valid in the fisheye case because n.z affects both axes.

You can account for the negative z-component in the formula by taking the absolute value of n.z and flipping n.x when the z is negative:

  // 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);

Here it is in action:

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-01-23

我来说两句

0 条评论

登录后参与评论

上一篇：MATLAB：尝试不显示此代码中的逻辑数组

着色器-通过“拉”像素来反鱼眼

鱼眼扭曲鼠标位置-片段着色器

Monogame + HLSL 鱼眼顶点着色器

OpenGL ES 2.0-鱼眼着色器显示灰色图像

为 Unity Sprite 的 CG 着色器添加鱼眼效果

顶点着色器与片段着色器

GLSL着色器-片段着色器无法编译

GLSL HSV着色器

GLSL着色器折旧

镶嵌着色器-OpenGL

优化片段着色器

着色器创建Opengl

WebGL多个着色器

Unity Silhouette着色器

替换颜色的着色器

Unity 着色器错误

GLSL着色器闪烁

着色器代码优化

GGX着色器创建

OpenGL工作着色器？

GLSL着色器问题

WebGL着色器变量

OpenGL着色器输入

片段着色器旋转

卡通着色器阴影

Libgdx 着色器优化

LogCat消息的着色器着色？

FFMPEG 鱼眼 Equirectangular

Xcode GPU着色器探查器

TOP 榜单

文章

鱼眼Skybox着色器

鱼眼Skybox着色器

Linux的官方Adobe Flash存储库是否已过时？

如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

错误：“ javac”未被识别为内部或外部命令，

Modbus Python施耐德PM5300

为什么Object.hashCode（）不遵循Java代码约定

如何正确比较 scala.xml 节点？

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

在令牌内联程序集错误之前预期为 ')'

数据表中有多个子行，asp.net核心中来自sql server的数据

VBA 自动化错误：-2147221080 (800401a8)

错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

如何在JavaScript中获取数组的第n个元素？

检查嵌套列表中的长度是否相同

如何将sklearn.naive_bayes与（多个）分类功能一起使用？

ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

ES5的代理替代

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

如何监视应用程序而不是单个进程的CPU使用率？

如何检查字符串输入的格式

解决类Koin的实例时出错

如何自动选择正确的键盘布局？-仅具有一个键盘布局