Fix Safari glTF rendering issue re: WebGLRenderingContext constant values are not exposed (see: https://github.com/mrdoob/three.js/issues/8973) (#9721)

examples/js/loaders/gltf/glTFLoader.js

@@ -299,13 +299,13 @@ THREE.glTFLoader.prototype.load = function( url, callback ) {
 		var texture = LoadTexture(texturePath);
 		if (texture && textureParams) {
 
-			if (textureParams.wrapS == WebGLRenderingContext.REPEAT)
+			if (textureParams.wrapS == THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.REPEAT)
 				texture.wrapS = THREE.RepeatWrapping;
 
-			if (textureParams.wrapT == WebGLRenderingContext.REPEAT)
+			if (textureParams.wrapT == THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.REPEAT)
 				texture.wrapT = THREE.RepeatWrapping;
 
-			if (textureParams.magFilter == WebGLRenderingContext.LINEAR)
+			if (textureParams.magFilter == THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.LINEAR)
 				texture.magFilter = THREE.LinearFilter;
 
 //                  if (textureParams.minFilter == "LINEAR")
@@ -818,7 +818,7 @@ THREE.glTFLoader.prototype.load = function( url, callback ) {
 
 
 						switch (ptype) {
-							case WebGLRenderingContext.FLOAT :
+							case THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.FLOAT :
 								utype = "f";
 								uvalue = shaderParam.value;
 								if (pname == "transparency") {
@@ -828,7 +828,7 @@ THREE.glTFLoader.prototype.load = function( url, callback ) {
 									params.transparent = true;
 								}
 								break;
-							case WebGLRenderingContext.FLOAT_VEC2 :
+							case THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.FLOAT_VEC2 :
 								utype = "v2";
 								uvalue = new THREE.Vector2;
 								if (shaderParam && shaderParam.value) {
@@ -839,7 +839,7 @@ THREE.glTFLoader.prototype.load = function( url, callback ) {
 									uvalue.fromArray(value);
 								}
 								break;
-							case WebGLRenderingContext.FLOAT_VEC3 :
+							case THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.FLOAT_VEC3 :
 								utype = "v3";
 								uvalue = new THREE.Vector3;
 								if (shaderParam && shaderParam.value) {
@@ -850,7 +850,7 @@ THREE.glTFLoader.prototype.load = function( url, callback ) {
 									uvalue.fromArray(value);
 								}
 								break;
-							case WebGLRenderingContext.FLOAT_VEC4 :
+							case THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.FLOAT_VEC4 :
 								utype = "v4";
 								uvalue = new THREE.Vector4;
 								if (shaderParam && shaderParam.value) {
@@ -861,11 +861,11 @@ THREE.glTFLoader.prototype.load = function( url, callback ) {
 									uvalue.fromArray(value);
 								}
 								break;
-							case WebGLRenderingContext.FLOAT_MAT2 :
+							case THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.FLOAT_MAT2 :
 								// what to do?
 								console.log("Warning: FLOAT_MAT2");
 								break;
-							case WebGLRenderingContext.FLOAT_MAT3 :
+							case THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.FLOAT_MAT3 :
 								utype = "m3";
 								uvalue = new THREE.Matrix3;
 								if (shaderParam && shaderParam.value) {
@@ -876,7 +876,7 @@ THREE.glTFLoader.prototype.load = function( url, callback ) {
 									uvalue.fromArray(value);
 								}
 								break;
-							case WebGLRenderingContext.FLOAT_MAT4 :
+							case THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.FLOAT_MAT4 :
 								if (pcount !== undefined) {
 									utype = "m4v";
 									uvalue = new Array(pcount);
@@ -908,7 +908,7 @@ THREE.glTFLoader.prototype.load = function( url, callback ) {
 									}
 								}
 								break;
-							case WebGLRenderingContext.SAMPLER_2D :
+							case THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.SAMPLER_2D :
 								utype = "t";
 								uvalue = value ? CreateTexture(this.resources, value) : null;
 								break;
@@ -1091,7 +1091,7 @@ THREE.glTFLoader.prototype.load = function( url, callback ) {
 				for (var i = 0 ; i < primitivesDescription.length ; i++) {
 					var primitiveDescription = primitivesDescription[i];
 
-					if (primitiveDescription.mode === WebGLRenderingContext.TRIANGLES) {
+					if (primitiveDescription.mode === THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.TRIANGLES) {
 
 						var geometry = new ClassicGeometry();
 						var materialEntry = this.resources.getEntry(primitiveDescription.material);

examples/js/loaders/gltf/glTFLoaderUtils.js

@@ -5,18 +5,34 @@
 THREE.GLTFLoaderUtils = Object.create(Object, {
 
     // errors
-    MISSING_DESCRIPTION: { value: "MISSING_DESCRIPTION" },
-    INVALID_PATH: { value: "INVALID_PATH" },
-    INVALID_TYPE: { value: "INVALID_TYPE" },
+    INVALID_PATH_ERROR: { value: "INVALID_PATH" },
+    INVALID_TYPE_ERROR: { value: "INVALID_TYPE" },
     XMLHTTPREQUEST_STATUS_ERROR: { value: "XMLHTTPREQUEST_STATUS_ERROR" },
-    NOT_FOUND: { value: "NOT_FOUND" },
     // misc constants
     ARRAY_BUFFER: { value: "ArrayBuffer" },
+    // webgl constants (from https://www.opengl.org/registry/api/GL/glcorearb.h)
+    WEBGL_CONSTANTS: {
+        value: {
+            FLOAT: 5126,
+            FLOAT_MAT2: 35674,
+            FLOAT_MAT3: 35675,
+            FLOAT_MAT4: 35676,
+            FLOAT_VEC2: 35664,
+            FLOAT_VEC3: 35665,
+            FLOAT_VEC4: 35666,
+            LINEAR: 9729,
+            REPEAT: 10497,
+            SAMPLER_2D: 35678,
+            TRIANGLES: 4,
+            UNSIGNED_BYTE: 5121,
+            UNSIGNED_SHORT: 5123
+        }
+    },
 
     _streams : { value:{}, writable: true },
 
     _streamsStatus: { value: {}, writable: true },
-    
+
     _resources: { value: {}, writable: true },
 
     _resourcesStatus: { value: {}, writable: true },
@@ -123,18 +139,18 @@ THREE.GLTFLoaderUtils = Object.create(Object, {
             var self = this;
 
             if (!type) {
-                delegate.handleError(THREE.GLTFLoaderUtils.INVALID_TYPE, null);
+                delegate.handleError(THREE.GLTFLoaderUtils.INVALID_TYPE_ERROR, null);
                 return;
             }
 
             if (!path) {
-                delegate.handleError(THREE.GLTFLoaderUtils.INVALID_PATH);
+                delegate.handleError(THREE.GLTFLoaderUtils.INVALID_PATH_ERROR);
                 return;
             }
 
             var xhr = new XMLHttpRequest();
             xhr.open('GET', path, true);
-            xhr.responseType = (type === this.ARRAY_BUFFER) ? "arraybuffer" : "text";
+            xhr.responseType = (type === THREE.GLTFLoaderUtils.ARRAY_BUFFER) ? "arraybuffer" : "text";
 
             //if this is not specified, 1 "big blob" scenes fails to load.
             xhr.setRequestHeader("If-Modified-Since", "Sat, 01 Jan 1970 00:00:00 GMT");
@@ -165,16 +181,16 @@ THREE.GLTFLoaderUtils = Object.create(Object, {
             {
             	this._resourcesStatus[request.id] = 1;
             }
-            
+
             var streamStatus = this._streamsStatus[request.uri];
             if (streamStatus && streamStatus.status === "loading" )
             {
             	streamStatus.requests.push(request);
                 return;
             }
-            
+
             this._streamsStatus[request.uri] = { status : "loading", requests : [request] };
-    		
+
             var self = this;
             var processResourceDelegate = {};
 
@@ -189,7 +205,7 @@ THREE.GLTFLoaderUtils = Object.create(Object, {
                     --self._resourcesStatus[req_.id];
 
                 }, this);
-            	
+
                 delete self._streamsStatus[path];
 
             };
@@ -205,9 +221,9 @@ THREE.GLTFLoaderUtils = Object.create(Object, {
 
     _elementSizeForGLType: {
         value: function(componentType, type) {
-    	
+
     		var nElements = 0;
-    		switch(type) {    		
+    		switch(type) {
 	            case "SCALAR" :
 	                nElements = 1;
 	                break;
@@ -233,13 +249,13 @@ THREE.GLTFLoaderUtils = Object.create(Object, {
 	            	debugger;
 	            	break;
     		}
-    		
+
             switch (componentType) {
-                case WebGLRenderingContext.FLOAT :
+                case THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.FLOAT :
                     return Float32Array.BYTES_PER_ELEMENT * nElements;
-                case WebGLRenderingContext.UNSIGNED_BYTE :
+                case THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.UNSIGNED_BYTE :
                     return Uint8Array.BYTES_PER_ELEMENT * nElements;
-                case WebGLRenderingContext.UNSIGNED_SHORT :
+                case THREE.GLTFLoaderUtils.WEBGL_CONSTANTS.UNSIGNED_SHORT :
                     return Uint16Array.BYTES_PER_ELEMENT * nElements;
                 default :
                 	debugger;
@@ -263,9 +279,9 @@ THREE.GLTFLoaderUtils = Object.create(Object, {
                                     "ctx" : ctx }, null);
         }
     },
-    
+
     getBuffer: {
-    	
+
             value: function(wrappedBufferView, delegate, ctx) {
 
             var savedBuffer = this._getResource(wrappedBufferView.id);
@@ -280,7 +296,7 @@ THREE.GLTFLoaderUtils = Object.create(Object, {
     },
 
     getFile: {
-    	
+
         value: function(request, delegate, ctx) {
 
     		request.delegate = delegate;
@@ -292,8 +308,8 @@ THREE.GLTFLoaderUtils = Object.create(Object, {
                 "type" : "text",
                 "delegate" : delegate,
                 "ctx" : ctx }, null);
-    	
+
             return null;
 	    }
-	},    
+	},
 });