From 1ac876f1c60c202459a02e48932faad83fc76c19 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Mon, 20 Nov 2017 11:50:27 +0100 Subject: [PATCH 1/2] Removed ImageUtils --- editor/js/libs/tern-threejs/threejs.js | 40 +------- examples/js/utils/ImageUtils.js | 136 ------------------------- 2 files changed, 1 insertion(+), 175 deletions(-) delete mode 100644 examples/js/utils/ImageUtils.js diff --git a/editor/js/libs/tern-threejs/threejs.js b/editor/js/libs/tern-threejs/threejs.js index f1905207ed159..10ac4e71abcb9 100644 --- a/editor/js/libs/tern-threejs/threejs.js +++ b/editor/js/libs/tern-threejs/threejs.js @@ -805,44 +805,6 @@ "prototype": {}, "!doc": "Contains handy functions geometry manipulations." }, - "ImageUtils": { - "!url": "http://threejs.org/docs/#Reference/extras/ImageUtils", - "prototype": { - "crossOrigin": { - "!type": "string", - "!doc": "The crossOrigin string to implement CORS for loading the image from a different domain that allows CORS." - }, - "generateDataTexture": { - "!type": "fn(width: number, height: number, color: number) -> +THREE.DataTexture", - "!doc": "Generates a texture of a single color. It is a DataTexture with format, RGBFormat." - }, - "parseDDS": { - "!type": "fn(buffer: string, loadMipmaps: boolean) -> +THREE.CompressedTexture", - "!doc": "Parses a DDS Image from the string into a CompressedTexture." - }, - "loadCompressedTexture": { - "!type": "fn(url: todo, mapping: todo, onLoad: todo, onError: todo) -> todo", - "!doc": "todo" - }, - "loadTexture": { - "!type": "fn(url: string, mapping: UVMapping, onLoad: function, onError: function) -> todo", - "!doc": "todo" - }, - "getNormalMap": { - "!type": "fn(image: todo, depth: todo) -> todo", - "!doc": "todo" - }, - "loadCompressedTextureCube": { - "!type": "fn(array: todo, mapping: todo, onLoad: todo, onError: todo) -> todo", - "!doc": "todo" - }, - "loadTextureCube": { - "!type": "fn(array: todo, mapping: todo, onLoad: todo, onError: todo) -> todo", - "!doc": "todo" - } - }, - "!doc": "A Helper class to ease the loading of images of different types." - }, "SceneUtils": { "!url": "http://threejs.org/docs/#Reference/extras/SceneUtils", "prototype": { @@ -5137,7 +5099,7 @@ }, "image": { "!type": "Image", - "!doc": "An Image object, typically created using the ImageUtils or [page:ImageLoader ImageLoader] classes. The Image object can include an image (e.g., PNG, JPG, GIF, DDS), video (e.g., MP4, OGG/OGV), or set of six images for a cube map. To use video as a texture you need to have a playing HTML5 video element as a source for your texture image and continuously update this texture as long as video is playing." + "!doc": "An Image object, typically created using the [page:ImageLoader ImageLoader] class. The Image object can include an image (e.g., PNG, JPG, GIF, DDS), video (e.g., MP4, OGG/OGV), or set of six images for a cube map. To use video as a texture you need to have a playing HTML5 video element as a source for your texture image and continuously update this texture as long as video is playing." }, "mapping": { "!type": "object", diff --git a/examples/js/utils/ImageUtils.js b/examples/js/utils/ImageUtils.js deleted file mode 100644 index c631431e46a28..0000000000000 --- a/examples/js/utils/ImageUtils.js +++ /dev/null @@ -1,136 +0,0 @@ -/** - * @author alteredq / http://alteredqualia.com/ - * @author mrdoob / http://mrdoob.com/ - * @author Daosheng Mu / https://github.com/DaoshengMu/ - */ - -THREE.ImageUtils = { - - getNormalMap: function ( image, depth ) { - - // Adapted from http://www.paulbrunt.co.uk/lab/heightnormal/ - - function cross( a, b ) { - - 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 ] ]; - - } - - function subtract( a, b ) { - - return [ a[ 0 ] - b[ 0 ], a[ 1 ] - b[ 1 ], a[ 2 ] - b[ 2 ] ]; - - } - - function normalize( a ) { - - var l = Math.sqrt( a[ 0 ] * a[ 0 ] + a[ 1 ] * a[ 1 ] + a[ 2 ] * a[ 2 ] ); - return [ a[ 0 ] / l, a[ 1 ] / l, a[ 2 ] / l ]; - - } - - depth = depth | 1; - - var width = image.width; - var height = image.height; - - var canvas = document.createElement( 'canvas' ); - canvas.width = width; - canvas.height = height; - - var context = canvas.getContext( '2d' ); - context.drawImage( image, 0, 0 ); - - var data = context.getImageData( 0, 0, width, height ).data; - var imageData = context.createImageData( width, height ); - var output = imageData.data; - - for ( var x = 0; x < width; x ++ ) { - - for ( var y = 0; y < height; y ++ ) { - - var ly = y - 1 < 0 ? 0 : y - 1; - var uy = y + 1 > height - 1 ? height - 1 : y + 1; - var lx = x - 1 < 0 ? 0 : x - 1; - var ux = x + 1 > width - 1 ? width - 1 : x + 1; - - var points = []; - var origin = [ 0, 0, data[ ( y * width + x ) * 4 ] / 255 * depth ]; - points.push( [ - 1, 0, data[ ( y * width + lx ) * 4 ] / 255 * depth ] ); - points.push( [ - 1, - 1, data[ ( ly * width + lx ) * 4 ] / 255 * depth ] ); - points.push( [ 0, - 1, data[ ( ly * width + x ) * 4 ] / 255 * depth ] ); - points.push( [ 1, - 1, data[ ( ly * width + ux ) * 4 ] / 255 * depth ] ); - points.push( [ 1, 0, data[ ( y * width + ux ) * 4 ] / 255 * depth ] ); - points.push( [ 1, 1, data[ ( uy * width + ux ) * 4 ] / 255 * depth ] ); - points.push( [ 0, 1, data[ ( uy * width + x ) * 4 ] / 255 * depth ] ); - points.push( [ - 1, 1, data[ ( uy * width + lx ) * 4 ] / 255 * depth ] ); - - var normals = []; - var num_points = points.length; - - for ( var i = 0; i < num_points; i ++ ) { - - var v1 = points[ i ]; - var v2 = points[ ( i + 1 ) % num_points ]; - v1 = subtract( v1, origin ); - v2 = subtract( v2, origin ); - normals.push( normalize( cross( v1, v2 ) ) ); - - } - - var normal = [ 0, 0, 0 ]; - - for ( var i = 0; i < normals.length; i ++ ) { - - normal[ 0 ] += normals[ i ][ 0 ]; - normal[ 1 ] += normals[ i ][ 1 ]; - normal[ 2 ] += normals[ i ][ 2 ]; - - } - - normal[ 0 ] /= normals.length; - normal[ 1 ] /= normals.length; - normal[ 2 ] /= normals.length; - - var idx = ( y * width + x ) * 4; - - output[ idx ] = ( ( normal[ 0 ] + 1.0 ) / 2.0 * 255 ) | 0; - output[ idx + 1 ] = ( ( normal[ 1 ] + 1.0 ) / 2.0 * 255 ) | 0; - output[ idx + 2 ] = ( normal[ 2 ] * 255 ) | 0; - output[ idx + 3 ] = 255; - - } - - } - - context.putImageData( imageData, 0, 0 ); - - return canvas; - - }, - - generateDataTexture: function ( width, height, color ) { - - 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 ++ ) { - - data[ i * 3 ] = r; - data[ i * 3 + 1 ] = g; - data[ i * 3 + 2 ] = b; - - } - - var texture = new THREE.DataTexture( data, width, height, THREE.RGBFormat ); - texture.needsUpdate = true; - - return texture; - - } - -}; From f1bac35108219be9089a59e09ba1a190e6b9aa81 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Mon, 20 Nov 2017 20:21:03 +0100 Subject: [PATCH 2/2] Docs: Add example to DataTexture --- docs/api/textures/DataTexture.html | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/docs/api/textures/DataTexture.html b/docs/api/textures/DataTexture.html index f8bbdffd7d072..ffba85772b4f4 100644 --- a/docs/api/textures/DataTexture.html +++ b/docs/api/textures/DataTexture.html @@ -32,6 +32,33 @@

[name]( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, In order to use the types THREE.FloatType and THREE.HalfFloatType, the WebGL implementation must support the respective extensions OES_texture_float and OES_texture_half_float. In order to use THREE.LinearFilter for component-wise, bilinear interpolation of the texels based on these types, the WebGL extensions OES_texture_float_linear or OES_texture_half_float_linear must also be present. +

Example

+ + + // 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 [name] + + var texture = new THREE.DataTexture( data, width, height, THREE.RGBFormat ); + +

Properties

[property:Image image]