ThreeJs 认识纹理

1、前言

这篇文章,咱们主要来了解一下 ThreeJs 中纹理相关的知识。渲染一个 3D 物体时,网格 Mesh 决定了这个物体的形状态,如一个球,一辆车,一我的等。而纹理决定了这个物体的表面具体长什么样子。一个球包上一层篮球的花纹就是篮球了,而若是包上的是一层足球的花纹那可能就是足球了。web

2、概述

ThreeJs 中为定义了多种多样的纹理,其类图以下。canvas

Texture.jpg

纹理的基类是 Texture,通常咱们都使用这个类,经过给其属性 Image 传入一个图片从而构造出一个纹理。纹理是材质的属性,材质和几何体 Gemotry 构成 Mesh ,而后被添加到 Scene 中进行渲染。纹理决定了物体的表面该是什么样子,而材质则决定了物体具有什么样的“气质”。后面还会再专门学习材质,下面再详细地看一看各个纹理的做用及其使用场景。bash

3、认识纹理

一、Texture

TextureXmind.jpg

纹理的属性何其多,但在通常状况下,并不要须要一一来设置,而是取默认值便可。而且,咱们通常都会经过 TextureLoader 来为咱们构造一个纹理,而不是直接构造。例子以下。app

var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );
复制代码

通常状况下,咱们这么简单的设置下就能够了。但实际应用中,咱们可能会碰到须要指定本身的纹理坐标的状况。那这个时候,咱们就须要本身计算好纹理坐标,而后给 geometry 添加属性 "uv",从而应用咱们本身的纹理坐标。ide

geom.addAttribute('uv', new THREE.BufferAttribute(uvArr, 2))

复制代码

二、CanvasTexture

CanvasTexture.jpg

CanvasTexture 主要是用于将 Dom 元素 中绘制的内容,以纹理的方式贴到模型上。在 canvas 中咱们能够绘制任何咱们想要绘制的图形或者文字。如下代码就是在 Canvas 中绘制文本,从而建立一个 CanvasTexture。 oop

let m = 4;
let textDiv = document.createElement('canvas');
let context2D = textDiv.getContext('2d');
context2D.font = ' ' +  font.fontSize + 'px ' + font.fontFamily;
context2D.fontWeight = font.fontWeight;
context2D.fillStyle = font.fontColor;

let s = context2D.measureText(text).width,height = y(1.4 * font.fontSize + 2 * m),u = height - m, c = u / 2, width = y(s + c + 2 * m);

textDiv.width = width;
textDiv.height = height;

context2D.font = ' ' +  font.fontSize + 'px ' + font.fontFamily;
context2D.fontWeight = font.fontWeight;
context2D.fillStyle = font.fontColor;
context2D.fillText(text,textDiv.width / 2 - s / 2,textDiv.height / 2 + 0.3 * font.fontSize);
let texture = new THREE.CanvasTexture(textDiv)
复制代码

image.png

图中红圈里的内容就是经过 CanvasTexture 来实现的。post

三、CompressedTexture

CompressedTexture.jpg

四、CubeTexture

CubeTexture.jpg

通常都是在环境贴图中,其效果就是模型的材质会呈现世界中图像的镜像,就像是镜子同样。学习

var loader = new THREE.CubeTextureLoader();
loader.setPath( 'textures/cube/pisa/' );

var textureCube = loader.load( [
	'px.png', 'nx.png',
	'py.png', 'ny.png',
	'pz.png', 'nz.png'
] );

var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
复制代码

相似效果以下。ui

image.png

五、DataTexture

DataTexture.jpg

// create a buffer with color data

var size = width * height;
var data = new Uint8Array( 3 * size );

var r = Math.floor( color.r * 255 );
var g = Math.floor( color.g * 255 );
var b = Math.floor( color.b * 255 );

for ( var i = 0; i < size; i ++ ) {

	var stride = i * 3;

	data[ stride ] = r;
	data[ stride + 1 ] = g;
	data[ stride + 2 ] = b;

}

// used the buffer to create a DataTexture

var texture = new THREE.DataTexture( data, width, height, THREE.RGBFormat );
texture.needsUpdate = true
复制代码

image.png

六、DataTexture3D

DataTexture3D.jpg

相对 DataTexture 多有一个深度维度。spa

var texture = new THREE.DataTexture3D( array, 256, 256, 109 );

texture.format = THREE.RedFormat;
texture.type = THREE.UnsignedByteType;
复制代码

image.png

七、DepthTexture

DepthTexture.jpg

depthTexture = new THREE.DepthTexture();
depthTexture.type = THREE.UnsignedShortType;
复制代码

image.png

对于深度纹理贴图,这里首先要弄明白什么是深度图。深度图像包含了普通的RGB三通道彩色图像和Depth Map。而通俗的讲,深度就是每一个像素距离当时相机所在位置的距离。

image.png

上面就是一个深度图的展现,经过颜色的明暗程度,咱们能够看出图片中所呈现的物体的远近关系的。

咱们进一步来看,对于深度图的实际应用,应该能更进一步帮助咱们理解。首先看一小段 frag_shader 的代码。主要关注其中的 tDepth 的应用。这是一个纹理采样器。

<script id="post-frag" type="x-shader/x-fragment">
		#include <packing>

		varying vec2 vUv;
		uniform sampler2D tDiffuse;
        // 定义一个用于深度图片的纹理采样器
		uniform sampler2D tDepth;
		uniform float cameraNear;
		uniform float cameraFar;

       // 读取深度信息
		float readDepth( sampler2D depthSampler, vec2 coord ) {
			float fragCoordZ = texture2D( depthSampler, coord ).x;
			float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
			return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
		}

		void main() {
			//vec3 diffuse = texture2D( tDiffuse, vUv ).rgb;
			float depth = readDepth( tDepth, vUv );
       // 应用深度信息
			gl_FragColor.rgb = 1.0 - vec3( depth );
			gl_FragColor.a = 1.0;
		}
</script>
复制代码

这里的关键的 2 步就是首先从纹理中读取深度值,而后进行相应的应用,也就是颜色上的计算,并所有赋值给 gl_FragColor.rgb。具体怎么计算就须要根据对应的需求来定了。

八、VideoTexture

VideoTexture.jpg

常规的用法

<video id="video" autoplay loop crossOrigin="anonymous" webkit-playsinline style="display:none">
	<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
	<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

video = document.getElementById( 'video' );
texture = new THREE.VideoTexture( video );
复制代码

视频做为纹理的一个效果

image.png

4、总结

文章蜻蜓点水式的把 ThreeJs 所支持的几种纹理都过了一遍,大概看了每一个纹理的用法以及效果。

而实际项目中,做者目前用到的只是 Texture(通常纹理贴图)、CanvasTexture(用于文字绘制)、CubeTexutre(用于环境贴图),其余几个相对比较高级,目前尚未实际去用到。

相关文章
相关标签/搜索