three: Add SphereBufferGeometry, update webgl_custom_attributes test

threejs/tests/webgl/webgl_custom_attributes.ts

@@ -8,29 +8,20 @@
 
     var renderer, scene, camera, stats;
 
-    var sphere, uniforms, attributes;
+    var sphere, uniforms;
 
-    var noise = [];
-
-    var WIDTH = window.innerWidth,
-        HEIGHT = window.innerHeight;
+    var displacement, noise;
 
     init();
     animate();
 
     function init() {
 
-        camera = new THREE.PerspectiveCamera(30, WIDTH / HEIGHT, 1, 10000);
+        camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
         camera.position.z = 300;
 
         scene = new THREE.Scene();
 
-        attributes = {
-
-            displacement: { type: 'f', value: [] }
-
-        };
-
         uniforms = {
 
             amplitude: { type: "f", value: 1.0 },
@@ -44,7 +35,6 @@
         var shaderMaterial = new THREE.ShaderMaterial({
 
             uniforms: uniforms,
-            attributes: attributes,
             vertexShader: document.getElementById('vertexshader').textContent,
             fragmentShader: document.getElementById('fragmentshader').textContent
 
@@ -52,27 +42,27 @@
 
 
         var radius = 50, segments = 128, rings = 64;
-        var geometry = new THREE.SphereGeometry(radius, segments, rings);
-        geometry.dynamic = true;
 
-        sphere = new THREE.Mesh(geometry, shaderMaterial);
+        var geometry = new THREE.SphereBufferGeometry( radius, segments, rings );
 
-        var vertices = sphere.geometry.vertices;
-        var values = attributes.displacement.value;
+        displacement = new Float32Array( geometry.attributes["position"].count );
+        noise = new Float32Array( geometry.attributes["position"].count );
 
-        for (var v = 0; v < vertices.length; v++) {
+        for ( var i = 0; i < displacement.length; i ++ ) {
 
-            values[v] = 0;
-            noise[v] = Math.random() * 5;
+            noise[ i ] = Math.random() * 5;
 
         }
 
+        geometry.addAttribute( 'displacement', new THREE.BufferAttribute( displacement, 1 ) );
+
+        sphere = new THREE.Mesh(geometry, shaderMaterial);
         scene.add(sphere);
 
         renderer = new THREE.WebGLRenderer();
         renderer.setClearColor(0x050505);
         renderer.setPixelRatio(window.devicePixelRatio);
-        renderer.setSize(WIDTH, HEIGHT);
+        renderer.setSize(window.innerWidth, window.innerHeight);
 
         var container = document.getElementById('container');
         container.appendChild(renderer.domElement);
@@ -114,19 +104,19 @@
 
         uniforms.amplitude.value = 2.5 * Math.sin(sphere.rotation.y * 0.125);
         uniforms.color.value.offsetHSL(0.0005, 0, 0);
-
-        for (var i = 0; i < attributes.displacement.value.length; i++) {
-
-            attributes.displacement.value[i] = Math.sin(0.1 * i + time);
-
-            noise[i] += 0.5 * (0.5 - Math.random());
-            noise[i] = THREE.Math.clamp(noise[i], -5, 5);
-
-            attributes.displacement.value[i] += noise[i];
-
+        
+        for ( var i = 0; i < displacement.length; i ++ ) {
+        
+            displacement[ i ] = Math.sin( 0.1 * i + time );
+            
+            noise[ i ] += 0.5 * ( 0.5 - Math.random() );
+            noise[ i ] = THREE.Math.clamp( noise[ i ], -5, 5 );
+            
+            displacement[ i ] += noise[ i ];
+        
         }
 
-        attributes.displacement.needsUpdate = true;
+        sphere.geometry.attributes.displacement.needsUpdate = true;
 
         renderer.render(scene, camera);
 

threejs/three.d.ts

@@ -5618,6 +5618,23 @@ declare module THREE {
         addShape(shape: Shape, options?: any): void;
     }
 
+    interface SphereParameters {
+        radius: number;
+        widthSegments: number;
+        heightSegments: number;
+        phiStart: number;
+        phiLength: number;
+        thetaStart: number;
+        thetaLength: number;
+    }
+
+    export class SphereBufferGeometry extends BufferGeometry {
+        constructor(radius: number, widthSegments?: number, heightSegments?: number, phiStart?: number, phiLength?: number, thetaStart?: number, thetaLength?: number);
+
+        parameters: SphereParameters;
+
+    }
+
     /**
      * A class for generating sphere geometries
      */
@@ -5635,15 +5652,7 @@ declare module THREE {
          */
         constructor(radius: number, widthSegments?: number, heightSegments?: number, phiStart?: number, phiLength?: number, thetaStart?: number, thetaLength?: number);
 
-        parameters: {
-            radius: number;
-            widthSegments: number;
-            heightSegments: number;
-            phiStart: number;
-            phiLength: number;
-            thetaStart: number;
-            thetaLength: number;
-        };
+        parameters: SphereParameters;
     }
 
     export class TetrahedronGeometry extends PolyhedronGeometry {