好的,我想通了。我将解释两种设置。
在开始之前,让我解释一下我们将使用的着色器代码:
shader_type canvas_item;
uniform mat3 matrix;
void fragment()
{
vec3 uv = matrix * vec3(UV, 1.0);
COLOR = texture(TEXTURE, uv.xy / uv.z);
}
这是一个canvas_item 着色器,因此它适用于 2D。我们正在做的是将变换矩阵(以uniform 传递)应用于纹理坐标(UV)。我们存储在uv 变量中的结果。我们将使用它来采样使用此着色器的任何节点的纹理……但是我们需要使用uv 的z 来做透视效果。为此,我们将uv.xy 除以uv.z。
但是,我想将它应用到纹理的中心。所以,让我在开头减去0.5,并在末尾添加0.5:
shader_type canvas_item;
uniform mat3 matrix;
void fragment()
{
vec3 uv = matrix * vec3(UV - 0.5, 1.0);
COLOR = texture(TEXTURE, (uv.xy / uv.z) + 0.5);
}
还有一件事。我不喜欢在极端值上我们看到相反的图像。因此,我会这样处理:
shader_type canvas_item;
uniform mat3 matrix;
void fragment()
{
vec3 uv = matrix * vec3(UV - 0.5, 1.0);
if (uv.z < 0.0) discard;
COLOR = texture(TEXTURE, (uv.xy / uv.z) + 0.5);
}
这里是无分支爱好者的替代方案(不知道是不是更好):
shader_type canvas_item;
uniform mat3 matrix;
void fragment()
{
vec3 uv = matrix * vec3(UV - 0.5, 1.0);
COLOR = texture(TEXTURE, (uv.xy / uv.z) + 0.5);
COLOR.a *= sign(sign(uv.z) + 1.0);
}
这里的sign(uv.z) 将是-1.0、0.0 或1.0。
然后sign(uv.z) + 1.0 将是0.0、1.0 或2.0。
最后sign(sign(uv.z) + 1.0) 将是0.0 或1.0(如果您愿意,可以使用clamp(sign(uv.z), 0.0, 1.0))。因此,COLOR.a *= sign(sign(uv.z) + 1.0) 将 alpha 乘以 0.0,uv.z 为负数。
注意:我之所以在片段着色器中操作 UV 坐标而不是在顶点着色器中进行操作,是因为 Godot 正在为 2D 进行仿射纹理映射。这会导致失真。这是一种解决方法。
第一个设置只是一个精灵。使用您想要的任何纹理设置Sprite,并将材质设置为新的着色器材质,并在着色器中使用我在开始时显示的代码。
Godot 将为您提供编辑材料资源中Shader Param 下的uniform mat3 matrix 的选项。默认情况下,它将是单位矩阵,在编辑器中如下所示:
x 1 y 0 z 0
x 0 y 1 z 0
x 0 y 0 z 1
您可以使用它来应用旋转、缩放、剪切或透视变换。 *我建议先改变z列(最右边)的零点,控制视角:
x 1 y 0 z 3d_rotate_horizontal
x 0 y 1 z 3d_rotate_vertical
x 0 y 0 z scale
示例结果:
建议:不要使用一直延伸到边缘的纹理。当您应用透视时,着色器将读取边缘之外的内容,但默认情况下它是钳制的,这会导致拉伸纹理边缘的任何像素。
顺便说一下,如果您将图像导入为Image(而不是默认的Texture),您可以将Sprite 纹理设置为ImageTexture,这样您就可以对纹理的显示方式进行一些额外的控制,包括启用 mipmap、antialias 过滤器和重复纹理超出其边缘(镜像和非镜像)。
第二种更复杂的设置是针对多个对象。这也是适用于TileMap 的设置。你将需要这个树形结构:
- Sprite2D
+- Viewport
+- Camera2D
+- target
将Sprite2D 定位在我们希望看到的位置,给它一个着色器材质,使用我在开始时显示的着色器代码。 顺便说一句,如果您在 UI 中需要它,这也应该与 TextureRect 一起使用。
不要为Sprite2D(或TextureRect)设置纹理。您将附加一个如下所示的脚本:
extends Sprite
func _ready():
var viewport = $Viewport
yield(get_tree(), "idle_frame")
yield(get_tree(), "idle_frame")
texture = viewport.get_texture()
如果需要,将 Sprite 更改为 TextureRect。
此代码引用Viewport 节点,等待两帧(以确保Viewport 纹理可用),然后获取纹理并将其分配给自身。
您需要为视口提供所需的大小。另外我建议设置Transparent Bg 和V Flip。 Camera2D 可以保留其默认值。
最后,“目标”就是你想要展示的任何东西。它可以是一个或多个二维节点。我建议把它做成另一个场景,这样就可以很容易地独立于这个设置来编辑它(Viewport 的任何子元素都不会在编辑器中可见)。
示例结果:
是的,我们可以在 Godot 中使用实际 3D 存档同样的效果,没问题。但我们没有。我们选择用 2D 工具来实现这个效果并做其他事情,不是因为它们容易,而是因为它们很难。
此答案中使用的纹理是公共领域 (CC0),来自 Kenney。