Added Line and LineSegments support for the Three.js glTF loader. Includes two...

Added Line and LineSegments support for the Three.js glTF loader. Includes two examples: snowFlake and SnowFlakes where snowFlake is a THREE.Line object and snowFlakes a THREE.LineSegments object. Both examples are based on the geometry in the bufferedgeometry/lines/indexed demo.

examples/js/loaders/GLTFLoader.js

@@ -301,6 +301,7 @@ THREE.GLTFLoader = ( function () {
 		REPEAT: 10497,
 		SAMPLER_2D: 35678,
 		TRIANGLES: 4,
+		LINES: 1,
 		UNSIGNED_BYTE: 5121,
 		UNSIGNED_SHORT: 5123,
 
@@ -1227,14 +1228,76 @@ THREE.GLTFLoader = ( function () {
 
 						var meshNode = new THREE.Mesh( geometry, material );
 						meshNode.castShadow = true;
+						
+						if ( primitive.extras ) meshNode.userData = primitive.extras;
+						
+						group.add( meshNode );
+
+					}
+					
+					else if ( primitive.mode === WEBGL_CONSTANTS.LINES) {
+
+						var geometry = new THREE.BufferGeometry();
+
+						var attributes = primitive.attributes;
+
+						_each( attributes, function( attributeEntry, attributeId ) {
+
+							if ( !attributeEntry ) {
+
+								return;
+
+							}
+
+							var bufferAttribute = dependencies.accessors[ attributeEntry ];
+
+							switch ( attributeId ) {
+
+								case 'POSITION':
+									geometry.addAttribute( 'position', bufferAttribute );
+									break;
+									
+								case 'COLOR':
+								geometry.addAttribute( 'color', bufferAttribute );
+								break;
+								
+							}
+
+						});
+
+						if ( primitive.indices ) {
+
+							var indexArray = dependencies.accessors[ primitive.indices ];
+
+							if(indexArray) {
+
+								geometry.setIndex(indexArray);
+
+								var offset = {
+									start: 0,
+									index: 0,
+									count: indexArray.count
+								};
+
+								geometry.groups.push(offset);
+								geometry.computeBoundingSphere();
+							}
+						}
+
+						var material = dependencies.materials[ primitive.material ];
+						
+						var meshNode = new THREE.Line( geometry, material );
+						if ( primitive.indices ) meshNode = new THREE.LineSegments( geometry, material );
 
 						if ( primitive.extras ) meshNode.userData = primitive.extras;
 
 						group.add( meshNode );
 
-					} else {
+				}
+					
+					else {
 
-						console.warn( "Non-triangular primitives are not supported" );
+						console.warn( "Only triangular and line primitives are supported" );
 
 					}
 
@@ -1474,8 +1537,13 @@ THREE.GLTFLoader = ( function () {
 									material = originalMaterial;
 
 								}
-
-								child = new THREE.Mesh( originalGeometry, material );
+								if(child.type=="Line") {
+									child = new THREE.Line(originalGeometry, material);
+								}
+								else if(child.type=="LineSegments") {
+									child = new THREE.LineSegments(originalGeometry, material);
+								}
+								else child = new THREE.Mesh( originalGeometry, material );
 								child.castShadow = true;
 								child.userData = originalUserData;
 

examples/models/gltf/snowflake/line_frag.glsl

+precision highp float;
+varying vec3 vertexColor;
+
+void main(void) {
+
+	gl_FragColor = vec4(vertexColor.r, vertexColor.g, vertexColor.b, 1.0);;
+	
+}

examples/models/gltf/snowflake/line_vert.glsl

+precision highp float;
+
+attribute vec3 position;
+attribute vec3 color;
+
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
+
+varying vec3 vertexColor;
+
+void main(void) {
+
+	vec4 pos = modelViewMatrix * vec4(position,1.0);
+	vertexColor = vec3(color.x, color.y, color.y);
+	gl_Position = projectionMatrix * pos;
+	
+}
\ No newline at end of file

examples/models/gltf/snowflake/snowFlake.gltf

+{
+  "accessors": {
+    "VertexAccessor": {
+      "bufferView": "VertexBuffer",
+      "byteOffset": 0,
+      "byteStride": 12,
+      "componentType": 5126,
+      "count": 257,
+      "type": "VEC3",
+      "name": "VertexAccessor"
+    },
+    "ColorAccessor": {
+      "bufferView": "ColorView",
+      "byteOffset": 0,
+      "byteStride": 12,
+      "componentType": 5126,
+      "count": 257,
+      "type": "VEC3",
+      "name": "ColorAccessor"
+    }
+  },
+  "buffers": {
+    "Buffer": {
+      "uri": "snowFlake.bin",
+      "byteLength": 6168,
+      "type": "arraybuffer",
+      "name": "Buffer",
+      "extensions": {}
+    }
+  },
+  "bufferViews": {
+    "VertexBuffer": {
+      "buffer": "Buffer",
+      "byteOffset": 0,
+      "byteLength": 3084,
+      "target": 34962,
+      "name": "VertexBuffer"
+    },
+    "ColorView": {
+      "buffer": "Buffer",
+      "byteOffset": 3084,
+      "byteLength": 3084,
+      "target": 34962,
+      "name": "ColorView"
+    }
+  },
+  "images": {},
+  "materials": {
+    "meshMaterial": {
+      "technique": "meshTechnique",
+      "values": {},
+      "name": "meshMaterial"
+    }
+  },
+  "meshes": {
+    "mesh": {
+      "primitives": [
+        {
+          "attributes": {
+            "POSITION": "VertexAccessor",
+            "COLOR": "ColorAccessor"
+          },
+          "material": "meshMaterial",
+          "mode": 1
+        }
+      ],
+      "name": "mesh"
+    }
+  },
+  "nodes": {
+    "node1": {
+      "children": [],
+      "meshes": [
+        "mesh"
+      ],
+      "name": "node1"
+    }
+  },
+  "programs": {
+    "meshProgram": {
+      "attributes": [
+        "VertexAccessor",
+        "ColorAccessor"
+      ],
+      "fragmentShader": "fragmentShader",
+      "vertexShader": "vertexShader",
+      "name": "shader"
+    }
+  },
+  "samplers": {},
+  "scene": "default scene",
+  "scenes": {
+    "default scene": {
+      "nodes": [
+        "node1"
+      ],
+      "name": "default scene"
+    }
+  },
+  "shaders": {
+    "fragmentShader": {
+      "uri": "line_frag.glsl",
+      "type": 35632,
+      "name": "fragmentShader"
+    },
+    "vertexShader": {
+      "uri": "line_vert.glsl",
+      "type": 35633,
+      "name": "vertexShader"
+    }
+  },
+  "techniques": {
+    "meshTechnique": {
+      "parameters": {
+        "color": {
+          "type": 35665,
+          "semantic": "color"
+        }
+      },
+      "attributes": {},
+      "program": "meshProgram",
+      "uniforms": {},
+      "states": {
+        "enable": [
+          3042,
+          2929
+        ]
+      },
+      "name": "meshTechnique"
+    }
+  },
+  "textures": {}
+}
\ No newline at end of file

examples/models/gltf/snowflakes/line_frag.glsl

+precision highp float;
+varying vec3 vertexColor;
+
+void main(void) {
+
+	gl_FragColor = vec4(vertexColor.r, vertexColor.g, vertexColor.b, 1.0);;
+	
+}

examples/models/gltf/snowflakes/line_vert.glsl

+precision highp float;
+
+attribute vec3 position;
+attribute vec3 color;
+
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
+
+varying vec3 vertexColor;
+
+void main(void) {
+
+	vec4 pos = modelViewMatrix * vec4(position,1.0);
+	vertexColor = vec3(color.x, color.y, color.y);
+	gl_Position = projectionMatrix * pos;
+	
+}
\ No newline at end of file

examples/models/gltf/snowflakes/snowFlakes.gltf

+{
+  "accessors": {
+    "VertexAccessor": {
+      "bufferView": "VertexBuffer",
+      "byteOffset": 0,
+      "byteStride": 12,
+      "componentType": 5126,
+      "count": 1376,
+      "type": "VEC3",
+      "name": "VertexAccessor"
+    },
+    "TriangleAccessor": {
+      "bufferView": "Lines",
+      "byteOffset": 0,
+      "byteStride": 2,
+      "componentType": 5123,
+      "count": 2720,
+      "type": "SCALAR",
+      "name": "TriangleAccessor"
+    },
+    "ColorAccessor": {
+      "bufferView": "ColorView",
+      "byteOffset": 0,
+      "byteStride": 12,
+      "componentType": 5126,
+      "count": 1376,
+      "type": "VEC3",
+      "name": "ColorAccessor"
+    }
+  },
+  "buffers": {
+    "Buffer": {
+      "uri": "snowFlakes.bin",
+      "byteLength": 38464,
+      "type": "arraybuffer",
+      "name": "Buffer",
+      "extensions": {}
+    }
+  },
+  "bufferViews": {
+    "VertexBuffer": {
+      "buffer": "Buffer",
+      "byteOffset": 0,
+      "byteLength": 16512,
+      "target": 34962,
+      "name": "VertexBuffer"
+    },
+    "Lines": {
+      "buffer": "Buffer",
+      "byteOffset": 16512,
+      "byteLength": 5440,
+      "target": 34962,
+      "name": "Lines"
+    },
+    "ColorView": {
+      "buffer": "Buffer",
+      "byteOffset": 21952,
+      "byteLength": 16512,
+      "target": 34962,
+      "name": "ColorView"
+    }
+  },
+  "images": {},
+  "materials": {
+    "meshMaterial": {
+      "technique": "meshTechnique",
+      "values": {},
+      "name": "meshMaterial"
+    }
+  },
+  "meshes": {
+    "mesh": {
+      "primitives": [
+        {
+          "attributes": {
+            "POSITION": "VertexAccessor",
+            "COLOR": "ColorAccessor"
+          },
+          "indices": "TriangleAccessor",
+          "material": "meshMaterial",
+          "mode": 1
+        }
+      ],
+      "name": "mesh"
+    }
+  },
+  "nodes": {
+    "node1": {
+      "children": [],
+      "meshes": [
+        "mesh"
+      ],
+      "name": "node1"
+    }
+  },
+  "programs": {
+    "meshProgram": {
+      "attributes": [
+        "VertexAccessor",
+        "ColorAccessor"
+      ],
+      "fragmentShader": "fragmentShader",
+      "vertexShader": "vertexShader",
+      "name": "shader"
+    }
+  },
+  "samplers": {},
+  "scene": "default scene",
+  "scenes": {
+    "default scene": {
+      "nodes": [
+        "node1"
+      ],
+      "name": "default scene"
+    }
+  },
+  "shaders": {
+    "fragmentShader": {
+      "uri": "line_frag.glsl",
+      "type": 35632,
+      "name": "fragmentShader"
+    },
+    "vertexShader": {
+      "uri": "line_vert.glsl",
+      "type": 35633,
+      "name": "vertexShader"
+    }
+  },
+  "techniques": {
+    "meshTechnique": {
+      "parameters": {
+        "color": {
+          "type": 35665,
+          "semantic": "color"
+        }
+      },
+      "attributes": {},
+      "program": "meshProgram",
+      "uniforms": {},
+      "states": {
+        "enable": [
+          3042,
+          2929
+        ]
+      },
+      "name": "meshTechnique"
+    }
+  },
+  "textures": {}
+}
\ No newline at end of file

examples/webgl_loader_gltf.html

@@ -94,7 +94,7 @@
 		<a href="https://github.com/KhronosGroup/glTF" target="_blank">glTF</a> loader -
 		<br>
 		monster by <a href="http://www.3drt.com/downloads.htm" target="_blank">3drt</a> -
-		COLLADA duck by Sony - other models courtesy <a href="http://cesiumjs.org/" target="_blank">Cesium</a>
+		COLLADA duck by Sony - Cesium models courtesy <a href="http://cesiumjs.org/" target="_blank">Cesium</a>
 		</div>
 	<div id="container">
 	</div>
@@ -429,6 +429,25 @@
 					addLights:true,
 					addGround:true,
 					shadows:true
+				},
+				{
+					name : "Snowflake",
+					url : "./models/gltf/snowflake/snowFlake.gltf",
+					objectScale: new THREE.Vector3(4, 4, 1),
+					cameraPos: new THREE.Vector3(0, 100, 5000),
+					objectPosition: new THREE.Vector3(0, 0, 0),
+					addLights:false,
+					addGround:false,
+					shadows:false
+				},
+				{
+					name : "Snowflakes",
+					url : "./models/gltf/snowflakes/snowFlakes.gltf",
+					cameraPos: new THREE.Vector3(0, 100, 5000),
+					objectPosition: new THREE.Vector3(-1200, -1200, 0),
+					addLights:false,
+					addGround:false,
+					shadows:false
 				}
 			];