eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-18 22:29:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Breaking temporality in the color map pass graininess.

Browse Source 
Adding a more finely tuned color map for 1999
This commit is contained in:
Rezmason
2018-12-27 02:39:04 -08:00
parent ffcbae6519
commit 1f69d59249
2 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@@ -80,10 +80,28 @@
threshold: 0.3 threshold: 0.3
}, },
palette: [ palette: [
{color: new THREE.Vector3(0.00, 0.00, 0.00), at: 0.0}, // {color: new THREE.Vector3(0.00, 0.00, 0.00), at: 0.0},
{color: new THREE.Vector3(0.05, 0.52, 0.17), at: 0.4}, // {color: new THREE.Vector3(0.05, 0.52, 0.17), at: 0.4},
{color: new THREE.Vector3(0.12, 0.82, 0.37), at: 0.8}, // {color: new THREE.Vector3(0.12, 0.82, 0.37), at: 0.8},
{color: new THREE.Vector3(0.29, 1.00, 0.64), at: 1.0}, // {color: new THREE.Vector3(0.29, 1.00, 0.64), at: 1.0},
{color: new THREE.Vector3( 0/255, 0/255, 0/255), at: Math.pow( 0/16, 1.5)},
{color: new THREE.Vector3( 6/255, 16/255, 8/255), at: Math.pow( 1/16, 1.5)},
{color: new THREE.Vector3( 11/255, 28/255, 15/255), at: Math.pow( 2/16, 1.5)},
{color: new THREE.Vector3( 17/255, 41/255, 23/255), at: Math.pow( 3/16, 1.5)},
{color: new THREE.Vector3( 20/255, 58/255, 31/255), at: Math.pow( 4/16, 1.5)},
{color: new THREE.Vector3( 23/255, 84/255, 39/255), at: Math.pow( 5/16, 1.5)},
{color: new THREE.Vector3( 30/255, 113/255, 48/255), at: Math.pow( 6/16, 1.5)},
{color: new THREE.Vector3( 43/255, 142/255, 60/255), at: Math.pow( 7/16, 1.5)},
{color: new THREE.Vector3( 57/255, 160/255, 72/255), at: Math.pow( 8/16, 1.5)},
{color: new THREE.Vector3( 70/255, 175/255, 81/255), at: Math.pow( 9/16, 1.5)},
{color: new THREE.Vector3( 75/255, 187/255, 85/255), at: Math.pow(10/16, 1.5)},
{color: new THREE.Vector3( 78/255, 196/255, 91/255), at: Math.pow(11/16, 1.5)},
{color: new THREE.Vector3( 83/255, 203/255, 102/255), at: Math.pow(12/16, 1.5)},
{color: new THREE.Vector3( 92/255, 212/255, 114/255), at: Math.pow(13/16, 1.5)},
{color: new THREE.Vector3(109/255, 223/255, 130/255), at: Math.pow(14/16, 1.5)},
{color: new THREE.Vector3(129/255, 232/255, 148/255), at: Math.pow(15/16, 1.5)},
{color: new THREE.Vector3(140/255, 235/255, 157/255), at: Math.pow(16/16, 1.5)},
], ],
fallSpeed: 1, fallSpeed: 1,
cycleSpeed: 1, cycleSpeed: 1,

14
js/ColorMapPass.js
View File

@@ -13,7 +13,7 @@ const easeInOutQuad = input => {
const ARRAY_SIZE = 2048; const ARRAY_SIZE = 2048;
THREE.ColorMapPass = function (entries, ditherMagnitude = 1) { THREE.ColorMapPass = function (entries, ditherMagnitude = 1, graininess = 100) {
const colors = Array(ARRAY_SIZE).fill().map(_ => new THREE.Vector3(0, 0, 0)); const colors = Array(ARRAY_SIZE).fill().map(_ => new THREE.Vector3(0, 0, 0));
const sortedEntries = entries.slice().sort((e1, e2) => e1.at - e2.at).map(entry => ({ const sortedEntries = entries.slice().sort((e1, e2) => e1.at - e2.at).map(entry => ({
color: entry.color, color: entry.color,
@@ -42,12 +42,14 @@ THREE.ColorMapPass = function (entries, ditherMagnitude = 1) {
THREE.UVMapping); THREE.UVMapping);
this.dataTexture.magFilter = THREE.LinearFilter; this.dataTexture.magFilter = THREE.LinearFilter;
this.dataTexture.needsUpdate = true; this.dataTexture.needsUpdate = true;
this.graininess = graininess;
this.shader = { this.shader = {
uniforms: { uniforms: {
tDiffuse: { value: null }, tDiffuse: { value: null },
tColorData: { value: this.dataTexture }, tColorData: { value: this.dataTexture },
ditherMagnitude: { value: ditherMagnitude } ditherMagnitude: { value: ditherMagnitude },
tTime: { value: 0 }
}, },
vertexShader: ` vertexShader: `
@@ -64,16 +66,17 @@ THREE.ColorMapPass = function (entries, ditherMagnitude = 1) {
uniform sampler2D tDiffuse; uniform sampler2D tDiffuse;
uniform sampler2D tColorData; uniform sampler2D tColorData;
uniform float ditherMagnitude; uniform float ditherMagnitude;
uniform float tTime;
varying vec2 vUv; varying vec2 vUv;
highp float rand( const in vec2 uv ) { highp float rand( const in vec2 uv, const in float t ) {
const highp float a = 12.9898, b = 78.233, c = 43758.5453; const highp float a = 12.9898, b = 78.233, c = 43758.5453;
highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI ); highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
return fract(sin(sn) * c); return fract(sin(sn) * c + t);
} }
void main() { void main() {
gl_FragColor = texture2D( tColorData, vec2( texture2D( tDiffuse, vUv ).r - rand( gl_FragCoord.xy ) * ditherMagnitude, 0.0 ) ); gl_FragColor = texture2D( tColorData, vec2( texture2D( tDiffuse, vUv ).r - rand( gl_FragCoord.xy, tTime ) * ditherMagnitude, 0.0 ) );
} }
` `
}; };
@@ -85,6 +88,7 @@ THREE.ColorMapPass.prototype = Object.assign( Object.create( THREE.Pass.prototyp
constructor: THREE.ColorMapPass, constructor: THREE.ColorMapPass,
render: function() { render: function() {
this.uniforms[ "tColorData" ].value = this.dataTexture; this.uniforms[ "tColorData" ].value = this.dataTexture;
this.uniforms[ "tTime" ].value = (Date.now() % this.graininess) / this.graininess;
THREE.ShaderPass.prototype.render.call(this, ...arguments); THREE.ShaderPass.prototype.render.call(this, ...arguments);
} }
}); });