将 shadertoy 纹理转换为表现不同的 webgl

Posted 2023-03-23

【中文标题】将 shadertoy 纹理转换为表现不同的 webgl

【英文标题】：Translate shadertoy texture to webgl not behaving the same

【发布时间】：2021-12-31 01:52:17

【问题描述】：

我能够翻译代码并运行它，但它的行为与原始分叉不同。

https://www.shadertoy.com/view/llS3zc --orignal

https://editor.p5js.org/jorgeavav/sketches/i9cd4lE7H - 翻译

代码如下：

uniform vec2 resolution;
uniform float time;
uniform float mouse;
uniform sampler2D texture;
uniform sampler2D texture2;



void main() 

    vec2 uv = gl_FragCoord.xy / resolution.xy;
    vec4 texCol = vec4(texture2D(texture, uv+time/10.0));
    mat3 tfm;
    tfm[0] = vec3(texCol.z,0.0,0);
    tfm[1] = vec3(0.0,texCol.y,0);
    tfm[2] = vec3(0,0,1.0);    
    vec2 muv = (vec3(uv,1.0)*tfm).xy - 0.1*time;
    texCol = vec4(texture2D(texture2, muv));
    gl_FragColor = texCol;

【问题讨论】：

把你遇到的错误放在你的问题中可能是个好主意。我猜它的“texture3d”和“gl.texture”是问题所在。它们可能都应该是“texture2d”

您好，谢谢，正在运行，但行为不一样。我会更新我的问题并放置链接。

我编辑了，你有空可以看看吗？

【参考方案1】：

你有两个问题：

您的纹理比着色器玩具大很多，要么使用更小的纹理，要么按比例缩小 uv 坐标（uv*=0.1 产生类似的比例）。 您的纹理没有环绕，并且它们的尺寸不是 2 的幂（这是启用环绕 [在 WebGL1 中] 所必需的），您需要调整纹理大小并使用 textureWrap(REPEAT) 应用环绕或在着色器中环绕，例如例如，使用fract 将查找坐标包装在您的texture2D 调用中。

【讨论】：

嘿！谢谢去吧。就在第二部分，我更喜欢在 webgl 端做，但不知道如何包装查找，你能给我一个提示吗？谢谢。

我如何获得二的幂的纹理？

谢谢！到达那里我认为我能够做你所回应的事情，但仍然工作不同我更新了 p5.js 链接