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(7) views6724 comments1

发送私信

最新评论

iefreer 2019-09-12 20:26:21

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


请先 登录 再评论.
相关文章
  • ARCore基本概念和工作原理简介

    谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...

  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文...

  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

  • CSS3特性查询(Feature Query: @supports)功能简介

    这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...

  • HTTP1.1协议现状、问题和解决方案

    HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...

  • 使用SVG和CSS3创建圆形进度条动画

    圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...

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

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

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...

  • 如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象

    我们之前使用CSS3实现过

  • 使用requestAnimationFrame和Canvas给按钮添加绕边动画

    要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...

  • 更多...