一起学 WebGL：图形变形以及矩阵变换

news2025/1/24 22:48:28

之前绘制了三角形，我们现在给它做一个变形操作。

对一个三角形进行变形，其实就是重新这个三角形的三个顶点的位置，计算完后再绘制出来，相比原来就发生了变形。

变形常见的有位移、选择、缩放。位移，其实就是给每个顶点的各个坐标值加上偏移量 dx、dy、dz。旋转稍微复杂些，用到了三角函数。最后是缩放，就是简单地各个分量乘以缩放比例系数。

这些变换可以抽象简化成对应的变换矩阵，方便我们用统一的方式作表达，并配合矩阵乘法的结合律，将多个变形矩阵合并成一个复合矩阵，减少计算量。

关于这些变形和对应的变形矩阵，本文不讲，可以看我之前写的文章 ：

《计算机图形学：变换矩阵》

直接进入正题，看看怎么用 WebGL 实现矩阵变换。

绘制三角形

我们先绘制一个普通的没做过变形的三角形。

demo 地址：

https://codesandbox.io/s/gbh1xf

代码：

/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

const vertexShaderSrc = `
attribute vec4 a_Position;
void main() {
 gl_Position = a_Position;
 gl_PointSize = 10.0;
}
`;

const fragmentShaderSrc = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

/**** 渲染器生成处理 ****/
// 创建顶点渲染器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
// 创建片元渲染器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
// 程序对象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;

// 顶点数据
const vertices = new Float32Array([
  // 第一个点
  0,
  0.5,
  // 第二个点
  -0.5,
  -0.5,
  // 第三个点
  0.5,
  -0.5
]);

// 创建缓存对象
const vertexBuffer = gl.createBuffer();
// 绑定缓存对象到上下文
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 向缓存区写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 获取 a_Position 变量地址
const a_Position = gl.getAttribLocation(gl.program, "a_Position");
// 将缓冲区对象分配给 a_Position 变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

// 允许访问缓存区
gl.enableVertexAttribArray(a_Position);

/*** 绘制 ***/
// 清空画布，并指定颜色
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);

渲染效果：

位移

位移，最简单的方式是再声明一个 u_Translation 向量，和 a_Position 相加就完事了：

但还是矩阵比较方便，具有可以统一格式，计算复合矩阵等优势。通常变形都是复杂的，旋转后平移然后再缩放一套下来，矩阵还是很重要的。

顶点着色器的代码修改为：

const vertexShaderSrc = `
attribute vec4 a_Position;
uniform mat4 u_xformMatrix;
void main() {
 gl_Position = u_xformMatrix * a_Position;
}
`;

西瓜哥在这里加多了一个 u_xformMatrix 变量。

首先用了 uniform 类型修饰符，表示这个变量不会逐顶点发生变化，是固定的。mat4 表示一个 4x4 矩阵，一个有 16 个浮点数的一维数组。

来看看通过矩阵进行位移的实现。位移矩阵如下：

[ 1 0 0 d x 0 1 0 d y 0 0 1 d z 0 0 0 1 ] [ x y z 1 ] \begin{aligned} \\ &\begin{bmatrix} 1 & 0 & 0 & dx \\ 0 & 1 & 0 & dy \\ 0 & 0 & 1 & dz\\ 0 & 0 & 0 & 1\\ \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix} \end{aligned} ​ ​1000​0100​0010​dxdydz1​ ​ ​xyz1​ ​​

对应的 Float32Array 数组为：

/****** 位移矩阵 ****/
const dx = 0.5; // 向右移动
const dy = -0.3; // 向下移动
// z 先不管，没用到透视矩阵，设置值也看不到效果

const xformMatrix = new Float32Array([
  1, 0, 0, 0,

  0, 1, 0, 0,

  0, 0, 1, 0,

  dx, dy, 0, 1
]);

WebGL 用的是按列主序（column major order）规则，即按列填充矩阵，从左往右，属于主流。

还有一种是按行主序（row major order）的，也就是将遍历数组一行行填充到矩阵，从上往下。比较少见。

接着把这个数组怼到前面顶点着色器声明的 u_xformMatrix 变量中。

const u_xformMatrix = gl.getUniformLocation(gl.program, "u_xformMatrix");
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

这里是用 gl.uniformMatrix4fv 来设置 4x4 矩阵的值。

完整代码：

/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

const vertexShaderSrc = `
attribute vec4 a_Position;
uniform mat4 u_xformMatrix;
void main() {
 gl_Position = u_xformMatrix * a_Position;
}
`;

const fragmentShaderSrc = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

/**** 渲染器生成处理 ****/
// 创建顶点渲染器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
// 创建片元渲染器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
// 程序对象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;

// 顶点数据
const vertices = new Float32Array([
  // 第一个点
  0,
  0.5,
  // 第二个点
  -0.5,
  -0.5,
  // 第三个点
  0.5,
  -0.5
]);

// 创建缓存对象
const vertexBuffer = gl.createBuffer();
// 绑定缓存对象到上下文
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 向缓存区写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 获取 a_Position 变量地址
const a_Position = gl.getAttribLocation(gl.program, "a_Position");
// 将缓冲区对象分配给 a_Position 变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

// 允许访问缓存区
gl.enableVertexAttribArray(a_Position);

/****** 位移矩阵 ****/
const dx = 0.5; // 向右移动
const dy = -0.3; // 向下移动
// z 先不管，没用到透视矩阵，设置值也看不到效果

const xformMatrix = new Float32Array([
  1,
  0,
  0,
  0,

  0,
  1,
  0,
  0,

  0,
  0,
  1,
  0,

  dx,
  dy,
  0,
  1
]);
const u_xformMatrix = gl.getUniformLocation(gl.program, "u_xformMatrix");
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

/*** 绘制 ***/
// 清空画布，并指定颜色
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);

demo 地址：

https://codesandbox.io/s/09ujp5?file=/index.js

看看效果：

成功向右并向下移动了一段距离。

旋转

顶点着色器的代码不用改，这次我们传一个旋转矩阵进去，就逆时针旋转 90 度吧，沿着 z 轴作旋转。

公式为：
[ cos ⁡ θ − sin ⁡ θ 0 0 sin ⁡ θ cos ⁡ θ 0 0 0 0 1 0 0 0 0 1 ] [ x y z 1 ] \begin{aligned} \\ \begin{bmatrix} \cos \theta &-\sin \theta & 0 & 0 \\ \sin \theta &\cos \theta & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix} \end{aligned} ​cosθsinθ00​−sinθcosθ00​0010​0001​ ​ ​xyz1​ ​​
这个公示是几何数学推导出来的。

数组数据为：

/****** 旋转矩阵 ****/
const angle = 90;
const radian = (angle * Math.PI) / 180;
const cos = Math.cos(radian);
const sin = Math.sin(radian);

const xformMatrix = new Float32Array([
  cos, sin, 0, 0,

  -sin, cos, 0, 0,

  0, 0, 1, 0,

  0, 0, 0, 1
]);

因为很多 API 只支持弧度制，所以我们需要将角度转弧度。

然后是旋转方向，提供一个正数，WebGL 是沿着逆时针旋转的。顺带一提， Canvas 2D 是顺时针旋转的。

完整代码：

/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

const vertexShaderSrc = `
attribute vec4 a_Position;
uniform mat4 u_xformMatrix;
void main() {
 gl_Position = u_xformMatrix * a_Position;
}
`;

const fragmentShaderSrc = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

/**** 渲染器生成处理 ****/
// 创建顶点渲染器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
// 创建片元渲染器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
// 程序对象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;

// 顶点数据
const vertices = new Float32Array([
  // 第一个点
  0,
  0.5,
  // 第二个点
  -0.5,
  -0.5,
  // 第三个点
  0.5,
  -0.5
]);

// 创建缓存对象
const vertexBuffer = gl.createBuffer();
// 绑定缓存对象到上下文
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 向缓存区写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 获取 a_Position 变量地址
const a_Position = gl.getAttribLocation(gl.program, "a_Position");
// 将缓冲区对象分配给 a_Position 变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

