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

Moving Matrix material into its own file

Browse Source
This commit is contained in:
Rezmason
2018-09-03 00:18:25 -07:00
parent f491d45565
commit 118b5a69ef
2 changed files with 53 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
index.html
View File

@@ -13,6 +13,8 @@
<script src="./js/LuminosityHighPassShader.js"></script>
<script src="./js/UnrealBloomPass.js"></script>
<script src="./js/MatrixMaterial.js"></script>
<script>
const urlParams = new Map(window.location.href.replace(/^[^\?]+\?/, "").split("&").map(pair => pair.split("=")));
@@ -41,56 +43,7 @@
element.appendChild(renderer.domElement);
const composer = new THREE.EffectComposer( renderer );
const texture = new THREE.TextureLoader().load( './matrixcode_msdf.png' );
const material = new THREE.RawShaderMaterial({
uniforms: {
map: { "type": "t", value: texture },
sharpness: { "type": "f", value: sharpness },
},
vertexShader:`
attribute vec2 uv;
attribute vec3 position;
attribute float brightness;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
varying vec2 vUV;
varying float vBrightness;
void main(void) {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
vUV = uv;
vBrightness = brightness;
}
`,
fragmentShader:`
#ifdef GL_OES_standard_derivatives
#extension GL_OES_standard_derivatives: enable
#endif
precision lowp float;
#define BIG_ENOUGH 0.001
#define MODIFIED_ALPHATEST (0.02 * isBigEnough / BIG_ENOUGH)
uniform sampler2D map;
uniform float sharpness;
varying vec2 vUV;
varying float vBrightness;
float median(float r, float g, float b) {
return max(min(r, g), min(max(r, g), b));
}
void main() {
vec3 sample = texture2D(map, vUV).rgb;
float sigDist = median(sample.r, sample.g, sample.b) - 0.5;
float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);
float dscale = 0.353505 / sharpness;
vec2 duv = dscale * (dFdx(vUV) + dFdy(vUV));
float isBigEnough = max(abs(duv.x), abs(duv.y));
if (isBigEnough > BIG_ENOUGH) {
float ratio = BIG_ENOUGH / isBigEnough;
alpha = ratio * alpha + (1.0 - ratio) * (sigDist + 0.5);
}
if (isBigEnough <= BIG_ENOUGH && alpha < 0.5) { discard; return; }
if (alpha < 0.5 * MODIFIED_ALPHATEST) { discard; return; }
gl_FragColor = vec4(vec3(vBrightness * alpha), 1);
}
`,
});
const material = makeMatrixMaterial(texture, sharpness);
const fTexU = 1 / 8;
const fTexV = 1 / 8;

50
js/MatrixMaterial.js Normal file
View File

@@ -0,0 +1,50 @@
const makeMatrixMaterial = (texture, sharpness) => new THREE.RawShaderMaterial({
uniforms: {
map: { "type": "t", value: texture },
sharpness: { "type": "f", value: sharpness },
},
vertexShader:`
attribute vec2 uv;
attribute vec3 position;
attribute float brightness;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
varying vec2 vUV;
varying float vBrightness;
void main(void) {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
vUV = uv;
vBrightness = brightness;
}
`,
fragmentShader:`
#ifdef GL_OES_standard_derivatives
#extension GL_OES_standard_derivatives: enable
#endif
precision lowp float;
#define BIG_ENOUGH 0.001
#define MODIFIED_ALPHATEST (0.02 * isBigEnough / BIG_ENOUGH)
uniform sampler2D map;
uniform float sharpness;
varying vec2 vUV;
varying float vBrightness;
float median(float r, float g, float b) {
return max(min(r, g), min(max(r, g), b));
}
void main() {
vec3 sample = texture2D(map, vUV).rgb;
float sigDist = median(sample.r, sample.g, sample.b) - 0.5;
float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);
float dscale = 0.353505 / sharpness;
vec2 duv = dscale * (dFdx(vUV) + dFdy(vUV));
float isBigEnough = max(abs(duv.x), abs(duv.y));
if (isBigEnough > BIG_ENOUGH) {
float ratio = BIG_ENOUGH / isBigEnough;
alpha = ratio * alpha + (1.0 - ratio) * (sigDist + 0.5);
}
if (isBigEnough <= BIG_ENOUGH && alpha < 0.5) { discard; return; }
if (alpha < 0.5 * MODIFIED_ALPHATEST) { discard; return; }
gl_FragColor = vec4(vec3(vBrightness * alpha), 1);
}
`,
});