如何在WebGL中设置绘制矩形的宽度与高度？

问题根源 #

你当前的顶点坐标是硬编码的裁剪空间坐标（范围-1到1），WebGL会直接将这些坐标映射到canvas视口，导致矩形大小固定。要动态调整宽高，需要通过Shader变量控制顶点的缩放变换。

方案一：用Uniform变量快速控制缩放 #

这种方式简单直接，适合快速调整矩形尺寸：

修改顶点Shader #

添加u_scale uniform变量来传递宽高缩放因子：

attribute vec3 a_position;
uniform vec2 u_scale; // 存储宽、高的缩放比例

void main() {
  // 对原始顶点坐标进行缩放后输出到裁剪空间
  gl_Position = vec4(a_position.x * u_scale.x, a_position.y * u_scale.y, a_position.z, 1.0);
}

更新JavaScript代码 #

在激活程序后，获取uniform位置并设置缩放值：

gl.useProgram(program);

// 获取缩放uniform的位置
const scaleUniformLoc = gl.getUniformLocation(program, 'u_scale');
// 设置宽为0.8、高为0.3的缩放比例
gl.uniform2f(scaleUniformLoc, 0.8, 0.3);

// 后续的缓冲区创建、属性绑定逻辑保持不变...

如果需要动态调整大小，只需在animate函数中重新调用gl.uniform2f更新参数即可。

方案二：用MVP矩阵适配游戏场景 #

游戏开发中通常使用模型(Model)-视图(View)-投影(Projection)矩阵管理坐标变换，支持缩放、平移、旋转等多种操作，扩展性更强：

修改顶点Shader #

attribute vec3 a_position;
uniform mat4 u_mvpMatrix; // MVP变换矩阵

void main() {
  gl_Position = u_mvpMatrix * vec4(a_position, 1.0);
}

更新JavaScript代码 #

实现矩阵生成与传递逻辑：

// 生成缩放矩阵的工具函数
function createScaleMatrix(scaleX, scaleY, scaleZ) {
  return new Float32Array([
    scaleX, 0, 0, 0,
    0, scaleY, 0, 0,
    0, 0, scaleZ, 0,
    0, 0, 0, 1
  ]);
}

gl.useProgram(program);

// 获取MVP矩阵的uniform位置
const mvpMatrixLoc = gl.getUniformLocation(program, 'u_mvpMatrix');
// 创建宽0.6、高0.4的缩放矩阵
const scaleMatrix = createScaleMatrix(0.6, 0.4, 1.0);
// 将矩阵传递给Shader
gl.uniformMatrix4fv(mvpMatrixLoc, false, scaleMatrix);

// 后续逻辑保持不变...

这种方式的优势是后续可轻松扩展平移、旋转变换，完全适配游戏中物体的复杂运动需求。

额外提示 #

• WebGL裁剪空间的坐标范围是x轴-1到1（对应画布左右）、y轴-1到1（对应画布上下），缩放因子大于1会让矩形超出画布，小于1则缩小。
• 如果游戏需要适配不同屏幕比例，还需添加投影矩阵处理画布宽高比，避免图形拉伸变形。

内容的提问来源于stack exchange，提问作者Alişan DOĞAN