// 允许访问缓存区
gl.enableVertexAttribArray(a_Position);

/****** 旋转矩阵 ****/
const angle = 90;
const radian = (angle * Math.PI) / 180;
const cos = Math.cos(radian);
const sin = Math.sin(radian);

const xformMatrix = new Float32Array([
  cos,
  sin,
  0,
  0,

  -sin,
  cos,
  0,
  0,

  0,
  0,
  1,
  0,

  0,
  0,
  0,
  1
]);
const u_xformMatrix = gl.getUniformLocation(gl.program, "u_xformMatrix");
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

/*** 绘制 ***/
// 清空画布，并指定颜色
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);

demo 地址：

https://codesandbox.io/s/wx44l0?file=/index.js

渲染效果：

缩放

缩放公式为：
[ s x 0 0 0 0 s y 0 0 0 0 s z 0 0 0 0 1 ] [ x y z 1 ] \begin{aligned} \\ \begin{bmatrix} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix} \end{aligned} ​sx000​0sy00​00sz0​0001​ ​ ​xyz1​ ​​

数组为：

/****** 缩放矩阵 ****/
const sx = 2;
const sy = 2;
const sz = 1;
// sz 先不管，没用到透视矩阵，设置了值也看不到效果

const xformMatrix = new Float32Array([
  sx, 0, 0, 0,

  0, sy, 0, 0,

  0, 0, sz, 0,

  0, 0, 0, 1
]);

完整代码：

/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

const vertexShaderSrc = `
attribute vec4 a_Position;
uniform mat4 u_xformMatrix;
void main() {
 gl_Position = u_xformMatrix * a_Position;
}
`;

const fragmentShaderSrc = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

/**** 渲染器生成处理 ****/
// 创建顶点渲染器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
// 创建片元渲染器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
// 程序对象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;

// 顶点数据
const vertices = new Float32Array([
  // 第一个点
  0,
  0.5,
  // 第二个点
  -0.5,
  -0.5,
  // 第三个点
  0.5,
  -0.5
]);

// 创建缓存对象
const vertexBuffer = gl.createBuffer();
// 绑定缓存对象到上下文
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 向缓存区写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 获取 a_Position 变量地址
const a_Position = gl.getAttribLocation(gl.program, "a_Position");
// 将缓冲区对象分配给 a_Position 变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

// 允许访问缓存区
gl.enableVertexAttribArray(a_Position);

/****** 缩放矩阵 ****/
const sx = 2;
const sy = 2;
const sz = 2;
// z 先不管，没用到透视矩阵，设置了值也看不到效果

const xformMatrix = new Float32Array([
  sx,
  0,
  0,
  0,

  0,
  sy,
  0,
  0,

  0,
  0,
  sz,
  0,

  0,
  0,
  0,
  1
]);
const u_xformMatrix = gl.getUniformLocation(gl.program, "u_xformMatrix");
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

/*** 绘制 ***/
// 清空画布，并指定颜色
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);

demo 地址：

https://codesandbox.io/s/jsfdtr?file=/index.js

绘制效果：

结尾

我是前端西瓜哥，欢迎关注我，学习更多 WebGL 知识。

矩阵变换是 WebGL 非常重要的一部分。

本节介绍了三种常见的变形矩阵，并展示了各自的效果，下节我们讲多个矩阵的组合，复合矩阵。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/413623.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

中国版ChatGPT即将来袭-国内版ChatGPT入口

中国版ChatGPT即将来袭-国内版ChatGPT入口

必应chatGPT入口 目前并不存在“必应ChatGPT”这个概念。必应（Bing）是Microsoft公司推出的一款搜索引擎，而ChatGPT是OpenAI开发的自然语言处理技术，它们是两个不同的产品品牌。 不过，Microsoft也在自然语言处理领域里…
阅读更多...
Microsoft 365管理和报告工具

Microsoft 365管理和报告工具

