Question

我指的是这个link，用于学习如何在webgl中渲染纹理。

我面临一些疑问，因为初学者不容易理解。这些片段对GLSL意味着什么：

 vec2 zeroToOne = a_position / u_resolution;
 vec2 zeroToTwo = zeroToOne * 2.0;
 vec2 clipSpace = zeroToTwo - 1.0;

另外，如果我的图像更大，我也不想填满整个画布。我想将所有纹理渲染为512 * 384（4：3），如何通过修改顶点来实现。

Answer 1

由于我编写了您链接的样本，我很好奇我如何改进该网站上的解释

您链接的示例来自this page。

该页面位于顶部

这是WebGL Fundamentals的延续。如果您还没有读到我建议going there first

那页说

WebGL只关心两件事。 Clipspace坐标和颜色。您作为使用WebGL的程序员的工作是为WebGL提供这两件事。你提供2＆＃34;着色器＆＃34;去做这个。提供剪贴空间坐标的顶点着色器和提供颜色的片段着色器。

无论画布的大小是什么
，Clipspace坐标始终从-1到+1

然后显示使用剪辑空间坐标的示例。

之后它说我们可能宁愿使用像素，并显示带有注释的着色器，详细说明如何从像素转换为剪辑空间

对于2D内容，你可能宁愿使用像素而不是剪辑空间，所以让我们更改着色器，这样我们就可以提供像素矩形并让它转换为剪辑空间。这是新的顶点着色器
attribute vec2 a_position;

uniform vec2 u_resolution;

void main() {
   // convert the rectangle from pixels to 0.0 to 1.0
   vec2 zeroToOne = a_position / u_resolution;

   // convert from 0->1 to 0->2
   vec2 zeroToTwo = zeroToOne * 2.0;

   // convert from 0->2 to -1->+1 (clipspace)
   vec2 clipSpace = zeroToTwo - 1.0;

   gl_Position = vec4(clipSpace, 0, 1);
}

事实上，您链接的示例在代码中具有完全相同的注释。

我喜欢听到任何有关如何使其更清晰的想法

Answer 2

此代码可能会将a_position从0..N-1纹理分辨率空间转换为 -1..1范围。

任何人都可以解释这些与WebGL相关的片段

2 个答案: