Javascript iOS上的WebGL着色器LUT错误结果
我目前在WebGL中有一个片段着色器(由Three.js提供支持),它使用纹理作为查找表(LUT)。这最初是为我的笔记本电脑开发的,但后来我决定将其扩展到手机上。我打开iPhone上的页面,发现它看起来完全不同。在剥离代码以查看从LUT中得到的结果后,我注意到结果有所不同。我的LUT代码如下Javascript iOS上的WebGL着色器LUT错误结果,javascript,ios,three.js,glsl,webgl,Javascript,Ios,Three.js,Glsl,Webgl,我目前在WebGL中有一个片段着色器(由Three.js提供支持),它使用纹理作为查找表(LUT)。这最初是为我的笔记本电脑开发的,但后来我决定将其扩展到手机上。我打开iPhone上的页面,发现它看起来完全不同。在剥离代码以查看从LUT中得到的结果后,我注意到结果有所不同。我的LUT代码如下 uniform sampler2D texture1; uniform sampler2D lutMap; varying vec2 vUv; precision highp
uniform sampler2D texture1;
uniform sampler2D lutMap;
varying vec2 vUv;
precision highp float;
vec3 rgb2hsv(vec4 c)
{
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
float d = q.x - min(q.w, q.y);
float e = 1.0e-10;
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}
void main() {
vec4 inColour = texture2D(texture1, vUv);
// convert to hsv
vec3 hsv = rgb2hsv(inColour);
// scale it up
hsv = vec3(floor(hsv[0] * 128.0), floor(hsv[1] * 128.0), floor(hsv[2] * 128.0));
// map to how we've stored our value
float posF = ((hsv[0] * 128.0*128.0) + (hsv[1] * 128.0) + hsv[2]);
// calculate the actual position in our map
vec2 posV = vec2(floor(posF / 2048.0) / 2048.0, 1.0 - mod(posF, 2048.0) / 2048.0);
// the colour
gl_FragColor = texture2D(lutMap, posV);
}
添加了precision highp float
行,试图测试是否是精度导致了此问题,但似乎没有什么区别。我已经在我的工作笔记本电脑和不工作的手机上进行了检查,它们给出了相同的碎片着色器精度值。还有什么我应该试试的吗?为了清楚起见,由于这最初会在我的笔记本电脑上造成问题,我告诉我的纹理使用最近的过滤器映射,例如
tex.minFilter = THREE.NearestFilter;
tex.magFilter = THREE.NearestFilter;
tex.format = THREE.RGBFormat;
tex.generateMipmaps = false;
tex.needsUpdate = true;
现在的问题很有趣,但是建立一个小型的在线运行示例肯定会降低积极深入研究问题的障碍。如果你在这里以片段的形式展示一个示例,当外部站点消失时,并不是一些外部站点会使问题变得毫无用处。问题是非常有趣的,但设置一个小型在线运行示例肯定会降低积极深入研究问题的障碍。如果您在此处将一个示例作为一个片段放出来,当外部站点消失时,不会有一些外部站点使问题变得无用。