文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一起学 WebGL:坐标系

2024-11-30 16:51

关注

大家好,我是前端西瓜哥,今天我们来学习 WebGL。

WebGL 的世界坐标系是三维的。默认使用笛卡尔坐标系的右手坐标系,满足右手定则,即 x 轴向右,y 轴向上,z 轴向着观察者,原点位于画布中心。

然后是比较微妙的东西是坐标值,使用的是百分比。

比如对于 x 维度,取值范围为 [-1, 1]。比如 -1 表示在屏幕的最左侧,1 表示在屏幕的最右侧,0 则是在原点,0.5 表示在 x 正半轴的 1/2 处。其他维度同理。

demo

下面提供绘制一个红色点的 demo。

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

修改代码开头的 x、y、z 坐标值,体验不同坐标的绘制效果。




const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

const x = 0;
const y = 0;
const z = 0; // 因为没有引入透视矩阵,所以设置 y 没啥效果

const vertexShaderSrc = `
void main() {
gl_Position = vec4(${x.toFixed(1)}, ${y.toFixed(1)}, ${z.toFixed(1)}, 1.0);
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;


// 清空画布,并指定颜色
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制点
gl.drawArrays(gl.POINTS, 0, 1);

效果是:

浏览器坐标转 WebGL 坐标

浏览器上的点击事件,其坐标位置(e.clientX 和 e.clientY)使用的坐标系系统和 WebGL 不同。该坐标系的原点位于左上角,x 向右,但 y 是向下的。

所以如果希望光标的位置,在视觉上能够对应上 WebGL 的同一个地方,我们需要做一个坐标转换(这里假设 Canvas 左上角和网页左上角在一个位置)。

const newX = (x - canvas.height / 2) / (canvas.height / 2);
const newY = (canvas.width / 2 - y) / (canvas.width / 2);

思路是将坐标移动到画布中心,如果轴向反了,取反,然后再除以画布尺寸的一半,得到一个百分比值。

结尾

WebGL 的世界坐标系使用右手坐标系,当然坐标系可以通过矩阵计算进行转换,理论上你可以使用任何你想要的坐标系。本文讲了浏览器的坐标系,我们还有纹理坐标系,图片坐标系等坐标系,绘制到 WebGL 画布上需要做一层转换,以后再讲解。

来源:前端西瓜哥内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