webGL第五课——屏幕坐标转到webGL坐标

看到第四课,发现好多知识需要了解,所以应该进行系统性顺序性的学习了.参考《webGL编程指南》

webGL入门知识

  • 浏览器支持html5之后,可以创建canvas,并调用js进行二维图形的绘制。
  • 要使用webGL绘制图形,必须使用着色器。着色器是webGL的核心机制。
  • drawArrays函数说明:
  • 这里写图片描述

屏幕上点转换成webGL坐标系中的点,参照下图所示

依据平面坐标系转换公式进行坐标转换
 x=(xx0)cosθ(yy0)sinθ
 y=(xx0)sinθ+(yy0)cosθ

 x0,y0;θ;x,y

  1. 首先将屏幕上的点P转换到cavans坐标系下。  x=(xa);y=(yb),(a,b)canvas
  2. 将P点转换到webGL坐标系中。
    • webGL坐标系相对于canvas坐标系y轴方向相反。
    • webGL坐标系原点在原来canvas坐标系中的坐标为(w/2,h/2)。
       x′′=(xw/2)=xaw/2y′′=1(yh/2)=h/2y=h/2y+b
  3. 因为canvas坐标系的范围为x(0,w),y(0,h);webGL坐标系范围为x(-1,1),y(-1,1)。需要进行缩放操作,将原坐标系数据缩放到webGL尺度下。
     x/2=x/w;y/2=y/h;x=2x/w;y=2y/h;
  4. 最终,屏幕点P在webGL坐标系中的坐标为
    x=2(xaw/2)/w

    y=2(h/2+by)/h

    x,yx,ywebGL

    这里写图片描述
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Cesium是一个强大的开源JavaScript库,用于创建高度交互式的三维地图应用,尤其是在WebGL环境下。它支持将经纬度坐标(通常表示为地理坐标系统中的经纬度)转换为屏幕坐标(即用户能够在窗口或设备上看到的像素坐标)。 在Cesium中,这个过程涉及到以下几个步骤: 1. **创建地球模型**:首先,你需要创建一个`Cesium.Ellipsoid`对象来代表地球的形状,或者使用`Cesium.Globe`如果需要更精细的细节。 2. **视角设置**:你需要有一个`Cesium.Viewer`实例,并设置好视角的中心经纬度(`position`属性)和朝向(`orientation`属性)。 3. **转换坐标系**:`Cesium`提供了`ellipsoid.cartographicToCartesian()`方法来将地理坐标(经纬度和海拔)转换为地球表面的Cartesian坐标。这个坐标系表示地球上任意点的三维位置。 4. **投影到视口**:使用`Cesium.Scene`的`project`方法,将地球表面的Cartesian坐标投影到屏幕上,这个方法会考虑地球曲率、相机视角等因素。 5. **屏幕坐标**:`project`返回的是一个`Cesium.Cartesian3`对象,包含了屏幕上的像素坐标,你可以从中提取`x`和`y`值作为屏幕坐标的横纵坐标。 以下是一个简单的示例代码片段: ```javascript // 假设已经有一个Viewer实例 viewer const cartographic = Cesium.Cartographic.fromDegrees(latitude, longitude, altitude); const cartesian = viewer.scene.globe.cartographicToCartesian(cartographic); const projected = viewer.camera.project(cartesian); const screenPosition = projected.x + projected.y * viewer.frustum.aspectRatio; ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

技道两进

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值