Skip to content

Commit b6070a0

Browse files
mrdoobmrdoob
committed
ImageUtils: Moved getNormalMap() and generateDataTexture() to examples.
1 parent 15da3dd commit b6070a0

File tree

2 files changed

+136
-127
lines changed

2 files changed

+136
-127
lines changed

‎examples/js/utils/ImageUtils.js

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/**
2+
* @author alteredq / http://alteredqualia.com/
3+
* @author mrdoob / http://mrdoob.com/
4+
* @author Daosheng Mu / https://github.com/DaoshengMu/
5+
*/
6+
7+
THREE.ImageUtils = {
8+
9+
getNormalMap: function ( image, depth ) {
10+
11+
// Adapted from http://www.paulbrunt.co.uk/lab/heightnormal/
12+
13+
function cross( a, b ) {
14+
15+
return [ a[ 1 ] * b[ 2 ] - a[ 2 ] * b[ 1 ], a[ 2 ] * b[ 0 ] - a[ 0 ] * b[ 2 ], a[ 0 ] * b[ 1 ] - a[ 1 ] * b[ 0 ] ];
16+
17+
}
18+
19+
function subtract( a, b ) {
20+
21+
return [ a[ 0 ] - b[ 0 ], a[ 1 ] - b[ 1 ], a[ 2 ] - b[ 2 ] ];
22+
23+
}
24+
25+
function normalize( a ) {
26+
27+
var l = Math.sqrt( a[ 0 ] * a[ 0 ] + a[ 1 ] * a[ 1 ] + a[ 2 ] * a[ 2 ] );
28+
return [ a[ 0 ] / l, a[ 1 ] / l, a[ 2 ] / l ];
29+
30+
}
31+
32+
depth = depth | 1;
33+
34+
var width = image.width;
35+
var height = image.height;
36+
37+
var canvas = document.createElement( 'canvas' );
38+
canvas.width = width;
39+
canvas.height = height;
40+
41+
var context = canvas.getContext( '2d' );
42+
context.drawImage( image, 0, 0 );
43+
44+
var data = context.getImageData( 0, 0, width, height ).data;
45+
var imageData = context.createImageData( width, height );
46+
var output = imageData.data;
47+
48+
for ( var x = 0; x < width; x ++ ) {
49+
50+
for ( var y = 0; y < height; y ++ ) {
51+
52+
var ly = y - 1 < 0 ? 0 : y - 1;
53+
var uy = y + 1 > height - 1 ? height - 1 : y + 1;
54+
var lx = x - 1 < 0 ? 0 : x - 1;
55+
var ux = x + 1 > width - 1 ? width - 1 : x + 1;
56+
57+
var points = [];
58+
var origin = [ 0, 0, data[ ( y * width + x ) * 4 ] / 255 * depth ];
59+
points.push( [ - 1, 0, data[ ( y * width + lx ) * 4 ] / 255 * depth ] );
60+
points.push( [ - 1, - 1, data[ ( ly * width + lx ) * 4 ] / 255 * depth ] );
61+
points.push( [ 0, - 1, data[ ( ly * width + x ) * 4 ] / 255 * depth ] );
62+
points.push( [ 1, - 1, data[ ( ly * width + ux ) * 4 ] / 255 * depth ] );
63+
points.push( [ 1, 0, data[ ( y * width + ux ) * 4 ] / 255 * depth ] );
64+
points.push( [ 1, 1, data[ ( uy * width + ux ) * 4 ] / 255 * depth ] );
65+
points.push( [ 0, 1, data[ ( uy * width + x ) * 4 ] / 255 * depth ] );
66+
points.push( [ - 1, 1, data[ ( uy * width + lx ) * 4 ] / 255 * depth ] );
67+
68+
var normals = [];
69+
var num_points = points.length;
70+
71+
for ( var i = 0; i < num_points; i ++ ) {
72+
73+
var v1 = points[ i ];
74+
var v2 = points[ ( i + 1 ) % num_points ];
75+
v1 = subtract( v1, origin );
76+
v2 = subtract( v2, origin );
77+
normals.push( normalize( cross( v1, v2 ) ) );
78+
79+
}
80+
81+
var normal = [ 0, 0, 0 ];
82+
83+
for ( var i = 0; i < normals.length; i ++ ) {
84+
85+
normal[ 0 ] += normals[ i ][ 0 ];
86+
normal[ 1 ] += normals[ i ][ 1 ];
87+
normal[ 2 ] += normals[ i ][ 2 ];
88+
89+
}
90+
91+
normal[ 0 ] /= normals.length;
92+
normal[ 1 ] /= normals.length;
93+
normal[ 2 ] /= normals.length;
94+
95+
var idx = ( y * width + x ) * 4;
96+
97+
output[ idx ] = ( ( normal[ 0 ] + 1.0 ) / 2.0 * 255 ) | 0;
98+
output[ idx + 1 ] = ( ( normal[ 1 ] + 1.0 ) / 2.0 * 255 ) | 0;
99+
output[ idx + 2 ] = ( normal[ 2 ] * 255 ) | 0;
100+
output[ idx + 3 ] = 255;
101+
102+
}
103+
104+
}
105+
106+
context.putImageData( imageData, 0, 0 );
107+
108+
return canvas;
109+
110+
},
111+
112+
generateDataTexture: function ( width, height, color ) {
113+
114+
var size = width * height;
115+
var data = new Uint8Array( 3 * size );
116+
117+
var r = Math.floor( color.r * 255 );
118+
var g = Math.floor( color.g * 255 );
119+
var b = Math.floor( color.b * 255 );
120+
121+
for ( var i = 0; i < size; i ++ ) {
122+
123+
data[ i * 3 ] = r;
124+
data[ i * 3 + 1 ] = g;
125+
data[ i * 3 + 2 ] = b;
126+
127+
}
128+
129+
var texture = new THREE.DataTexture( data, width, height, THREE.RGBFormat );
130+
texture.needsUpdate = true;
131+
132+
return texture;
133+
134+
}
135+
136+
};