在管理 Microsoft 365 设置的过程中，本机Microsoft 365 功能可能无法满足你的需求。M365 Manager Plus 具有复杂的功能，使 Microsoft 365 管理毫不费力。它提供基于功能的管理，因此你可以单独管理 Microsoft 365 组件。 使用 M365 Manager P…
阅读更多...
进程的概念以及PCB的概念

进程的概念以及PCB的概念

在linux上进程是非常重要的知识点，今天我自我发表浅见。 可执行程序与进程 当在linux上编译完毕一个源文件生成可执行程序，这个时候这可执行程序只能称为普通文件，还不能定义为进程，在加载在内存中后才可称为进程，那…
阅读更多...
次优二叉查找树（次优查找树)_递归和非递归实现_20230414

次优二叉查找树（次优查找树)_递归和非递归实现_20230414

次优二叉查找树（次优查找树)-递归和非递归实现 前言 当有序表中的各记录的查找概率相等的时候，采用折半查找效率可以提升查找性能；如果有序表中的各记录的查找概率不相等，那么折半查找就不再适用。 如果只考虑查找成功的情况&a…
阅读更多...
Robocup 仿真2D 学习笔记（四）阵型编辑

Robocup 仿真2D 学习笔记（四）阵型编辑

一、阵型文件介绍 阵型文件里设置的是球员在比赛中的跑位点 基于helios base的阵型文件，在目录/src/formations-dt中 阵型的调用在/src/strategy.cpp 文件： before-kick-off.conf 是球员上场之后的阵型 （或进球等待开球） no…
阅读更多...
有限元基础编程-何晓明老师课件-一维程序实现matlab

有限元基础编程-何晓明老师课件-一维程序实现matlab

文章目录前言一、主程序二、一维有限元求解程序-框架三、组装刚度矩阵assemble_matrix_from_1D_integral.m2.1 算法2.2 get_standard_gauss_1D.m2.3 get_Gauss_local_1D.m前言 只是为方便学习，不做其他用途，课程理论学习来自b站视频有限元基础编程-何晓明…
阅读更多...
RT-Thread线程管理以及内核裁剪

RT-Thread线程管理以及内核裁剪

RT-Thread线程管理以及内核裁剪 1. RTOS概述 1.1 RTOS的定义 实时操作系统（Real-time operating system, RTOS），又称即时操作系统，它会按照排序运行、管理系统资源，并为开发应用程序提供一致的基础。 实时操作系统与…
阅读更多...
核心业务2：借款人申请借款额度

核心业务2：借款人申请借款额度

核心业务2：借款人申请借款额度 1.业务流程图 ------------截止提交个人信息部分-------- 2.借款人申请借款额度数据库设计 3.借款人申请额度流程 4.前端代码逻辑 5.后端代码逻辑 ------------截止提交个人信息部分-------- 核心业务2：借款人申请借…
阅读更多...
Linux从命令行管理文件

Linux从命令行管理文件

目录 一、创建链接文件 二、目录操作命令 1. 创建目录（make directory） 2. 统计目录及文件的空间占用情况 3. 删除目录文件 三、创建、删除普通文件 文件命名规则： （1）不能使用/来当文件名，/是用来做…
阅读更多...
【WCH】CH32F203软件I2C驱动SSD1306 OLED

【WCH】CH32F203软件I2C驱动SSD1306 OLED

【WCH】CH32F203软件I2C驱动SSD1306 OLED📌相关篇《【WCH】CH32F203硬件I2C驱动SSD1306 OLED》📺驱动显示效果： 🌿OLED屏幕：i2c ssd1306 oled🔖驱动单片机型号：CH32F203 ✨由于CH32F203主频为96…
阅读更多...
wordpress下载插件，安装失败，无法创建目录问题

wordpress下载插件，安装失败，无法创建目录问题

刚开始安装这个wordpress，在发表文章时候想要在其中加上图片，不想一个个手动上传媒体库，耽误时间，然后就去下了个imagepaste这个复制粘贴的插件，当我打开安装插件搜索到的时候准备安装，尼玛出现“安装失败&…
阅读更多...
若一个单词被拆分成多少token, word_ids得到的序号是相同的？还是序号累加的？

