着色玩具的GLSL与锈蚀WGSL的不一致性

Question

我试图进入阴影，并决定在一个项目中使用锈蚀和贝维，目的是复制一个光线行进的着色器，只是为了确认环境是好的，我能够复制"fragCoord“使用：

var fragCoord: vec2<f32> = vec2<f32>((input.uv.x+1.0) * iResolution.res.x, (input.uv.y+1.0) * iResolution.res.y);
//iResolution.res is the screen res in pixels

到目前为止，一切都还好，当试图复制大翼的例子时，我注意到结果的差异--想象一下，只传递以下一行：

vec2 uv = (fragCoord-.5*iResolution.xy)/iResolution.y;
//where fragCoord is the pixel position of the frag and the iResolution is the screen size in pixels

着色结果图像

我怀疑fragCoord，但经过检查后，它得到了与shadertoy版本相同的结果，但是在尝试检查iResolution之后，我注意到了一个很大的差异，然后用固定的输出颜色值进行了测试，得到了这个结果，正如您所看到的，颜色是不一样的：

对着色器使用相同值的结果

我也使用不同的浏览器，但得到了相同的结果:(，我现在怀疑我的相机/网格代码：

//camera
fn spawn_camera(mut commands: Commands) {
    let mut camera = OrthographicCameraBundle::new_2d();
    camera.orthographic_projection.right = 0.0;
    camera.orthographic_projection.left = 1.0 ;
    camera.orthographic_projection.top = 0.0;
    camera.orthographic_projection.bottom = 1.0;
    camera.orthographic_projection.scaling_mode = ScalingMode::None;
    commands.spawn_bundle(camera);
}

//mesh to display the frag shader
let ZOOM = 1.0;
let vertices = [
       ([-1.0,-1.0,0.0] /*pos*/, [0.0,0.0,0.0] /*normal*/, [1.0 / ZOOM, 1.0 / ZOOM] /*uv*/), //bottom left
       ([-1.0,1.0,0.0], [0.0, 0.0, 0.0], [1.0 / ZOOM, -1.0 / ZOOM]), //top left
       ([1.0,1.0,0.0], [0.0, 0.0, 0.0], [-1.0 / ZOOM, -1.0 / ZOOM]), //top right
       ([1.0,-1.0,0.0], [0.0, 0.0, 0.0], [-1.0 / ZOOM, 1.0 / ZOOM]), //bottom right];

let indices = Indices::U32(vec![ 0, 3, 2,0, 2, 1]);

我在这里的主要问题是，我怎样才能用铁锈和贝维来重现着色玩具的确切环境？如果不可能，请给我看另一种选择。我只是尝试使用片段着色器，我不需要显示除实际片段着色结果以外的任何东西。

Answer 1

凯文·里德是对的。默认的颜色空间是sRGB：如何在JavaScript中指定画布的颜色空间？

您可以通过将颜色从线性颜色空间转换为sRGB来获得预期的结果，就像在这里发布的那样：https://www.shadertoy.com/view/Wd2yRt

这将使您的代码看起来如下：

vec3 lin2srgb( vec3 cl )
{
    vec3 c_lo = 12.92 * cl;
    vec3 c_hi = 1.055 * pow(cl,vec3(0.41666)) - 0.055;
    vec3 s = step( vec3(0.0031308), cl);
    return mix( c_lo, c_hi, s );
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = (fragCoord-.5*iResolution.xy)/iResolution.y;
    vec3 c = vec3( lin2srgb( vec3(uv.xy, 0.0) ) );
   
    fragColor = vec4(c,1.0);
}

让你的结局是：

​

因此，要想最终回答您的问题:要再现着色玩具的环境，您需要使用锈蚀中的sRGB颜色空间。

选择:只需在着色玩具中使用对sRGB的转换即可。