One, foreword

In this article, we’ll take a look at ThreeJs textures. When rendering a 3D object, the Mesh determines the shape of the object, such as a ball, a car, a person, etc. The texture determines exactly what the surface of the object will look like. A ball covered with a basketball pattern is a basketball, and a ball covered with a football pattern is probably a football.

Second, the overview

ThreeJs defines a wide variety of textures, as shown in the following class diagram.

The base class for a Texture is Texture. We use this class to construct a Texture by passing in an Image to its attribute Image. A texture is an attribute of a material, and the texture and geometry Gemotry form the Mesh, which is then added to the Scene for rendering. Texture determines what the surface of an object should look like, while texture determines what “temperament” the object has. We’ll learn more about materials later, but we’ll take a closer look at what each texture does and how it’s used.

Three, know the texture

1, Texture,

There are so many texture attributes, but in general, you don’t need to set them all at once, you just need to set them by default. Also, we typically construct a texture for us through TextureLoader, rather than directly. Here’s an example.

var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );
Copy the code

Normally, this simple setup will do. In practice, however, we may have to specify our own texture coordinates. In this case, we need to calculate the texture coordinates ourselves, and then add the attribute “UV” to geometry to apply our own texture coordinates.

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

Copy the code

2, CanvasTexture

CanvasTexture is mainly used to texture the content drawn in Dom elements onto the model. In the Canvas we can draw any graphics or text we want. The following code creates a CanvasTexture by drawing text on a Canvas.

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;

letMeasureText (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); context2d.fillText (text, textdiv.width / 2-s / 2, textdiv.height / 2 + 0.3 * font.let texture = new THREE.CanvasTexture(textDiv)
Copy the code

CanvasTexture is what you see in the red circle.

3, CompressedTexture

4, CubeTexture

This is usually done in an environment map, where the effect is that the material of the model will mirror the image in the world, like a mirror.

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 } );Copy the code

Similar effects are as follows.

5, DataTexture

// 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
Copy the code

6, DataTexture3D

There is one more depth dimension to DataTexture.

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

texture.format = THREE.RedFormat;
texture.type = THREE.UnsignedByteType;
Copy the code

7, DepthTexture

depthTexture = new THREE.DepthTexture();
depthTexture.type = THREE.UnsignedShortType;
Copy the code

For depth texture mapping, the first step is to understand what a depth map is. The Depth image contains a normal RGB three-channel color image and a Depth Map. In layman’s terms, depth is how far each pixel is from where the camera is at the time.

The above is a display of a depth map. We can see how far and near objects are in the picture by the degree of brightness and darkness.

Let’s take a closer look, and the practical application of depth maps should help us further. Start with a little fragment of frag_shader code. The focus is on the application of tDepth. This is a texture sampler.

<script id="post-frag" type="x-shader/x-fragment">
		#include <packing>varying vec2 vUv; uniform sampler2D tDiffuse; Uniform sampler2D tDepth: uniform sampler2D tDepth; uniformfloat cameraNear;
		uniform floatcameraFar; // Read the depth informationfloat 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 ); // Apply the depth information gl_fragcolor. RGB = 1.0-vec3 (depth); Gl_FragColor. A = 1.0; } </script>Copy the code

The key 2 steps here are to first read the depth value from the texture and then apply the corresponding value, namely the color calculation, and assign all values to gl_fragcolor.rgb. How to calculate the specific need to be determined according to the corresponding needs.

8 VideoTexture.

Conventional usage

<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.42 E01E mp4a. 40.2" '>
</video>

video = document.getElementById( 'video' );
texture = new THREE.VideoTexture( video );
Copy the code

Video as an effect of texture

Four,

This article takes a quick look at the textures ThreeJs supports and looks at the usage and effects of each texture.

The only textures the author has used so far are Texture(general Texture), CanvasTexture (text), CubeTexutre (environment), and a few more advanced textures that he hasn’t actually used yet.