若一个单词被拆分成多少token, word_ids得到的序号是相同的？还是序号累加的？

目录 问题描述： 问题实现： 方法一： 方法二： 问题描述： 在使用tokenizer进行编码的时候，经常会存在word被拆分成多个token的情况，不同的参数设置，会得到不同的结果。总的来说&…
阅读更多...
redis——使用

redis——使用

session缓存缓存更新方式删除缓存vs更新缓存缓存和数据库操作原子性缓存和数据库操作顺序结论缓存问题缓存穿透缓存雪崩缓存击穿全局唯一ID数据并发线程安全单体分布式redis分布式锁的问题redis消息队列listpubsubstream消息推送session 问题：session存在tomcat服务…
阅读更多...
【Linux驱动开发】023 platform设备驱动

【Linux驱动开发】023 platform设备驱动

一、前言 驱动分离目的：提高Linux代码重用性和可移植性。 二、驱动的分隔与分离 百度看了很多，大多都没讲清楚为什么使用platform驱动，为什么驱动分隔与分离可以提高代码重用性，只是在讲实现的结构体、函数接口等等&#xff0c…
阅读更多...
npm、pnpm、yarn的常用命令

npm、pnpm、yarn的常用命令

npm、pnpm、yarn的常用命令 文章目录npm、pnpm、yarn的常用命令一、常用命令1、npm命令2、pnpm命令：3、yarn命令二、对比一、常用命令 1、npm命令 npm init: 初始化一个新的npm包。 npm install: 安装项目依赖项。 npm install : 安装指定的包。 npm install --sa…
阅读更多...
【Java数据结构】链表(Linked List)-双向链表

【Java数据结构】链表(Linked List)-双向链表

双向链表（Linked List）是一种常用的数据结构，它允许在所有节点中快速添加或删除元素，并且可以有效地实现反向遍历。本篇文章将介绍双向链表的基础知识，并提供使用Java语言实现该数据结构的示例代码。 一、双向链表的基…
阅读更多...
mysql数据库事务脏读、不可重复度、幻读详解

mysql数据库事务脏读、不可重复度、幻读详解

文章目录1 事务隔离级别2 脏读3 不可重复度3.1 解决了脏读的问题。3.2 有不可重复度的问题4 幻读4.1 没有脏读和不可重复读的问题4.2 有幻读的问题5 serializable1 事务隔离级别 read-uncommitted：脏读、不可重复度、幻读，均可出现。安全性低&#xff0…
阅读更多...
HBase架构篇 - Hadoop家族的天之骄子HBase

HBase架构篇 - Hadoop家族的天之骄子HBase

HBase的基本组成结构 表（table） HBase 的数据存储在表中。表名是一个字符串。表由行和列组成。 行（row） HBase 的行由行键（rowkey）和 n 个列（column）组成。行键没有数据类型&…
阅读更多...
《花雕学AI》06：抢先体验ChatGPT的九个国内镜像站之试用与综合评测

《花雕学AI》06：抢先体验ChatGPT的九个国内镜像站之试用与综合评测

最近ChatGPT持续大火，大家们是不是在网上看到各种和ChatGPT有趣聊天的截图，奈何自己实力不够，被网络拒之门外，只能眼馋别人的东西。看别人在体验，看别人玩，肯定不如自己玩一把舒服的啊。 上一期&#xff0…
阅读更多...
2.5d风格的游戏模式如何制作

2.5d风格的游戏模式如何制作

文章目录一、 介绍二、 绘制瓦片地图三、 添加场景物体，添加碰撞器四、 创建玩家五、 创建玩家动画六、 玩家脚本七、 2d转换成2.5d八、 “Q”键向左转动视角、“E”键向右转动视角九、 下载工程文件一、 介绍 制作一个类似饥荒风格的2.5d游戏模板。 2.5D游戏是指以…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023