TypeScript

by Horsetopus

HTML

<script type="x-shader/x-vertex" id="vertexShader">
varying vec2 vUv;

#ifdef USE_SKINNING
    
    uniform mat4 bindMatrix;
    uniform mat4 bindMatrixInverse;
    
    uniform highp sampler2D boneTexture;
    uniform int boneTextureSize;
    mat4 getBoneMatrix( const in float i ) {
    
        float j = i * 4.0;
        float x = mod( j, float( boneTextureSize ) );
        float y = floor( j / float( boneTextureSize ) );
        float dx = 1.0 / float( boneTextureSize );
        float dy = 1.0 / float( boneTextureSize );
        y = dy * ( y + 0.5 );
        vec4 v1 = texture2D( boneTexture, vec2( dx * ( x + 0.5 ), y ) );
        vec4 v2 = texture2D( boneTexture, vec2( dx * ( x + 1.5 ), y ) );
        vec4 v3 = texture2D( boneTexture, vec2( dx * ( x + 2.5 ), y ) );
        vec4 v4 = texture2D( boneTexture, vec2( dx * ( x + 3.5 ), y ) );
        mat4 bone = mat4( v1, v2, v3, v4 );
        return bone;
    }
    
#endif

void main() {
    
    vUv = uv;
    
    vec3 transformed = vec3( position );
    
    #ifdef USE_SKINNING
        
        mat4 boneMatX = getBoneMatrix( skinIndex.x );
        mat4 boneMatY = getBoneMatrix( skinIndex.y );
        mat4 boneMatZ = getBoneMatrix( skinIndex.z );
        mat4 boneMatW = getBoneMatrix( skinIndex.w );
        
        vec4 skinVertex = bindMatrix * vec4( transformed, 1.0 );
        vec4 skinned = vec4( 0.0 );
        skinned += boneMatX * skinVertex * skinWeight.x;
        skinned += boneMatY * skinVertex * skinWeight.y;
        skinned += boneMatZ * skinVertex * skinWeight.z;
        skinned += boneMatW * skinVertex * skinWeight.w;
        transformed = ( bindMatrixInverse * skinned ).xyz;
        
    #endif
    
    vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
}
</script>

<script type="x-shader/x-fragment" id="fragmentShader">

varying vec2 vUv;

float wedge2D( vec2 v1, vec2 v2 ) {
	//return v1.x * v2.y - v1.y * v2.x;
  return v1.y * v2.x - v1.x *...

CSS

html, body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

TypeScript

let renderer:THREE.Renderer = new THREE.WebGLRenderer( { antialias: true, color: "white" } );
renderer.setClearColor( new THREE.Color( 0, 0, 0 ), 1 );
document.body.appendChild( renderer.domElement );

let scene:THREE.Scene = new THREE.Scene();

let camera:THREE.OrthographicCamera = new THREE.OrthographicCamera( 0, 1, 0, 1, 1, 1000 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );
scene.add( camera );

let geometry:THREE.PlaneGeometry = new THREE.PlaneGeometry( 1, 1 );
geometry.translate( 0.5, 0.5, 0 );

let material:THREE.ShaderMaterial = new THREE.ShaderMaterial(
	{
		uniforms:{
      resolution: { value:[ 0, 0 ] },
      p0: { value:[ 0.1, 0.1 ] },
      p2: { value:[ 0.1, 0.9 ] },
    	p1: { value:[ 0.9, 0.1 ] },
      p3: { value:[ 0.9, 0.9 ] }
    },
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
		fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
    side:THREE.DoubleSide,
    transparent: true,
    depthTest:false
	}
);

let mesh:THREE.Mesh = new THREE.Mesh( geometry, material );
mesh.renderOrder = 1;
scene.add( mesh );

let sphereInGeometry:SphereGeometry =  new THREE.SphereGeometry( 12, 12, 12 );
let sphereOutGeometry:SphereGeometry =  new THREE.SphereGeometry( 14, 14, 0 );
let sphereOutMaterial:SphereGeometry = new THREE.MeshBasicMaterial( {
	color: new THREE.Color( 1, 1, 1 ),
  transparent: true,
  depthTest:false
} );

let points:THREE.Mesh[] = [];
	
for ( let j = 0; j < 2; j++ ) {
	
	for ( let i = 0; i < 2; i++ ) {
  	
  	let point:THREE.Mesh = new THREE.Mesh(
    	sphereInGeometry,
      new THREE.MeshBasicMaterial( {
      	color: new THREE.Color( i * 255, j * 255, 0 ),
    		transparent: true,
    		depthTest:false
      } )
    );
    point.name = "p" + points.length.toString();
    point.renderOrder = 3;
    scene.add( point );
    
    points.push( point );
    
    let shell:THREE.Mesh = new THREE.Mesh( sphereOutGeometry, sphereOutMaterial );
    shell.renderOrder = 2;
   ...