eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-17 05:49:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Added noise to coloration passes, removed film grain pass. Added ImageOverlayPass option; effect can be specified in URL variables.

Browse Source
This commit is contained in:
Rezmason
2018-09-03 20:04:42 -07:00
parent a644133c1e
commit 7bf43539c1
7 changed files with 118 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
js/ColorMapPass.js
View File

@@ -11,7 +11,7 @@ const easeInOutQuad = input => {
return 1 - 2 * input * input;
}
THREE.ColorMapPass = function (entries) {
THREE.ColorMapPass = function (entries, ditherMagnitude = 1) {
const colors = Array(256).fill().map(_ => new THREE.Vector3());
const sortedEntries = entries.slice().sort((e1, e2) => e1.at - e2.at).map(entry => ({
color: entry.color,
@@ -44,7 +44,8 @@ THREE.ColorMapPass = function (entries) {
this.shader = {
uniforms: {
tDiffuse: { value: null },
tColorData: { value: this.dataTexture }
tColorData: { value: this.dataTexture },
ditherMagnitude: { value: ditherMagnitude }
},
vertexShader: `
@@ -56,15 +57,21 @@ THREE.ColorMapPass = function (entries) {
`,
fragmentShader: `
#define PI 3.14159265359
uniform sampler2D tDiffuse;
uniform sampler2D tColorData;
uniform float ditherMagnitude;
varying vec2 vUv;
highp float rand( const in vec2 uv ) {
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 );
return fract(sin(sn) * c);
}
void main() {
gl_FragColor = vec4(
texture2D( tColorData, vec2( texture2D( tDiffuse, vUv ).r, 0.0 ) ).rgb,
1.0
);
gl_FragColor = texture2D( tColorData, vec2( texture2D( tDiffuse, vUv ).r - rand( gl_FragCoord.xy ) * ditherMagnitude, 0.0 ) );
}
`
};

60
js/FilmGrainPass.js
View File

@@ -1,60 +0,0 @@
/**
* @author rezmason
*/
THREE.FilmGrainPass = function (blurMagnitude, ditherMagnitude) {
this.shader = {
uniforms: {
tDiffuse: { value: null },
blurMagnitude: { value: blurMagnitude },
ditherMagnitude: { value: ditherMagnitude }
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4( position, 1.0 );
}
`,
fragmentShader: `
#define PI 3.14159265359
uniform sampler2D tDiffuse;
uniform float blurMagnitude;
uniform float ditherMagnitude;
varying vec2 vUv;
highp float rand( const in vec2 uv ) {
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 );
return fract(sin(sn) * c);
}
vec3 dithering( vec3 color1, vec3 color2 ) {
float difference = pow(length(color1 - color2), 0.1);
return color1 + vec3( -1, 0.5, 0.5 ) * ditherMagnitude * difference * mix( -1.0, 1.0, rand( gl_FragCoord.xy ) );
}
void main() {
vec4 sample = texture2D( tDiffuse, vUv );
vec4 blurSum = vec4( 0.0 );
blurSum += texture2D( tDiffuse, vUv + vec2(-blurMagnitude, -blurMagnitude) ) * 0.25;
blurSum += texture2D( tDiffuse, vUv + vec2( blurMagnitude, -blurMagnitude) ) * 0.25;
blurSum += texture2D( tDiffuse, vUv + vec2(-blurMagnitude, blurMagnitude) ) * 0.25;
blurSum += texture2D( tDiffuse, vUv + vec2( blurMagnitude, blurMagnitude) ) * 0.25;
gl_FragColor = vec4(dithering(blurSum.rgb, sample.rgb), 1.0);
}
`
};
THREE.ShaderPass.call(this, this.shader);
};
THREE.FilmGrainPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.FilmGrainPass,
render: THREE.ShaderPass.prototype.render
});

14
js/HorizontalColorationPass.js
View File

@@ -2,7 +2,7 @@
* @author rezmason
*/
THREE.HorizontalColorationPass = function (colors) {
THREE.HorizontalColorationPass = function (colors, ditherMagnitude = 1) {
const values = new Uint8Array([].concat(...colors.map(color => color.toArray().map(component => Math.floor(component * 255)))));
this.dataTexture = new THREE.DataTexture(
@@ -19,6 +19,7 @@ THREE.HorizontalColorationPass = function (colors) {
uniforms: {
tDiffuse: { value: null },
tColorData: { value: this.dataTexture },
ditherMagnitude: { value: ditherMagnitude },
},
vertexShader: `
@@ -30,13 +31,22 @@ THREE.HorizontalColorationPass = function (colors) {
`,
fragmentShader: `
#define PI 3.14159265359
uniform sampler2D tDiffuse;
uniform sampler2D tColorData;
uniform float ditherMagnitude;
varying vec2 vUv;
highp float rand( const in vec2 uv ) {
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 );
return fract(sin(sn) * c);
}
void main() {
float value = texture2D(tDiffuse, vUv).r;
vec3 value2 = texture2D(tColorData, vUv).rgb;
vec3 value2 = texture2D(tColorData, vUv).rgb - rand( gl_FragCoord.xy ) * ditherMagnitude;
gl_FragColor = vec4(value2 * value, 1.0);
}
`

41
js/ImageOverlayPass.js Normal file
View File

@@ -0,0 +1,41 @@
/**
* @author rezmason
*/
THREE.ImageOverlayPass = function (texture) {
this.texture = texture;
this.shader = {
uniforms: {
tDiffuse: { value: null },
map: { value: this.texture },
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4( position, 1.0 );
}
`,
fragmentShader: `
uniform sampler2D tDiffuse;
uniform sampler2D map;
varying vec2 vUv;
void main() {
gl_FragColor = vec4(texture2D(map, vUv).rgb * (pow(texture2D(tDiffuse, vUv).r, 1.5) * 0.995 + 0.005), 1.0);
}
`
};
THREE.ShaderPass.call(this, this.shader);
};
THREE.ImageOverlayPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.ImageOverlayPass,
render: function() {
this.uniforms[ "map" ].value = this.texture;
THREE.ShaderPass.prototype.render.call(this, ...arguments);
}
});

6
js/MatrixGeometry.js
View File

@@ -89,12 +89,6 @@ const makeMatrixGeometry = ({
const delta = ((isNaN(last) || now - last > 1000) ? 0 : now - last) / 1000 * animationSpeed;
last = now;
bloomPass.enabled = delta < minimumPostProcessingFrameTime;
filmGrainPass.enabled = delta < minimumPostProcessingFrameTime;
composer.passes.filter(pass => !pass.enabled).renderToScreen = false;
composer.passes.filter(pass => pass.enabled).pop().renderToScreen = true;
const simTime = now * animationSpeed * fallSpeed * 0.0005;
for (const column of columns) {