WebGL 2D纹理坐标到3D顶点坐标的映射
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就是建立类似如下的映射关系:
(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坐标,然后获取顶点位置所在的像素值。
当然由于分辨率不一致的原因,在建立纹理映射的时候,对于不能刚好映射到的点有一些取值策略,比如最近、线性插值等,
可以参考阅读:纹理基础知识和过滤模式详解
- 相关文章
常用光照类型基本概念工作原理及其计算公式
在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...
ARCore基本概念和工作原理简介
谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...
CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
JavaScript语言多编程范式简介
和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function
HTTP/2背景和新特性简介
Babylon.js入门教程和开发实例
Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...
学习使用CSS制作进度条
进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope
如何使用WebGL创建一个逼真的下雨动画
之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...
WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
如何使用纯CSS3实现一个3D泡沫
要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble
更多...