‎src/extras/ImageUtils.js

Lines changed: 0 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -46,133 +46,6 @@ THREE.ImageUtils = {
4646

4747
console.error( 'THREE.ImageUtils.loadCompressedTextureCube has been removed. Use THREE.DDSLoader instead.' )
4848

49-
},
50-
51-
getNormalMap: function ( image, depth ) {
52-
53-
// Adapted from http://www.paulbrunt.co.uk/lab/heightnormal/
54-
55-
function cross( a, b ) {
56-
57-
return [ a[ 1 ] * b[ 2 ] - a[ 2 ] * b[ 1 ], a[ 2 ] * b[ 0 ] - a[ 0 ] * b[ 2 ], a[ 0 ] * b[ 1 ] - a[ 1 ] * b[ 0 ] ];
58-
59-
}
60-
61-
function subtract( a, b ) {
62-
63-
return [ a[ 0 ] - b[ 0 ], a[ 1 ] - b[ 1 ], a[ 2 ] - b[ 2 ] ];
64-
65-
}
66-
67-
function normalize( a ) {
68-
69-
var l = Math.sqrt( a[ 0 ] * a[ 0 ] + a[ 1 ] * a[ 1 ] + a[ 2 ] * a[ 2 ] );
70-
return [ a[ 0 ] / l, a[ 1 ] / l, a[ 2 ] / l ];
71-
72-
}
73-
74-
depth = depth | 1;
75-
76-
var width = image.width;
77-
var height = image.height;
78-
79-
var canvas = document.createElement( 'canvas' );
80-
canvas.width = width;
81-
canvas.height = height;
82-
83-
var context = canvas.getContext( '2d' );
84-
context.drawImage( image, 0, 0 );
85-
86-
var data = context.getImageData( 0, 0, width, height ).data;
87-
var imageData = context.createImageData( width, height );
88-
var output = imageData.data;
89-
90-
for ( var x = 0; x < width; x ++ ) {
91-
92-
for ( var y = 0; y < height; y ++ ) {
93-
94-
var ly = y - 1 < 0 ? 0 : y - 1;
95-
var uy = y + 1 > height - 1 ? height - 1 : y + 1;
96-
var lx = x - 1 < 0 ? 0 : x - 1;
97-
var ux = x + 1 > width - 1 ? width - 1 : x + 1;
98-
99-
var points = [];
100-
var origin = [ 0, 0, data[ ( y * width + x ) * 4 ] / 255 * depth ];
101-
points.push( [ - 1, 0, data[ ( y * width + lx ) * 4 ] / 255 * depth ] );
102-
points.push( [ - 1, - 1, data[ ( ly * width + lx ) * 4 ] / 255 * depth ] );
103-
points.push( [ 0, - 1, data[ ( ly * width + x ) * 4 ] / 255 * depth ] );
104-
points.push( [ 1, - 1, data[ ( ly * width + ux ) * 4 ] / 255 * depth ] );
105-
points.push( [ 1, 0, data[ ( y * width + ux ) * 4 ] / 255 * depth ] );
106-
points.push( [ 1, 1, data[ ( uy * width + ux ) * 4 ] / 255 * depth ] );
107-
points.push( [ 0, 1, data[ ( uy * width + x ) * 4 ] / 255 * depth ] );
108-
points.push( [ - 1, 1, data[ ( uy * width + lx ) * 4 ] / 255 * depth ] );
109-
110-
var normals = [];
111-
var num_points = points.length;
112-
113-
for ( var i = 0; i < num_points; i ++ ) {
114-
115-
var v1 = points[ i ];
116-
var v2 = points[ ( i + 1 ) % num_points ];
117-
v1 = subtract( v1, origin );
118-
v2 = subtract( v2, origin );
119-
normals.push( normalize( cross( v1, v2 ) ) );
120-
121-
}
122-
123-
var normal = [ 0, 0, 0 ];
124-
125-
for ( var i = 0; i < normals.length; i ++ ) {
126-
127-
normal[ 0 ] += normals[ i ][ 0 ];
128-
normal[ 1 ] += normals[ i ][ 1 ];
129-
normal[ 2 ] += normals[ i ][ 2 ];
130-
131-
}
132-
133-
normal[ 0 ] /= normals.length;
134-
normal[ 1 ] /= normals.length;
135-
normal[ 2 ] /= normals.length;
136-
137-
var idx = ( y * width + x ) * 4;
138-
139-
output[ idx ] = ( ( normal[ 0 ] + 1.0 ) / 2.0 * 255 ) | 0;
140-
output[ idx + 1 ] = ( ( normal[ 1 ] + 1.0 ) / 2.0 * 255 ) | 0;
141-
output[ idx + 2 ] = ( normal[ 2 ] * 255 ) | 0;
142-
output[ idx + 3 ] = 255;
143-
144-
}
145-
146-
}
147-
148-
context.putImageData( imageData, 0, 0 );
149-
150-
return canvas;
151-
152-
},
153-
154-
generateDataTexture: function ( width, height, color ) {
155-
156-
var size = width * height;
157-
var data = new Uint8Array( 3 * size );
158-
159-
var r = Math.floor( color.r * 255 );
160-
var g = Math.floor( color.g * 255 );
161-
var b = Math.floor( color.b * 255 );
162-
163-
for ( var i = 0; i < size; i ++ ) {
164-
165-
data[ i * 3 ] = r;
166-
data[ i * 3 + 1 ] = g;
167-
data[ i * 3 + 2 ] = b;
168-
169-
}
170-
171-
var texture = new THREE.DataTexture( data, width, height, THREE.RGBFormat );
172-
texture.needsUpdate = true;
173-
174-
return texture;
175-
17649
}
17750

17851
};

0 commit comments

Comments
 (0)