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

原创 已于 2024-11-28 15:18:00 修改 · 973 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webgl #uv #计算机视觉

于 2024-02-26 14:05:20 首次发布
本文介绍了Web开发中Canvas、WebGL和UV坐标系的区别，包括Canvas的左上角原点，x轴向右y轴向下；WebGL的中心原点，x轴向右y轴向上，数据范围[-1,1]；以及UV坐标系统的左下角原点，同样x轴向右y轴向上，数据范围同样为[-1,1]。

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

二、webgl、屏幕归一化坐标（NDC）：原点在正中间，x轴正方向向右，y轴正方向向上。

注意：NDC数据显示范围在[-1,1]之间，超过此范围不显示数据

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

uv坐标不直接表示纹理的像素位置，而是一个比例关系，例如u=0.5,v=0.5 表示纹理的正中心

四：纹理空间：单位是像素，而不是比例，原点在左下角

Three 之 three.js （webgl）shader 中 Texture 贴图 uv 坐标的相关简单说明，并简单测试 UV 重复旋转偏移效果
仙魁XAN
04-09 9192
纹理坐标系统 uv其实就是纹理坐标，因为xyz已经被顶点坐标占用了，所以uvw就用来表示纹理坐标。它时候贴图影射到模型表面的依据，把表面的点与平面上的像素对应起来，一般取值在0~1； u：图片在显示器水平的坐标 v：垂直方向 w：垂直于显示器表面 一般情况只是在表面贴图，就涉及不到w，所以常称为uv。 ThreeJS纹理贴图 使用纹理对象贴图 ThreeJS本身做了封装，贴图十分方便，如果大家英文好可以直接去官网，嫌麻烦也可以在中文网站上直接查看教程或对象方法。（⚠️以下非完整代码） ...
webgl纹理贴图机制
qq_37987033的博客
01-23 3133
在计算机图形学中，为了模拟更加真实的效果，需要给每个像素赋予不同的颜色值，这种情况下如果手动指定每个像素点的rgb值，将会是一件难以完成的任务。这就需要有一种机制，能够让我们把图片素材渲染到模型的一个或者多个表面上，这种机制叫做纹理贴图，本文将详细介绍在webgl中如何把一张真实图像贴到计算器图形上的。
WebGL系列教程六（纹理映射与立方体贴图）
AIGIS的博客
09-12 2195
上一讲我们讲了如何使用索引绘制彩色立方体，还留了一个思考题：怎么让立方体的每个面都保持一个颜色?这一讲我们就来解决这个问题，并引出纹理映射和立方体贴图。其实这个词语还是比较好理解。见名知意，大概意思就是把纹理映射到某个地方，纹理是什么？现在你可以简单的认为纹理就是一张图片。把一张二维的图片映射到一个三维物体的表面，就叫纹理映射。本节我们从如何将立方体每个面的颜色改为相同的颜色开始，介绍到了如何将图片贴到立方体的表面，系统的分析了为什么不能再共用顶点，并将代码进行了修改，以及讲解了纹理坐标的使用。
android 纹理坐标原点,OpenGL顶点坐标与纹理坐标
weixin_39979215的博客
05-26 673
引言这里先给自己打个广告，前些天闲来无事，在GitHub Pages上搭建了个博客，基于Jekyll模板搭建的，参考了码志作者的博客模板，在此表示感谢。同时欢迎大家来我的博客捧场。顶点坐标系这里不说Android的坐标系，只分析OpenGL的坐标系，而且本文只分析二维坐标系，三维坐标系不在分析范围。在分析OpenGL顶点坐标系之前，我们先来看一张图。OpenGL_ coordinate.jpg图中...
Canvas 画布中坐标系的位置问题(原点确定)
热门推荐
qq_40556950的博客
04-01 1万+
Canvas在后台数据可视化中十分重要，很多时候数据都会有Canvas化成一系列类似于折线图和饼状图的形式呈现。最近在学习Canvas过程中，学到建立坐标系过程中。在确定了步骤之后，发现原点确立有个小问题。 刚开始确定了6个步骤： 但是在原点确立过程中，发现在我设置了space和arrowSizede的值时(旁边是我自己的理解)，发现y轴原点确立只能这么计算： 所呈现的效果才是这样的： 当我修...
WebGL中的各种坐标系
tts819372500的博客
06-13 972
webgl在绘制时，是在一个画布上进行绘制的，canvas标签的width，height属性为画布的宽高；style的width、height设置大于canvas标签的width，height属性时，相当于显示屏的分辨率很大，但画布的像素很低，显示时相当于将画布放大，会出现模糊现象。单图片对应的像素点在图片坐标系的坐标与对应点在纹理坐标系中的坐标相同，所以写UV坐标时，我们直接按照顶点对应的像素点在图片坐标系中的坐标来作为UV坐标即可。：左下角为原点（0，0），水平向右为x轴正方向，垂直向上为y轴正方向。
threejs顶点UV坐标、纹理贴图
qq_58956810的博客
05-28 1363
本文摘要总结了Three.js纹理贴图的核心概念和应用技巧。主要内容包括：1）使用TextureLoader加载图片创建纹理对象，通过.map属性将纹理映射到几何体材质上；2）UV坐标的自定义方法，通过修改几何体attributes.uv属性控制纹理采样区域；3）圆形平面纹理映射的实现原理；4）利用纹理对象的.wrapS/.wrapT和.repeat属性实现阵列平铺效果；5）透明PNG贴图在场景标注中的应用；6）通过纹理.offset属性实现UV动画效果，结合.wrapS/wrapT可制作连续滚动的传送带动
基于HTML5 Canvas和WebGL实现图片的交互式几何变换
Enjolras' Studio
10-12 5194
基于HTML5 Canvas和WebGL实现图片的交互式几何变换
分享webgl魔幻星球
通达的博客
04-05 840
比如有负责渲染HTML+css的工人，有负责渲染二维图形的工人，有负责渲染三维图形的工人。webgl坐标基底中的两个分量分别是半个canvas的宽和canvas的高，即1个单位的宽便是半个个canvas的宽，1个单位的高便是半个canvas的高。canvas 2d 坐标系的坐标基底有两个分量，分别是一个像素的宽和一个像素的高，即1个单位的宽便是1个像素的宽，1个单位的高便是一个像素的高。渲染二维图形的工人和渲染三维图形的工人不是一个国家的，他们说的语言不一样。渲染三维图形的工人说的是GLSL ES 语言。
WebGL-Shader入门（5.着色器语言GLSL ES 内置变量和内置函数）
点燃火柴的博客
07-08 2681
GLSL ES 内置变量和内置函数1. 内置变量 1. 内置变量
ThreeJS(WebGL)如何使用UV坐标贴图，实现UV旋转偏移？
from_the_star的博客
06-07 8022
ThreeJS是WebGL的一种前端框架，UV坐标的原理是一样的。 前置知识 WebGL纹理 如果对WebGL有兴趣，可以去看WebGL贴材质这篇文章简单了解下。 纹理坐标系统 uv其实就是纹理坐标，因为xyz已经被顶点坐标占用了，所以uvw就用来表示纹理坐标。它时候贴图影射到模型表面的依据，把表面的点与平面上的像素对应起来，一般取值在0~1； u：图片在显示器水平的坐标 v：垂直方向 w：垂直于显示器表面 一般情况只是在表面贴图，就涉及不到w，所以常称为uv。 ThreeJS纹理贴图 使用纹理对象贴图 T
Reportlib库——canvas 画布坐标系、原点
baidu_38860188的博客
10-20 613
Reportlib库——canvas 画布坐标系、原点
WEBGL之一——坐标
luoyun620的博客
04-12 593
要想用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,
OpenGL ES 3. 顶点坐标 纹理坐标
sy_liao的专栏
04-04 4003
大家好，接下来将为大家介绍OpenGL ES 3. 顶点坐标 纹理坐标。 上一节我们介绍了OpenGL ES 3. 坐标系及坐标变换。 了解坐标系是渲染绘制图形的基础。在实际OpenGL的开发中，有世界坐标、纹理坐标、屏幕坐标等几种。 1、顶点坐标 首先需要明确的是，OpenGL使用的是笛卡尔右手坐标系，如下图所示。 分X Y Z 3个轴，X轴朝右为正，Y轴朝上为正，Z轴垂直屏幕朝外...
WebGl-4.WebGl坐标系
qq_25064691的博客
09-11 959
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 常用的坐标系相互转换
啦啦啦啦
03-13 1806
纹理贴到canvas上,然后通过点击canvas上的点找纹理对应的位置然后反算世界坐标系 注意:cesium相机实时渲染纹理 默认会进行y轴翻转 1.拿到的fbo 经过readPixels后,会有一堆Uint8Array 数据 需要给转换成rgba; let r = pixels[i]; let g = pixels[i + 1]; let b = pixels[i + ...
WebGL屏幕坐标系、canvas坐标系和WebGL坐标系转换——学习笔记
pon的博客
12-02 3936
canvas坐标系转为webgl坐标系，webgl的坐标是x[-1, 1]，y[-1, 1]。 ①获取canvas在浏览器客户区中的坐标 var x = ev.clientX; var y = ev.client.Y; var rect = ev.target.getBoundingClientRect(); 图中的P点（x,y）为该点在屏幕坐标系下的坐标值； 图中canvas原点在屏幕坐标系下的坐标值为（a,b），即canvas在屏幕上左上角的位置坐标； 其中(a,b)坐标中： a = rect..
OpenGL纹理坐标 与 Cocos2d-x 纹理坐标
Wlk1229
12-18 2215
Cocos2d-x 纹理坐标 声明：本文使用的是cocos2d-x-3.17的代码 OpenGL纹理坐标 在OpenGL中2D纹理坐标系如下： 原点为左下角，向右为X轴正方向，向上为Y轴正方向。 纹理数据排列 创建一个2*2的二维纹理，需要四个像素，以下是4个像素的数据 floattexData[]={1.0,0.0,0.0,1.0, ...
[OpenGL] OpenGL的纹理坐标问题
...
05-20 2491
Window系统中，屏幕坐标原点在屏幕的左上角,X轴向右为正,Y轴向下为正.度量单位是象素 OpenGL的定义中，纹理坐标原点在画布的左下角,X轴向右为正,Y轴向上为正 左下角坐标为(0.0f, 0,0f), 右上角坐标为(1.0f, 1.0f)和形状（矩形是否为正方形）无关， 其他位置取0到1之间的一个浮点数插值得到 这也是为什么在Windows平台进行OpenGL编程的...
export const vertexShaderSource = ` precision mediump float; // 指定浮点数精度 attribute vec2 xy; uniform vec2 scale; uniform vec2 translate; varying highp vec2 uv; void main(void) { vec2 scaledPosition = xy * scale + translate; gl_Position = vec4(scaledPosition, 0.0, 1.0); uv = vec2((1.0 + xy.x) / 2.0, (1.0 - xy.y) / 2.0); } `
最新发布
06-26
注意：纹理坐标的原点通常在左上角，但WebGL的纹理坐标原点在左下角。这里通过`(1.0-xy.y)/2.0`将y坐标翻转，使得原点在左上角。但是，这里有一个潜在问题：我们传入的顶点坐标xy的范围可能是[-1,1]（在归一化设备...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值