Perfect spheres (WIP)

See https://discourse.threejs.org/t/coding-jam-pixel-perfect-spheres-without-high-res-geometry/10154

by EliasHasle

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// Simple three.js example

var quads, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 26, window.innerWidth / window.innerHeight, 0.25, 500 );
    camera.position.set( 138, 50, 53 );

    // controls
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    
	//Spheres
	const N = 1000;
	const S = 50;
	const radius_max = 2;
	
	let geom = new THREE.BufferGeometry();
	let pa = new Float32Array(18*N);
	let ca = new Float32Array(18*N); //centers
	let ra = new Float32Array(6*N); //radiuses
	let cla = new Float32Array(18*N); //colors
	
	for (let i = 0; i < N; i++) {	
		//console.log("Setting positions!");
		
		//x coordiiates of quad
		pa[18*i] = -1;
		pa[18*i+3] = 1;
		pa[18*i+6] = 1;
		pa[18*i+9] = -1;
		pa[18*i+12] = 1;
		pa[18*i+15] = -1;
		
		//y coordiiates of quad
		pa[18*i+1] = -1;
		pa[18*i+4] = -1;
		pa[18*i+7] = 1;
		pa[18*i+10] = -1;
		pa[18*i+13] = 1;
		pa[18*i+16] = 1;

		let cx = S*(Math.random()-0.5);
		let cy = S*(Math.random()-0.5);
		let cz = S*(Math.random()-0.5);
		
		let r = Math.random();
		let g = Math.random();
		let b = Math.random();
		
		let radius = radius_max*(0.25 + 0.75*Math.random());
		//console.log(cx,cy,cz);
		
		for (let j = 0; j < 6; j++) {
			//console.log("Setting centers!");
			
			ca[18*i + 3*j] = cx;
			ca[18*i + 3*j+1] = cy;
			ca[18*i + 3*j+2] = cz;
			
			cla[18*i + 3*j] = r;
			cla[18*i + 3*j+1] = g;
			cla[18*i + 3*j+2] = b;
			
			ra[6*i+j] = radius;
			
			//z coordiiates of quad
			pa[18*i + 3*j+2] = 1;
		}
	}
	
	geom.addAttribute("position", new THREE.BufferAttribute(pa,3));
	geom.addAttribute("center", new THREE.BufferAttribute(ca,3));
	geom.addAttribute("radius", new...