超级浣熊 ShaderEditor 教程 0x02 - 纹理寻址
超级浣熊 ShaderEditor 教程 0x02 - 纹理寻址
Lesson 0x02 - Texture Lookup / 纹理寻址
接着上一篇:
继续非常基础的 Shader 内容。
上一篇中提到了，游戏渲染一张图片，最重要的一行代码其实就是:
gl_FragColor = texture2D(texture, v_uv0)
在这行代码中，最重要的函数就是 texture2D。
OpenGL 官方的解释，这是一个 纹理寻址 函数:
Texture lookup function
主要就是用来从图片纹理上获取颜色信息的。
它接收两个参数，一个是用到的图片 纹理，另一个则是 纹理寻址 的目标坐标。
Lookup Experiment / 寻址实验
大致知道了有这么回事，接下来就是实际的试试看了，毕竟 耳听为虚眼见为实 。
下面准备一种特殊的图片，用来测试寻址结果用:
图片被分为5个区域，用于后面测试纹理寻址的结果用。
Working in Creator / Creator 编辑器操作
下面我们现在 Creator 编辑器中将图片显示出来。
这次，我们需要简单修改一点儿 Shader 代码，因此我们自己先新建一个 .material 和 .effect 文件，并将他们关联起来。
接着修改下 effect 文件的内容，和上一篇一样，是基于 builtin-2d-sprite 修改的。
修改后，将 .material 拖到我们的测试图片上，替换掉默认的内置纹理。
替换后，图片依然正常显示，说明我们的 Shader 代码是没什么问题的。
Modify the Shader / 修改 Shader
接下来就是修改 Shader 的时候了，原始 Shader 在纹理寻址时，用的是一个内置属性 v_uv0，这里我们暂时不管这个，将其替换成随意的一个坐标值类型 vec2 ，代码如下:
gl_FragColor = texture2D(texture, vec2(0.0, 0.0));
保存刷新编辑器，可以看到，图片变成了 红色 ，这意味着，我们取到的值，是图片左上角这块的颜色:
通常情况下，寻址用的坐标值的范围，是 0 ~ 1。
因此我们再尝试几个不同的数值，看看结果:
gl_FragColor = texture2D(texture, vec2(0.5, 0.5));
Under the Hood / 内部原理
通过实验可以看到，Creator 引擎中，uv 纹理寻址坐标的原点 (0, 0) 位于图片的最上角。
而 (0.5, 0.5) 则正好是图片的中心部位，白色。
再进一步，想要渲染整个图片，使用的属性 v_uv0，是 Creator 的一个内置变量，在渲染一张图片的时候，片段着色器 Shader 被调用，通过使用 vuv0 将想要渲染的图片的对应坐标处的颜色信息取出，输出，用于渲染。
Working in ShaderEditor / Shader 编辑器操作
最后，在 Shader 编辑器中，同样的，来尝试下上面的这些东西。
首先新建一个项目，通过拖拽图片的方式，把默认的纹理给替换掉。
接着，和上一篇一样，用一个 TextureToRGBA 把图片输出，检查一下。
接着，新建一个 Vec2 组件，用于提供 寻址坐标 给函数 TextureToRGBA ，取代默认的 v_uv0。
可以看到，修改 Vec2 组件的值，Shader 编辑器 最后的输出，和上面在 Creator 编辑器 中尝试的一致。
Lesson Summary / 课程总结
1.texture2D 是用来纹理寻址的，配合上寻址的目的坐标，可以获取到对应的色彩信息2. Creator 引擎内置属性 v_uv0 所对应的寻址坐标，就是整个图片纹理的区域3.Creator 引擎中纹理寻址坐标的原点，在图片的左上角
前两章由于需要阐述一些基本的原理，所以略微枯燥，但是有了基本的认识之后，接下来就可以借助 Shader 编辑器，开始做一些有趣的效果了。
— 完 —
Creator星球游戏开发社区，欢迎大家投稿分享技术，让我们链接到更多的伙伴，助力开发者技术精进，知识变现！
本文分享自 Creator星球游戏开发社区 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！