Initial commit!

.gitignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+.DS_Store
+package-lock.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Colin van Eenige
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,86 @@
+
+# THREE.Phenomenon
+
+[![npm version](https://img.shields.io/npm/v/three.phenomenon.svg)](https://www.npmjs.com/package/three.phenomenon)
+[![gzip size](http://img.badgesize.io/https://unpkg.com/three.phenomenon/dist/three.phenomenon.mjs?compression=gzip)](https://unpkg.com/three.phenomenon)
+[![license](https://img.shields.io/npm/l/three.phenomenon.svg)](https://github.com/vaneenige/three.phenomenon/blob/master/LICENSE)
+[![dependencies](https://img.shields.io/badge/dependencies-three.js-ff69b4.svg)](https://github.com/mrdoob/three.js/)
+
+THREE.Phenomenon is a 900b wrapper around <a href="https://threejs.org/">three.js</a> built for high-performance WebGL experiences.
+
+With it's simple API a mesh can be created that contains multiple instances of a geometry combined with a material. With access to the vertex shader, attributes per instance and uniforms this mesh can be transformed in any way possible (and on the GPU).
+
+#### Features:
+- Custom instanced geometries
+- Attributes for every instance
+- Support for default materials
+- Compatible with three.js r100
+
+## Install
+```
+$ npm install --save three.phenomenon
+```
+
+## Usage
+```js
+// Import the library
+import Phenomenon from 'three.phenomenon';
+
+// Create an instance
+Phenomenon({ ... });
+```
+
+> The wrapper is also available through THREE.Phenomenon.
+
+## API
+### Phenomenon(options)
+
+Returns an instance of Phenomenon.
+
+#### options.attributes
+Type: `Array` <br/>
+
+Values used in the program that are stored once, directly on the GPU. Every item in this array needs to have a:
+- `name` for referencing data in the vertex shader.
+- `data` function to create the data for each instance.
+- `size` so it's clear what comes back from the data.
+
+> The data function receives the index of the current instance and the total number of instances so calculations can be done based on these values.
+
+#### options.uniforms
+Type: `Object` <br/>
+
+Variables used in the program that can be adjusted on the fly. These are accessible through the instance variable and can be updated directly.
+
+#### options.vertex
+Type: `String` <br/>
+
+The vertex shader of the program which will calculate the position of every instance. This will automatically get merged with the shaders that's created based on the provided geometry.
+
+#### options.geometry
+Type: `THREE.Geometry` <br/>
+
+The geometry that will be multiplied. See <a href="https://threejs.org/docs/#api/en/core/Geometry">Geometry</a> for more information.
+
+#### options.material
+Type: `THREE.Material` <br/>
+
+The material that is used for the geometry. See <a href="https://threejs.org/docs/#api/en/materials/Material">Material</a> for more information.
+
+#### options.multiplier
+Type: `Number` <br/>
+The amount of instances that will be created.
+
+#### options.castShadow
+Type: `Boolean` <br/>
+Should the mesh cast a shadow?
+
+## Contribute
+Are you excited about this library and have interesting ideas on how to improve it? Please tell me or contribute directly!
+
+```
+npm install > npm start > http://localhost:8080
+```
+
+## License
+MIT © <a href="https://use-the-platform.com">Colin van Eenige</a>

demo/index.html

@@ -0,0 +1,12 @@
+<html>
+  <head>
+    <title>THREE.Phenomenon</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="icon" href="/" />
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <script src="https://unpkg.com/three@0.100.0/build/three.js"></script>
+    <script src="./dist/bundle.umd.js"></script>
+  </body>
+</html>

demo/src/base/index.js

@@ -0,0 +1,41 @@
+function base(sceneColor) {
+  const scene = new THREE.Scene();
+
+  const camera = new THREE.PerspectiveCamera(
+    40,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    10000
+  );
+  camera.position.set(0, 20 * 1, 35 * 1);
+  camera.lookAt(scene.position);
+  scene.add(camera);
+
+  const ambientLight = new THREE.AmbientLight('#ffffff', 0.1);
+  scene.add(ambientLight);
+
+  const plane = new THREE.Mesh(
+    new THREE.PlaneGeometry(1000, 1000),
+    new THREE.MeshPhongMaterial({
+      emissive: sceneColor,
+    })
+  );
+  plane.receiveShadow = true;
+  plane.position.y = -15;
+  plane.rotation.x = Math.PI * -0.5;
+  scene.add(plane);
+
+  const light = new THREE.SpotLight(0xffffff, 3, 80, Math.PI * 0.25, 1, 2);
+  light.position.set(0, 40, 0);
+  light.castShadow = true;
+  light.shadow.mapSize.width = 1024;
+  light.shadow.mapSize.height = 1024;
+  light.shadow.camera.near = 0.5;
+  light.shadow.camera.far = 31;
+
+  scene.add(light);
+
+  return { scene, camera };
+}
+
+export default base;

demo/src/demo-1/instance.js

@@ -0,0 +1,117 @@
+import { getArrayWithNoise } from '../utils';
+import base from '../base';
+
+function instance() {
+  const { scene, camera } = base('#2196f3');
+
+  const duration = 0.7;
+
+  const geometry = new THREE.IcosahedronGeometry(1, 3);
+
+  const multiplier = 200;
+
+  const material = new THREE.MeshPhongMaterial({
+    color: '#ff6e40',
+    emissive: '#ff6e40',
+    flatShading: false,
+    shininess: 20,
+  });
+
+  const castShadow = true;
+
+  const attributes = [
+    {
+      name: 'aPositionStart',
+      data: () => getArrayWithNoise([0, 0, 0], 0),
+      size: 3,
+    },
+    {
+      name: 'aControlPointOne',
+      data: () => getArrayWithNoise([0, 0, 0], 40),
+      size: 3,
+    },
+    {
+      name: 'aControlPointTwo',
+      data: () => getArrayWithNoise([0, 0, 0], 0),
+      size: 3,
+    },
+    {
+      name: 'aPositionEnd',
+      data: () => getArrayWithNoise([0, 0, 0], 10),
+      size: 3,
+    },
+    {
+      name: 'aOffset',
+      data: i => [i * ((1 - duration) / (multiplier - 1))],
+      size: 1,
+    },
+  ];
+
+  const uniforms = {
+    time: {
+      value: 0,
+    },
+  };
+
+  const vertex = `
+    attribute vec3 aPositionStart;
+    attribute vec3 aControlPointOne;
+    attribute vec3 aControlPointTwo;
+    attribute vec3 aPositionEnd;
+    attribute float aOffset;
+    uniform float time;
+
+    float easeInOutSin(float t){
+      return (1.0 + sin(${Math.PI} * t - ${Math.PI} / 2.0)) / 2.0;
+    }
+
+    vec4 quatFromAxisAngle(vec3 axis, float angle) {
+      float halfAngle = angle * 0.5;
+      return vec4(axis.xyz * sin(halfAngle), cos(halfAngle));
+    }
+
+    vec3 rotateVector(vec4 q, vec3 v) {
+      return v + 2.0 * cross(q.xyz, cross(q.xyz, v) + q.w * v);
+    }
+
+    vec3 bezier4(vec3 a, vec3 b, vec3 c, vec3 d, float t) {
+      return mix(mix(mix(a, b, t), mix(b, c, t), t), mix(mix(b, c, t), mix(c, d, t), t), t);
+    }
+
+    void main(){
+      float tProgress = easeInOutSin(min(1.0, max(0.0, (time - aOffset)) / ${duration}));
+      vec4 quatX = quatFromAxisAngle(vec3(1.0, 0.0, 0.0), -5.0 * tProgress);
+      vec4 quatY = quatFromAxisAngle(vec3(0.0, 0.0, 0.0), -5.0 * tProgress);
+      vec3 basePosition = rotateVector(quatX, rotateVector(quatY, position));
+      vec3 newPosition = bezier4(aPositionStart, aControlPointOne, aControlPointTwo, aPositionEnd, tProgress);
+      float scale = tProgress * 2.0 - 1.0;
+      scale = 1.0 - scale * scale;
+      basePosition *= scale;
+      vNormal = rotateVector(quatX, vNormal);
+      gl_Position = basePosition + newPosition;
+    }
+  `;
+
+  const instance = new THREE.Phenomenon({
+    geometry,
+    multiplier,
+    material,
+    castShadow,
+    attributes,
+    uniforms,
+    vertex,
+  });
+
+  function render() {
+    if (instance.uniforms.time.value >= 1) {
+      instance.uniforms.time.value = 0;
+    }
+    instance.uniforms.time.value += 1 / (60 * 4);
+  }
+
+  scene.add(instance.mesh);
+
+  return { scene, camera, instance, render };
+}
+
+export default instance;