时间戳

首页 > 解决方案 > Instagram 上的 Shader 看起来与 SparkAR Studio 中的完全不同

glsl - Instagram 上的 Shader 看起来与 SparkAR Studio 中的完全不同

问题描述

我正在尝试通过在 SparkAR 中使用着色器来创建水下过滤器。我的过滤器在 SparkAR 中看起来像预期的那样，但在 Instagram 中测试时却完全不同。这是一个比较，左边是 SparkAR，右边是 Instagram： SparkAR 与 Instagram 相比

我认为它与分辨率有关，所以我已经尝试了所有方法：放大，使用 getModelViewProjectionMatrix() 而不是 getRenderTargetSize() 计算 UV，等等。

没有任何效果，所以我希望这里有人经历过类似的事情并可以帮助我！

这是使用的着色器代码：

#ifdef GL_ES
precision mediump float;
#endif

float length2(vec2 p) { return dot(p, p); }

float noise(vec2 p){
  return fract(sin(fract(sin(p.x) * (4231.13311)) + p.y) * 3131.0011);
}

float worley(vec2 p) {
  float d = 1e30;
  for (int xo = -1; xo <= 1; ++xo) {
    for (int yo = -1; yo <= 1; ++yo) {
      vec2 tp = floor(p) + vec2(xo, yo);
      d = min(d, length2(p - tp - vec2(noise(tp))));
    }
  }
  return 3.0*exp(-4.0*abs(2.0*d - 1.0));
}

float fworley(vec2 p) {
  float time = fragment(std::getTime());
  return sqrt(sqrt(sqrt(
    1.6 * // light
    worley(p*32. + 4.3 + time*.125) *
    sqrt(worley(p * 64. + 5.3 + time * -0.0625)) *
    sqrt(sqrt(worley(p * -100. + 9.3))))));
}

void main(out vec4 Position, out vec4 Color) {
  Position = std::getModelViewProjectionMatrix() * std::getVertexPosition();

  vec2 scaling = vec2(1., 1.);
  float time = fragment(std::getTime());
  vec2 vertCoord =  fragment(std::getVertexTexCoord());
  vec2 resolution = fragment(std::getRenderTargetSize());
  vec2 uv = floor(resolution * vertCoord) / resolution;
    
  vec2 xDifference = vec2(2.0 * (sin(time / 2.0) / 2.0)  - 1.5, 0.8);
  float t = fworley(uv * resolution / (900.0 * scaling)) / 2.;
  t *= exp(-length2(abs(1.0* (uv + xDifference) *  - 1.0)));

  t += fworley(uv * resolution / (450.0 * scaling)) / 2.;
  xDifference = vec2(2.0 * (sin(time / 2.0) / 2.0)  - 0.75, 0.7);
  t *= exp(-length2(abs(1.0* (uv + xDifference) *  - 1.0))) * 0.5;

  t += fworley(uv * resolution / (300.0 * scaling)) / 3.;
  xDifference = vec2(2.0 * (sin(time / 2.0) / 3.0)  - 0.5, 0.6);
  t *= exp(-length2(abs(1.0* (uv + xDifference) *  - 1.0)));
  
  Color = vec4((t+0.05) * vec3(0.3, 1.5*t, 0.3 + pow(t, 1.0-t)), 1.3);
}

我还检查了我是否使用了 GLSL 1.x 不支持的东西，因为这是 SparkSL 的基础。但事实并非如此。

标签： glslshaderspark-ar-studio

解决方案

您需要阅读文章：https ://sparkar.facebook.com/ar-studio/learn/sparksl/cross-device-shader-sparksl#opengl

简而言之，问题在于浮点数的精度。

并且永远不要使用：

fract(sin(fract(sin(p.x) * (4231.13311)) + p.y) * 3131.0011);

推荐阅读