canvas坐标系统 webgl坐标系统 uv纹理坐标系统 原点

已于 2024-03-01 15:21:49 修改
阅读量640 收藏
点赞数 7
分类专栏： webgl 文章标签： webgl uv 计算机视觉
于 2024-02-26 14:05:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AllBluefm/article/details/136295461
版权
本文介绍了Web开发中Canvas、WebGL和UV坐标系的区别，包括Canvas的左上角原点，x轴向右y轴向下；WebGL的中心原点，x轴向右y轴向上，数据范围[-1,1]；以及UV坐标系统的左下角原点，同样x轴向右y轴向上，数据范围同样为[-1,1]。
摘要由CSDN通过智能技术生成

一、canvas原点在左上角，x轴正方向向右，y轴正方向向下，一个点对应一个像素

二、webgl原点在正中间，x轴正方向向右，y轴正方向向上，数据显示范围在[-1,1]之间，超过此范围不显示数据

三、uv原点在左下角，x轴正方向向右，y轴正方向向上，数据范围在[-1,1]之间

AllBlue
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three 之 three.js （webgl）shader 中 Texture 贴图 uv 坐标的相关简单说明，并简单测试 UV 重复旋转偏移效果
仙魁XAN
04-09 8596
纹理坐标系统 uv其实就是纹理坐标，因为xyz已经被顶点坐标占用了，所以uvw就用来表示纹理坐标。它时候贴图影射到模型表面的依据，把表面的点与平面上的像素对应起来，一般取值在0~1； u：图片在显示器水平的坐标 v：垂直方向 w：垂直于显示器表面 一般情况只是在表面贴图，就涉及不到w，所以常称为uv。 ThreeJS纹理贴图 使用纹理对象贴图 ThreeJS本身做了封装，贴图十分方便，如果大家英文好可以直接去官网，嫌麻烦也可以在中文网站上直接查看教程或对象方法。（⚠️以下非完整代码） ...
webgl 常用的坐标系相互转换
啦啦啦啦
03-13 1515
纹理贴到canvas上,然后通过点击canvas上的点找纹理对应的位置然后反算世界坐标系 注意:cesium相机实时渲染纹理 默认会进行y轴翻转 1.拿到的fbo 经过readPixels后,会有一堆Uint8Array 数据 需要给转换成rgba; let r = pixels[i]; let g = pixels[i + 1]; let b = pixels[i + ...
webgl纹理贴图机制
qq_37987033的博客
01-23 2236
在计算机图形学中，为了模拟更加真实的效果，需要给每个像素赋予不同的颜色值，这种情况下如果手动指定每个像素点的rgb值，将会是一件难以完成的任务。这就需要有一种机制，能够让我们把图片素材渲染到模型的一个或者多个表面上，这种机制叫做纹理贴图，本文将详细介绍在webgl中如何把一张真实图像贴到计算器图形上的。
WebGL中的各种坐标系
tts819372500的博客
06-13 647
webgl在绘制时，是在一个画布上进行绘制的，canvas标签的width，height属性为画布的宽高；style的width、height设置大于canvas标签的width，height属性时，相当于显示屏的分辨率很大，但画布的像素很低，显示时相当于将画布放大，会出现模糊现象。单图片对应的像素点在图片坐标系的坐标与对应点在纹理坐标系中的坐标相同，所以写UV坐标时，我们直接按照顶点对应的像素点在图片坐标系中的坐标来作为UV坐标即可。：左下角为原点（0，0），水平向右为x轴正方向，垂直向上为y轴正方向。
屏幕坐标系&&webGL坐标系
默茉的博客
04-25 1261
屏幕坐标系 屏幕坐标系，主要有两种， 第一种：以左上角为原点。代表的操作系统有Windows，Android，Symbian，iOS 的Core Graphics如图1左侧。 第二种：以左下角为原点。比如iOS的CGContextDrawImage，如图2右侧。 webGL坐标系 在webGL中，世界坐标系是以屏幕中心为原点(0, 0, 0)，且是始终不变的。你面对屏幕，你的右边是x正轴，上面是...
WebGl-4.WebGl坐标系
qq_25064691的博客
09-11 842
WebGl使用的是三维坐标系统（笛卡尔坐标系），具有X轴、Y轴和Z轴。在WebGl中你面向计算机屏幕时，水平方向是X轴，垂直方向是Y轴，垂直于屏幕的是Z轴，如下图。 WebGl的坐标系和绘图区的坐标系不同，需要将前者映射到后者。WebGl坐标与坐标的对应关系如下。 的中心点：WebGl的（0.0，0.0，0.0） 的上边缘和下边缘：WebGl的(0.0，1.0，0.0)和(0.0，-1.0，0.0) 的左边缘和右边缘：WebGl的(-1.0，0.0，0.0)和(1.0，0.0，0.0) 将.
WEBGL之一——坐标
luoyun620的博客
04-12 492
要想用WEBGL绘图，那最基本的一点就是，绘制在哪里，即坐标是怎么的？下面这个坐标代表的是什么意思？ vec4(0.0, 0.0, 0.0, 1.0) vec4(-1.0, 0.0, 0.0, 1.0) vec4(0.0, 1.0, 0.0, 1.0) 为了搞明白这个问题，先把上面坐标点绘制在一个400X400的canvas，如下图： 从上面的绘制结果，我们看出WEBGL中的顶点坐标与CSS的屏幕坐标是不一样的，WEBGL的中心原点在canvas的中心，x(-1,1),y(-1,1),z(-1,
深入浅析Android坐标系统
09-02
例如，`canvas.draw()`方法需要指定画布上的起始位置，这正是基于坐标系统来完成的。 5. **动画与坐标** Android的动画系统也依赖于坐标系统。通过改变View的坐标，可以创建平移、缩放等动画效果。例如，`...
Canvas带坐标雷达扫描特效特效代码
03-20
- 使用`translate()`方法将坐标系统移动到雷达的中心，这样我们就可以以雷达为中心进行绘制。 - 使用`rotate()`方法根据当前扫描角度旋转坐标系统。 - 使用`lineTo()`方法从雷达中心绘制一条线到当前扫描角度对应...
html5之Canvas路径绘图、坐标变换应用实例
09-28
本文将深入探讨Canvas的路径绘图、坐标变换及其在时钟应用程序中的应用实例。 首先，Canvas提供了丰富的绘图方法，如`beginPath()`、`closePath()`、`rect()`和`arc()`等。`beginPath()`用于开始一个新的路径，`...
编写SVG布置画布和坐标系统以及视窗的方法
09-24
在SVG中，我们首先要理解的是画布（Canvas）、坐标系统和视窗（Viewport）的概念。 1. SVG画布：SVG画布是一个理论上无限大的平面，你可以在这个平面上的任何位置绘制图形。它不局限于固定的尺寸，这意味着你可以...
html5 canvas fillRect坐标和大小的问题解决方法
09-28
本问题主要涉及`fillRect`的坐标和大小设置，以及如何正确设置Canvas的尺寸。 `fillRect`函数接受四个参数：`x`, `y`, `width`, `height`，分别代表矩形左上角的横坐标、纵坐标以及矩形的宽度和高度。例如，`...
ThreeJS(WebGL)如何使用UV坐标贴图，实现UV旋转偏移？
from_the_star的博客
06-07 7530
ThreeJS是WebGL的一种前端框架，UV坐标的原理是一样的。 前置知识 WebGL纹理 如果对WebGL有兴趣，可以去看WebGL贴材质这篇文章简单了解下。 纹理坐标系统 uv其实就是纹理坐标，因为xyz已经被顶点坐标占用了，所以uvw就用来表示纹理坐标。它时候贴图影射到模型表面的依据，把表面的点与平面上的像素对应起来，一般取值在0~1； u：图片在显示器水平的坐标 v：垂直方向 w：垂直于显示器表面 一般情况只是在表面贴图，就涉及不到w，所以常称为uv。 ThreeJS纹理贴图 使用纹理对象贴图 T
八、WebGL入门，纹理贴图
a23366192007的博客
04-27 8115
本节我们来讲WebGL里面很重要的纹理 纹理贴图在游戏开发中十分常见，但是纹理不单单只是一张贴图那么简单。 在WebGL中，纹理有多种，一维纹理：就是一条线；二维纹理：一张二维图片；二维纹理数组：由多张二维图片组成；还有三维纹理，立体纹理，本节主要介绍二维纹理 在早期的OpenGL中，只支持图片大小为2^n的纹理，但现在支持，但是最好用大小为2^n的纹理，这样效率会比较高 先看
WebGL坐标系介绍
TW934440653的博客
10-13 8803
@TOC初识webGL 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计...
webGL第五课——屏幕坐标转到webGL坐标
lzwdlut的博客
08-18 5454
看到第四课，发现好多知识需要了解，所以应该进行系统性顺序性的学习了.参考《webGL编程指南》 webGL入门知识 浏览器支持html5之后，可以创建canvas,并调用js进行二维图形的绘制。 要使用webGL绘制图形，必须使用着色器。着色器是webGL的核心机制。 drawArrays函数说明：屏幕上点转换成webGL坐标系中的点,参照下图所示依据平面坐标系转换公式进行坐标转换  x′=(x−
体渲染原理及WebGL实现【Volume Rendering】
最新发布
新缸中之脑
08-12 2368
体渲染（Volume Rendering）是NeRF神经场辐射AI模型的基础，与传统渲染使用三角形来显示 3D 图形不同，体渲染使用其他方法，例如体积光线投射 (Volume Ray Casting)。本文介绍体渲染的原理并提供Three.js实现代码，源代码可以从下载。推荐：用快速搭建可编程3D场景。
canvas坐标转换屏幕坐标
05-13
Canvas坐标转换为屏幕坐标主要涉及到两个概念：Canvas的坐标系和屏幕的坐标系。Canvas坐标系是指Canvas画布上的坐标系，它的原点在Canvas的左上角，x轴向右增加，y轴向下增加；屏幕坐标系是指计算机屏幕上的坐标系，它的原点在屏幕左上角，x轴向右增加，y轴向下增加。 在确定Canvas坐标和屏幕坐标之间的转换关系之前，我们首先需要获取Canvas的位置信息，也就是左上角点在屏幕坐标系上的x和y坐标。可以使用以下代码获取： ```javascript const canvas = document.getElementById('myCanvas'); const canvasX = canvas.getBoundingClientRect().left; const canvasY = canvas.getBoundingClientRect().top; ``` 接下来我们需要考虑Canvas上的元素位置信息，如矩形、圆形、文本等。Canvas坐标转换为屏幕坐标的方法有两种： 1. 使用CanvasRenderingContext2D的`transform()`方法：可以通过该方法将Canvas的坐标系转换为屏幕坐标系，从而直接获取元素在屏幕上的位置信息。 ```javascript const ctx = canvas.getContext('2d'); ctx.fillRect(50, 50, 100, 100); //画一个矩形 //获取元素在屏幕上的位置信息 const screenX = 50 + canvasX; const screenY = 50 + canvasY; const screenWidth = 100; const screenHeight = 100; ``` 2. 手动计算转换：将Canvas坐标系中的坐标转换为屏幕坐标系中的坐标，需要注意的是，由于两个坐标系的原点和方向不同，因此转换时需要进行坐标轴翻转和坐标系平移等操作。 ```javascript const ctx = canvas.getContext('2d'); ctx.fillRect(50, 50, 100, 100); //画一个矩形 //手动计算元素在屏幕上的位置信息 const x = 50; const y = 50; const width = 100; const height = 100; const screenX = x + canvasX; const screenY = canvas.height - y - height + canvasY; const screenWidth = width; const screenHeight = height; ``` 在实际应用中，我们通常会采用第一种方式进行转换，因为它更为简洁方便，同时也是推荐使用的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值