WebGL 2D纹理坐标到3D顶点坐标的映射

techbrood 发表于 2019-09-12 20:24:55

标签: webgl, texture, mapping, 纹理映射, 坐标空间

- +

webgl纹理映射用来把图片贴到模型的材料表面,给模型添加丰富的细节。

该方法的核心是把一张二维的图片映射到三维的坐标空间去,也就是为每一个3d顶点找到其相应的纹理像素。

要想实现这样的目标,显然需要先把3d模型展开为2d的平面,然后才可以和2d贴图建立对等的映射关系。

我们这里以一个最简单的平面来观察这个映射的过程,我们假设webgl的纹理坐标空间为:

左上角为(0,0),顺时针依次为(1,0),(1,1),(0,1),中心点为(0.5,0.5)

而webgl 3d模型坐标空间为x向右,y向上,z垂直指向屏幕外部,坐标范围为(-1,-1,-1)到(1,1,1),中心点为(0,0,0)。

那么对于一个简单的z为0的垂直平面,uv mapping就是建立类似如下的映射关系:

uv1.png

(0,0) --> (-1,1,0)

(1,0) --> (1,1,0)

(1,1) --> (1,-1,0)

(0,1) --> (-1,-1,0)

其映射关系为 

u = (x + 1) / 2

v = (1 - y) / 2

z坐标这里忽略,就很容易从顶点坐标找到uv坐标,然后获取顶点位置所在的像素值。

当然由于分辨率不一致的原因,在建立纹理映射的时候,对于不能刚好映射到的点有一些取值策略,比如最近、线性插值等,

可以参考阅读:纹理基础知识和过滤模式详解


possitive(3) views4774 comments1

发送私信

最新评论

iefreer 2019-09-12 20:26:21

https://discoverthreejs.com/book/first-steps/textures-intro/


请先 登录 再评论.
相关文章
  • 增强现实引擎ARToolKit工作原理简介

    ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

  • CSS3人行走动作图解和动画实现

    对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...

  • 前端开发框架技术选型:Angular2 VS React VS jQuery

    Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...

  • Web界面编程状态变化和JS开发框架(React/Angular/Ember)

    UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 更多...