谁能解释这些与 WebGL 相关的片段

Question

我参考这个 link 来学习如何在 webgl 中渲染纹理。

我有一些疑惑，初学者不太容易理解。这些片段对 GLSL 意味着什么：

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

此外，如果我的图像较大，我不想填满整个 canvas。我想将所有纹理渲染为 512 * 384 (4:3)，如何通过修改顶点来实现。

Answer 1

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

Answer 2

因为我也写了你链接的示例，所以我很好奇如何改进该网站上已有的解释

您链接的示例来自 this page。

那个页面说在最上面

This is a continuation from WebGL Fundamentals. If you haven't read that I'd suggest going there first

那个页面说

WebGL only cares about 2 things. Clipspace coordinates and colors. Your job as a programmer using WebGL is to provide WebGL with those 2 things. You provide 2 "shaders" to do this. A Vertex shader which provides the clipspace coordinates and a fragment shader that provides the color.

Clipspace coordinates always go from -1 to +1 no matter what size your canvas is

然后显示了一个使用剪辑 space 坐标的示例。

在那之后它说我们可能宁愿以像素为单位工作，并显示一个带有注释的着色器，详细说明如何从像素转换为剪辑 space

For 2D stuff you would probably rather work in pixels than clipspace so let's change the shader so we can supply rectangles in pixels and have it convert to clipspace for us. Here's the new vertex shader
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);
}

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

我很想听听任何我可以使它更清晰的想法

谁能解释这些与 WebGL 相关的片段

Can anyone explain these snippets related to WebGL

glsl