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));
gl_FragColor = texture2D(texture, vec2(1.0, 1.0));
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星球游戏开发社区,欢迎大家投稿分享技术,让我们链接到更多的伙伴,助力开发者技术精进,知识变现!