WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。
如果不使用贴图,而想在表面达到足够的细节感受,会使得建模任务变得异常复杂而得不偿失。
注:本文混用贴图(texture map)、texture和纹理这3个中英文词汇,因为它们代表同样的含义,用来确定物体的表面观感(纹路/光滑度等)。
我们在基础知识教程中已经说明过,顶点的属性除了位置、颜色外,还有纹理。
我们可以把纹理看成是一种特殊的颜色,那么我们就可以使用类似的方式来处理。
总体过程是,加载外部图片,把贴图映射到3D对象的表面即建立贴图的模型化数据,关联缓存并完成绘制。
创建纹理并加载图片
var eyeTexture; function initTexture() { eyeTexture = gl.createTexture(); eyeTexture.image = new Image(); eyeTexture.image.onload = function() { handleLoadedTexture(eyeTexture) } eyeTexture.image.src = "eyeball.png"; }
上述代码创建了一个Texture对象,并设置其图像属性的源为eyeball.png图片文件。
纹理使用异步方式加载图像文件,当加载完成时,调用回调函数handleLoadedTexture。
function handleLoadedTexture(texture) { gl.bindTexture(gl.TEXTURE_2D, texture); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.bindTexture(gl.TEXTURE_2D, null); }
第1行代码bindTexture功能和bindBuffer类似,用来把texture设定为当前2D类型的纹理;
第2行用来完成电脑屏幕图像坐标到3D空间坐标的转换,把Y轴翻转;
第3行代码把图像加载到显卡上的纹理空间中去,参数分别是类型(0)、数据存储格式(rgba,重复2次)、数据类型(用来存放rgba的数据类型),以及图像对象本身。
接下来的2行代码,分别设置纹理的放大/缩小参数,也就是当纹理图像和屏幕尺寸不匹配时的处理方式,NEAREST表示保持原样。
最后1行属于整理性质的代码,不是必须的。
纹理图片映射和初始化缓存
接下来我们需要把纹理贴图映射到物体表面,前面提到过,我们把贴图当成特殊的颜色属性和顶点关联起来。
function initBuffers() { var latitudeBands = 60; var longitudeBands = 60; var radius = 2; var vertexPositionData = []; var normalData = []; var textureCoordData = []; for (var latNumber = 0; latNumber <= latitudeBands; latNumber++) { var theta = latNumber * Math.PI / latitudeBands; var sinTheta = Math.sin(theta); var cosTheta = Math.cos(theta); for (var longNumber = 0; longNumber <= longitudeBands; longNumber++) { var phi = longNumber * 2 * Math.PI / longitudeBands; var sinPhi = Math.sin(phi); var cosPhi = Math.cos(phi); var x = cosPhi * sinTheta; var y = cosTheta; var z = sinPhi * sinTheta; var u = x * 0.5 + 0.5; var v = y * 0.5 + 0.5; normalData.push(x); normalData.push(y); normalData.push(z); textureCoordData.push(u); textureCoordData.push(v); vertexPositionData.push(radius * x); vertexPositionData.push(radius * y); vertexPositionData.push(radius * z); } } //...... }
上述代码中xyz是3D球体中某点所在位置的法线,uv是(x,y,z)所映射的贴图上的平面坐标。这里u/v的计算公式为:
faceVertexUvs[ face ][ j ].x = face.vertexNormals[ j ].x * 0.5 + 0.5; faceVertexUvs[ face ][ j ].y = face.vertexNormals[ j ].y * 0.5 + 0.5;
原因是我们所使用的图片(eyeball.png)是一张用于球面环境投影的MatCap(材质捕捉)图,映射到平面坐标时,需要做如上转换才不会出现变形。先不用深究这一点,总之我们记住要把2D纹理贴到3D模型上,需要做一个UV到XYZ的映射。
eyeballVertexNormalBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, eyeballVertexNormalBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData), gl.STATIC_DRAW); eyeballVertexNormalBuffer.itemSize = 3; eyeballVertexNormalBuffer.numItems = normalData.length / 3; eyeballVertexTextureCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, eyeballVertexTextureCoordBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordData), gl.STATIC_DRAW); eyeballVertexTextureCoordBuffer.itemSize = 2; eyeballVertexTextureCoordBuffer.numItems = textureCoordData.length / 2; eyeballVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, eyeballVertexPositionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositionData), gl.STATIC_DRAW); eyeballVertexPositionBuffer.itemSize = 3; eyeballVertexPositionBuffer.numItems = vertexPositionData.length / 3;
上述代码完成顶点和纹理数据缓存方面的处理。
绘制眼球
function drawScene() { //...... gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, eyeballTexture); gl.uniform1i(shaderProgram.samplerUniform, 0); gl.bindBuffer(gl.ARRAY_BUFFER, eyeballVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, eyeballVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, eyeballVertexTextureCoordBuffer); gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, eyeballVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, eyeballVertexNormalBuffer); gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, eyeballVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, eyeballVertexIndexBuffer); setMatrixUniforms(); gl.drawElements(gl.TRIANGLES, eyeballVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0); //...... }
在绘制元素(调用gl.drawElements接口)之前,我们需要设置当前激活的纹理为TEXTURE0,并告诉着色器程序,我们使用纹理0(WebGL最多可以处理32个纹理)。接着我们把着色器属性(Attribute)和数据缓存关联起来,以便依次读取和绘制顶点数据。
最后,我们还需要在片段着色器程序中添加纹理的处理逻辑:
precision mediump float; varying vec2 vTextureCoord; varying vec3 vLightWeighting; uniform sampler2D uSampler; void main(void) { vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a); }
可以看到,现在球体对象表面的颜色被纹理贴图的颜色所替代了。
我们再加上一些简单的鼠标操作,就完成了一个可以旋转的3D眼球作品。
你可以自己在线试试。
最新评论
- 相关文章
谷歌ARCore技术特性简介
谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...
ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...常见面试题JavaScript闭包(ES5语法)
JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()
深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
Babylon.js入门教程和开发实例
Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...
Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...
Three.js入门教程4 - 创建粒子系统动画
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
Three.js入门教程1 - 基础知识和创建一个红色球体
[ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
Google的工程师Paul在网站aerotwist.com上...如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合
Canvas实例教程:图像移动、大小调整和裁剪
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
如何使用纯CSS3实现一个3D泡沫
要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble
更多...