for efficient delivery and loading of 3D content. Assets may be provided either in JSON (.gltf)
or binary (.glb) format. External files store textures (.jpg, .png, ...) and additional binary
data (.bin). A glTF asset may deliver one or more scenes, including meshes, materials,
- textures, shaders, skins, skeletons, morph targets, animations, lights, and/or cameras.
+ textures, skins, skeletons, morph targets, animations, lights, and/or cameras.
- [page:String path] — Base path for loading additional resources e.g. textures, GLSL shaders, .bin data.
+ [page:String path] — Base path for loading additional resources e.g. textures and .bin data.
Set the base path for additional resources.
@@ -106,7 +107,7 @@
[page:Object json] — JSON object to parse.
[page:Function callBack] — Will be called when parse completes.
- [page:String path] — The base path from which to find subsequent glTF resources such as textures, GLSL shaders and .bin data files.
+ [page:String path] — The base path from which to find subsequent glTF resources such as textures and .bin data files.
Parse a glTF-based JSON structure and fire [page:Function callback] when complete. The argument to [page:Function callback] will be an [page:object] that contains loaded parts: .[page:Scene scene], .[page:Array scenes], .[page:Array cameras], and .[page:Array animations].
diff --git a/examples/js/loaders/GLTF2Loader.js b/examples/js/loaders/GLTF2Loader.js
index 5cf018e7e82b48..ccf6433935f9f4 100644
--- a/examples/js/loaders/GLTF2Loader.js
+++ b/examples/js/loaders/GLTF2Loader.js
@@ -106,12 +106,6 @@ THREE.GLTF2Loader = ( function () {
}
- if ( json.extensionsUsed.indexOf( EXTENSIONS.KHR_TECHNIQUE_WEBGL ) >= 0 ) {
-
- extensions[ EXTENSIONS.KHR_TECHNIQUE_WEBGL ] = new GLTFTechniqueWebglExtension( json );
-
- }
-
}
console.time( 'GLTF2Loader' );
@@ -194,109 +188,6 @@ THREE.GLTF2Loader = ( function () {
}
- /* GLTFSHADER */
-
- function GLTFShader( targetNode, allNodes ) {
-
- var boundUniforms = {};
-
- // bind each uniform to its source node
-
- var uniforms = targetNode.material.uniforms;
-
- for ( var uniformId in uniforms ) {
-
- var uniform = uniforms[ uniformId ];
-
- if ( uniform.semantic ) {
-
- var sourceNodeRef = uniform.node;
-
- var sourceNode = targetNode;
-
- if ( sourceNodeRef ) {
-
- sourceNode = allNodes[ sourceNodeRef ];
-
- }
-
- boundUniforms[ uniformId ] = {
- semantic: uniform.semantic,
- sourceNode: sourceNode,
- targetNode: targetNode,
- uniform: uniform
- };
-
- }
-
- }
-
- this.boundUniforms = boundUniforms;
- this._m4 = new THREE.Matrix4();
-
- }
-
- // Update - update all the uniform values
- GLTFShader.prototype.update = function ( scene, camera ) {
-
- var boundUniforms = this.boundUniforms;
-
- for ( var name in boundUniforms ) {
-
- var boundUniform = boundUniforms[ name ];
-
- switch ( boundUniform.semantic ) {
-
- case 'MODELVIEW':
-
- var m4 = boundUniform.uniform.value;
- m4.multiplyMatrices( camera.matrixWorldInverse, boundUniform.sourceNode.matrixWorld );
- break;
-
- case 'MODELVIEWINVERSETRANSPOSE':
-
- var m3 = boundUniform.uniform.value;
- this._m4.multiplyMatrices( camera.matrixWorldInverse, boundUniform.sourceNode.matrixWorld );
- m3.getNormalMatrix( this._m4 );
- break;
-
- case 'PROJECTION':
-
- var m4 = boundUniform.uniform.value;
- m4.copy( camera.projectionMatrix );
- break;
-
- case 'JOINTMATRIX':
-
- var m4v = boundUniform.uniform.value;
-
- for ( var mi = 0; mi < m4v.length; mi ++ ) {
-
- // So it goes like this:
- // SkinnedMesh world matrix is already baked into MODELVIEW;
- // transform joints to local space,
- // then transform using joint's inverse
- m4v[ mi ]
- .getInverse( boundUniform.sourceNode.matrixWorld )
- .multiply( boundUniform.targetNode.skeleton.bones[ mi ].matrixWorld )
- .multiply( boundUniform.targetNode.skeleton.boneInverses[ mi ] )
- .multiply( boundUniform.targetNode.bindMatrix );
-
- }
-
- break;
-
- default :
-
- console.warn( 'THREE.GLTF2Loader: Unhandled shader semantic: ' + boundUniform.semantic );
- break;
-
- }
-
- }
-
- };
-
/*********************************/
/********** EXTENSIONS ***********/
/*********************************/
@@ -558,304 +449,6 @@ THREE.GLTF2Loader = ( function () {
}
- /**
- * WebGL Technique Extension
- *
- * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/Khronos/KHR_technique_webgl
- */
- function GLTFTechniqueWebglExtension( json ) {
-
- this.name = EXTENSIONS.KHR_TECHNIQUE_WEBGL;
-
- var extension = ( json.extensions && json.extensions[ EXTENSIONS.KHR_TECHNIQUE_WEBGL ] ) || {};
-
- this.techniques = extension.techniques || {};
- this.programs = extension.programs || {};
- this.shaders = extension.shaders || {};
-
- }
-
- GLTFTechniqueWebglExtension.prototype.getMaterialType = function () {
-
- return DeferredShaderMaterial;
-
- };
-
- GLTFTechniqueWebglExtension.prototype.extendParams = function ( materialParams, material, dependencies ) {
-
- var extension = material[ EXTENSIONS.KHR_TECHNIQUE_WEBGL ];
- var technique = dependencies.techniques[ extension.technique ];
-
- materialParams.uniforms = {};
-
- var program = dependencies.programs[ technique.program ];
-
- if ( program === undefined ) {
-
- return;
-
- }
-
- materialParams.fragmentShader = dependencies.shaders[ program.fragmentShader ];
-
- if ( ! materialParams.fragmentShader ) {
-
- throw new Error( 'THREE.GLTF2Loader: Missing fragment shader definition: ' + program.fragmentShader );
-
- }
-
- var vertexShader = dependencies.shaders[ program.vertexShader ];
-
- if ( ! vertexShader ) {
-
- throw new Error( 'THREE.GLTF2Loader: Missing vertex shader definition: ' + program.vertexShader );
-
- }
-
- // IMPORTANT: FIX VERTEX SHADER ATTRIBUTE DEFINITIONS
- materialParams.vertexShader = replaceTHREEShaderAttributes( vertexShader, technique );
-
- var uniforms = technique.uniforms;
-
- for ( var uniformId in uniforms ) {
-
- var pname = uniforms[ uniformId ];
- var shaderParam = technique.parameters[ pname ];
-
- var ptype = shaderParam.type;
-
- if ( WEBGL_TYPE[ ptype ] ) {
-
- var pcount = shaderParam.count;
- var value;
-
- if ( material.values !== undefined ) value = material.values[ pname ];
-
- var uvalue = new WEBGL_TYPE[ ptype ]();
- var usemantic = shaderParam.semantic;
- var unode = shaderParam.node;
-
- switch ( ptype ) {
-
- case WEBGL_CONSTANTS.FLOAT:
-
- uvalue = shaderParam.value;
-
- if ( pname === 'transparency' ) {
-
- materialParams.transparent = true;
-
- }
-
- if ( value !== undefined ) {
-
- uvalue = value;
-
- }
-
- break;
-
- case WEBGL_CONSTANTS.FLOAT_VEC2:
- case WEBGL_CONSTANTS.FLOAT_VEC3:
- case WEBGL_CONSTANTS.FLOAT_VEC4:
- case WEBGL_CONSTANTS.FLOAT_MAT3:
-
- if ( shaderParam && shaderParam.value ) {
-
- uvalue.fromArray( shaderParam.value );
-
- }
-
- if ( value ) {
-
- uvalue.fromArray( value );
-
- }
-
- break;
-
- case WEBGL_CONSTANTS.FLOAT_MAT2:
-
- // what to do?
- console.warn( 'THREE.GLTF2Loader: FLOAT_MAT2 is not a supported uniform type.' );
- break;
-
- case WEBGL_CONSTANTS.FLOAT_MAT4:
-
- if ( pcount ) {
-
- uvalue = new Array( pcount );
-
- for ( var mi = 0; mi < pcount; mi ++ ) {
-
- uvalue[ mi ] = new WEBGL_TYPE[ ptype ]();
-
- }
-
- if ( shaderParam && shaderParam.value ) {
-
- var m4v = shaderParam.value;
- uvalue.fromArray( m4v );
-
- }
-
- if ( value ) {
-
- uvalue.fromArray( value );
-
- }
-
- } else {
-
- if ( shaderParam && shaderParam.value ) {
-
- var m4 = shaderParam.value;
- uvalue.fromArray( m4 );
-
- }
-
- if ( value ) {
-
- uvalue.fromArray( value );
-
- }
-
- }
-
- break;
-
- case WEBGL_CONSTANTS.SAMPLER_2D:
-
- if ( value !== undefined ) {
-
- uvalue = dependencies.textures[ value ];
-
- } else if ( shaderParam.value !== undefined ) {
-
- uvalue = dependencies.textures[ shaderParam.value ];
-
- } else {
-
- uvalue = null;
-
- }
-
- break;
-
- }
-
- materialParams.uniforms[ uniformId ] = {
- value: uvalue,
- semantic: usemantic,
- node: unode
- };
-
- } else {
-
- throw new Error( 'THREE.GLTF2Loader: Unknown shader uniform param type: ' + ptype );
-
- }
-
- }
-
- var states = technique.states || {};
- var enables = states.enable || [];
- var functions = states.functions || {};
-
- var enableCullFace = false;
- var enableDepthTest = false;
- var enableBlend = false;
-
- for ( var i = 0, il = enables.length; i < il; i ++ ) {
-
- var enable = enables[ i ];
-
- switch ( STATES_ENABLES[ enable ] ) {
-
- case 'CULL_FACE':
-
- enableCullFace = true;
-
- break;
-
- case 'DEPTH_TEST':
-
- enableDepthTest = true;
-
- break;
-
- case 'BLEND':
-
- enableBlend = true;
-
- break;
-
- // TODO: implement
- case 'SCISSOR_TEST':
- case 'POLYGON_OFFSET_FILL':
- case 'SAMPLE_ALPHA_TO_COVERAGE':
-
- break;
-
- default:
-
- throw new Error( 'THREE.GLTF2Loader: Unknown technique.states.enable: ' + enable );
-
- }
-
- }
-
- if ( enableCullFace ) {
-
- materialParams.side = functions.cullFace !== undefined ? WEBGL_SIDES[ functions.cullFace ] : THREE.FrontSide;
-
- } else {
-
- materialParams.side = THREE.DoubleSide;
-
- }
-
- materialParams.depthTest = enableDepthTest;
- materialParams.depthFunc = functions.depthFunc !== undefined ? WEBGL_DEPTH_FUNCS[ functions.depthFunc ] : THREE.LessDepth;
- materialParams.depthWrite = functions.depthMask !== undefined ? functions.depthMask[ 0 ] : true;
-
- materialParams.blending = enableBlend ? THREE.CustomBlending : THREE.NoBlending;
- materialParams.transparent = enableBlend;
-
- var blendEquationSeparate = functions.blendEquationSeparate;
-
- if ( blendEquationSeparate !== undefined ) {
-
- materialParams.blendEquation = WEBGL_BLEND_EQUATIONS[ blendEquationSeparate[ 0 ] ];
- materialParams.blendEquationAlpha = WEBGL_BLEND_EQUATIONS[ blendEquationSeparate[ 1 ] ];
-
- } else {
-
- materialParams.blendEquation = THREE.AddEquation;
- materialParams.blendEquationAlpha = THREE.AddEquation;
-
- }
-
- var blendFuncSeparate = functions.blendFuncSeparate;
-
- if ( blendFuncSeparate !== undefined ) {
-
- materialParams.blendSrc = WEBGL_BLEND_FUNCS[ blendFuncSeparate[ 0 ] ];
- materialParams.blendDst = WEBGL_BLEND_FUNCS[ blendFuncSeparate[ 1 ] ];
- materialParams.blendSrcAlpha = WEBGL_BLEND_FUNCS[ blendFuncSeparate[ 2 ] ];
- materialParams.blendDstAlpha = WEBGL_BLEND_FUNCS[ blendFuncSeparate[ 3 ] ];
-
- } else {
-
- materialParams.blendSrc = THREE.OneFactor;
- materialParams.blendDst = THREE.ZeroFactor;
- materialParams.blendSrcAlpha = THREE.OneFactor;
- materialParams.blendDstAlpha = THREE.ZeroFactor;
-
- }
-
- };
-
/**
* Specular-Glossiness Extension
*
@@ -1188,10 +781,7 @@ THREE.GLTF2Loader = ( function () {
TRIANGLE_STRIP: 5,
TRIANGLE_FAN: 6,
UNSIGNED_BYTE: 5121,
- UNSIGNED_SHORT: 5123,
-
- VERTEX_SHADER: 35633,
- FRAGMENT_SHADER: 35632
+ UNSIGNED_SHORT: 5123
};
var WEBGL_TYPE = {
@@ -1467,105 +1057,6 @@ THREE.GLTF2Loader = ( function () {
}
- // Three.js seems too dependent on attribute names so globally
- // replace those in the shader code
- function replaceTHREEShaderAttributes( shaderText, technique ) {
-
- // Expected technique attributes
- var attributes = {};
-
- for ( var attributeId in technique.attributes ) {
-
- var pname = technique.attributes[ attributeId ];
-
- var param = technique.parameters[ pname ];
- var atype = param.type;
- var semantic = param.semantic;
-
- attributes[ attributeId ] = {
- type: atype,
- semantic: semantic
- };
-
- }
-
- // Figure out which attributes to change in technique
-
- var shaderParams = technique.parameters;
- var shaderAttributes = technique.attributes;
- var params = {};
-
- for ( var attributeId in attributes ) {
-
- var pname = shaderAttributes[ attributeId ];
- var shaderParam = shaderParams[ pname ];
- var semantic = shaderParam.semantic;
- if ( semantic ) {
-
- params[ attributeId ] = shaderParam;
-
- }
-
- }
-
- for ( var pname in params ) {
-
- var param = params[ pname ];
- var semantic = param.semantic;
-
- var regEx = new RegExp( '\\b' + pname + '\\b', 'g' );
-
- switch ( semantic ) {
-
- case 'POSITION':
-
- shaderText = shaderText.replace( regEx, 'position' );
- break;
-
- case 'NORMAL':
-
- shaderText = shaderText.replace( regEx, 'normal' );
- break;
-
- case 'TEXCOORD_0':
- case 'TEXCOORD0':
- case 'TEXCOORD':
-
- shaderText = shaderText.replace( regEx, 'uv' );
- break;
-
- case 'TEXCOORD_1':
-
- shaderText = shaderText.replace( regEx, 'uv2' );
- break;
-
- case 'COLOR_0':
- case 'COLOR0':
- case 'COLOR':
-
- shaderText = shaderText.replace( regEx, 'color' );
- break;
-
- case 'WEIGHTS_0':
- case 'WEIGHT': // WEIGHT semantic deprecated.
-
- shaderText = shaderText.replace( regEx, 'skinWeight' );
- break;
-
- case 'JOINTS_0':
- case 'JOINT': // JOINT semantic deprecated.
-
- shaderText = shaderText.replace( regEx, 'skinIndex' );
- break;
-
- }
-
- }
-
- return shaderText;
-
- }
-
/**
* Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#default-material
*/
@@ -1702,41 +1193,6 @@ THREE.GLTF2Loader = ( function () {
}
- // Deferred constructor for RawShaderMaterial types
- function DeferredShaderMaterial( params ) {
-
- this.isDeferredShaderMaterial = true;
-
- this.params = params;
-
- }
-
- DeferredShaderMaterial.prototype.create = function () {
-
- var uniforms = THREE.UniformsUtils.clone( this.params.uniforms );
-
- for ( var uniformId in this.params.uniforms ) {
-
- var originalUniform = this.params.uniforms[ uniformId ];
-
- if ( originalUniform.value instanceof THREE.Texture ) {
-
- uniforms[ uniformId ].value = originalUniform.value;
- uniforms[ uniformId ].value.needsUpdate = true;
-
- }
-
- uniforms[ uniformId ].semantic = originalUniform.semantic;
- uniforms[ uniformId ].node = originalUniform.node;
-
- }
-
- this.params.uniforms = uniforms;
-
- return new THREE.RawShaderMaterial( this.params );
-
- };
-
/* GLTF PARSER */
function GLTFParser( json, extensions, options ) {
@@ -1833,50 +1289,6 @@ THREE.GLTF2Loader = ( function () {
};
- GLTFParser.prototype.loadShaders = function () {
-
- var json = this.json;
- var options = this.options;
- var extensions = this.extensions;
-
- return this._withDependencies( [
-
- 'bufferViews'
-
- ] ).then( function ( dependencies ) {
-
- var shaders = extensions[ EXTENSIONS.KHR_TECHNIQUE_WEBGL ] !== undefined ? extensions[ EXTENSIONS.KHR_TECHNIQUE_WEBGL ].shaders : json.shaders;
-
- if ( shaders === undefined ) shaders = {};
-
- return _each( shaders, function ( shader ) {
-
- if ( shader.bufferView !== undefined ) {
-
- var bufferView = dependencies.bufferViews[ shader.bufferView ];
- var array = new Uint8Array( bufferView );
- return convertUint8ArrayToString( array );
-
- }
-
- return new Promise( function ( resolve ) {
-
- var loader = new THREE.FileLoader();
- loader.setResponseType( 'text' );
- loader.load( resolveURL( shader.uri, options.path ), function ( shaderText ) {
-
- resolve( shaderText );
-
- } );
-
- } );
-
- } );
-
- } );
-
- };
-
GLTFParser.prototype.loadBuffers = function () {
var json = this.json;
@@ -2085,7 +1497,6 @@ THREE.GLTF2Loader = ( function () {
return this._withDependencies( [
- 'shaders',
'textures'
] ).then( function ( dependencies ) {
@@ -2762,17 +2173,7 @@ THREE.GLTF2Loader = ( function () {
var originalUserData = child.userData;
var originalName = child.name;
- var material;
-
- if ( originalMaterial.isDeferredShaderMaterial ) {
-
- originalMaterial = material = originalMaterial.create();
-
- } else {
-
- material = originalMaterial;
-
- }
+ var material = originalMaterial;
switch ( child.type ) {
@@ -2936,16 +2337,6 @@ THREE.GLTF2Loader = ( function () {
_scene.traverse( function ( child ) {
- // Register raw material meshes with GLTF2Loader.Shaders
- if ( child.material && child.material.isRawShaderMaterial ) {
-
- child.gltfShader = new GLTFShader( child, dependencies.nodes );
- child.onBeforeRender = function(renderer, scene, camera){
- this.gltfShader.update(scene, camera);
- };
-
- }
-
// for Specular-Glossiness.
if ( child.material && child.material.isGLTFSpecularGlossinessMaterial ) {
diff --git a/examples/webgl_loader_gltf2.html b/examples/webgl_loader_gltf2.html
index fbad8928b20667..3a15be1d8b4ada 100644
--- a/examples/webgl_loader_gltf2.html
+++ b/examples/webgl_loader_gltf2.html
@@ -91,7 +91,6 @@
-