Skip to content

Commit 66e4d92

Browse files
authored
Merge pull request #20588 from Mcgode/gtlf-exporter-data-texture
DataTexture support for GLTFExporter
2 parents c37b1e7 + 7eecac1 commit 66e4d92

File tree

3 files changed

+79
-3
lines changed

3 files changed

+79
-3
lines changed

examples/js/exporters/GLTFExporter.js

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
//------------------------------------------------------------------------------
22
// Constants
33
//------------------------------------------------------------------------------
4+
45
var WEBGL_CONSTANTS = {
56
POINTS: 0x0000,
67
LINES: 0x0001,
@@ -776,7 +777,35 @@ THREE.GLTFExporter.prototype = {
776777

777778
}
778779

779-
ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
780+
if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
781+
( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
782+
( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ) {
783+
784+
ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
785+
786+
} else {
787+
788+
if ( format !== THREE.RGBAFormat && format !== THREE.RGBFormat )
789+
throw "Only RGB and RGBA formats are supported";
790+
791+
if ( image.width !== canvas.width || image.height !== canvas.height )
792+
console.warn( "Image size and imposed canvas sized do not match" );
793+
794+
let data = image.data;
795+
if ( format === THREE.RGBFormat ) {
796+
797+
data = new Uint8ClampedArray( image.height * image.width * 4 );
798+
data.forEach( function ( _, i ) {
799+
800+
data[ i ] = i % 4 === 3 ? 255 : image.data[ 3 * Math.floor( i / 4 ) + i % 4 ];
801+
802+
} );
803+
804+
}
805+
806+
ctx.putImageData( new ImageData( data, image.width, image.height ), 0, 0 );
807+
808+
}
780809

781810
if ( options.binary === true ) {
782811

examples/jsm/exporters/GLTFExporter.js

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ import {
1414
NearestMipmapLinearFilter,
1515
NearestMipmapNearestFilter,
1616
PropertyBinding,
17-
RGBAFormat,
1817
RepeatWrapping,
18+
RGBAFormat,
19+
RGBFormat,
1920
Scene,
2021
Vector3
2122
} from "../../../build/three.module.js";
@@ -798,7 +799,35 @@ GLTFExporter.prototype = {
798799

799800
}
800801

801-
ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
802+
if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
803+
( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
804+
( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ) {
805+
806+
ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
807+
808+
} else {
809+
810+
if ( format !== RGBAFormat && format !== RGBFormat )
811+
throw "Only RGB and RGBA formats are supported";
812+
813+
if ( image.width !== canvas.width || image.height !== canvas.height )
814+
console.warn( "Image size and imposed canvas sized do not match" );
815+
816+
let data = image.data;
817+
if ( format === RGBFormat ) {
818+
819+
data = new Uint8ClampedArray( image.height * image.width * 4 );
820+
data.forEach( function ( _, i ) {
821+
822+
data[ i ] = i % 4 === 3 ? 255 : image.data[ 3 * Math.floor( i / 4 ) + i % 4 ];
823+
824+
} );
825+
826+
}
827+
828+
ctx.putImageData( new ImageData( data, image.width, image.height ), 0, 0 );
829+
830+
}
802831

803832
if ( options.binary === true ) {
804833

examples/misc_exporter_gltf.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,23 @@
138138
container = document.createElement( 'div' );
139139
document.body.appendChild( container );
140140

141+
// Make linear gradient texture
142+
const data = new Uint8ClampedArray( 100 * 100 * 3 );
143+
for ( let y = 0; y < 100; y ++ ) {
144+
145+
for ( let x = 0; x < 100; x ++ ) {
146+
147+
data[ 3 * ( 100 * y + x ) ] = Math.round( 255 * y / 99 );
148+
data[ 3 * ( 100 * y + x ) + 1 ] = Math.round( 255 - 255 * y / 99 );
149+
150+
}
151+
152+
}
153+
154+
const gradientTexture = new THREE.DataTexture( data, 100, 100, THREE.RGBFormat );
155+
gradientTexture.minFilter = THREE.LinearFilter;
156+
gradientTexture.magFilter = THREE.LinearFilter;
157+
141158
scene1 = new THREE.Scene();
142159
scene1.name = 'Scene1';
143160

@@ -230,6 +247,7 @@
230247
roughness: 1.0,
231248
flatShading: true
232249
} );
250+
material.map = gradientTexture;
233251
sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 70, 10, 10 ), material );
234252
sphere.position.set( 0, 0, 0 );
235253
sphere.name = "Sphere";

0 commit comments

Comments
 (0)