请教一个关于 webgl 坐标系的问题 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a Javascript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
Javascript 权威指南第 5 版
Closure: The Definitive Guide
nashaofu
V2EX    Javascript

请教一个关于 webgl 坐标系的问题

  •  1
     
  •   nashaofu 2023-04-26 13:44:01 +08:00 2007 次点击
    这是一个创建于 899 天前的主题,其中的信息可能已经有所发展或是发生改变。

    网上都说 webgl 坐标是右手坐标系,即画布向右为 x 轴正方向,向上为 y 轴正方向,垂直画布向外为 z 轴正方向。

    我自己实测了一个例子: https://codesandbox.io/s/admiring-hill-rrpb3o?file=/index.html ,在这个例子中,红色三角形的坐标为(-0.5, 0, 0),(0.5, 0, 0),(0.5, 0.5, 0), 蓝色三角形坐标为(-0.5, 0, 0.5)、(-0.5, 0.5, 0.5),(0.5, 0.1, -0.3)

    image

    实际渲染效果却是蓝色三角形从后面穿过了红色三角形,看起来 z 轴 -0.3 是更靠近观察者的,与上述结论刚好相反,希望解惑。

    9 条回复    2023-04-26 18:45:16 +08:00
    Caelan
        1
    Caelan  
       2023-04-26 14:13:35 +08:00
    你的例子很有趣。我看了一下你的代码,发现你没有设置投影矩阵,所以你的 webgl 坐标系是默认的裁剪空间坐标系 1 。这个坐标系是一个立方体,中心在 (0, 0, 0),边长为 2 ,范围是 (-1, -1, -1) 到 (1, 1, 1)。这个坐标系和画布的坐标系不一样,画布的坐标系是左上角为 (0, 0),右下角为 (600, 460)。如果你想让 webgl 坐标系和画布坐标系一致,你需要设置一个正交投影矩阵 2 ,或者自己把 webgl 坐标转换成画布坐标。
    MCVector
        2
    MCVector  
       2023-04-26 14:21:27 +08:00
    Webgl 的裁剪坐标系应该是左手坐标系。z 轴指向屏幕内。

    https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection#clip_space
    everywillatchina
        3
    everywillatchina  
       2023-04-26 14:22:08 +08:00
    在 object space 和 world space 是右手坐标系;但是例子已经不是这两个坐标系内了
    krapnik
        4
    krapnik  
       2023-04-26 14:38:35 +08:00
    https://github.com/GrayMind/WebGL-Programming-Guide/blob/master/pdf/WebGL%E7%BC%96%E7%A8%8B%E6%8C%87%E5%8D%97.pdf

    附录 D WebGL/OpenGL:左手还是右手坐标系?
    涉及隐藏面消除和裁剪坐标系统
    =======
    ps.《 WebGL 编程指南》入门必备
    tool2d
        5
    tool2d  
       2023-04-26 14:47:11 +08:00
    投影矩阵可以改变 Z 轴方向的,这个才是重点。
    kalluwa
        6
    kalluwa  
       2023-04-26 15:10:25 +08:00
    你在 NDC 坐标系里面,这里和左右手坐标系没关系
    nashaofu
        7
    nashaofu  
    OP
       2023-04-26 18:43:59 +08:00
    @Caelan 转换的目的是啥呢?不理解为啥要转换
    nashaofu
        8
    nashaofu  
    OP
       2023-04-26 18:44:22 +08:00
    @krapnik 先收藏了
    nashaofu
        9
    nashaofu  
    OP
       2023-04-26 18:45:16 +08:00
    @tool2d 我知道可以改变的,我再去理解一下
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     985 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 26ms UTC 23:04 PVG 07:04 LAX 16:04 JFK 19:04
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86