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

Cleaned up some code in the renderer.

Browse Source
This commit is contained in:
Rezmason
2021-09-12 00:51:20 -07:00
parent 7910ca0553
commit 70d04b2b50
1 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
js/renderer.js
View File

@@ -18,7 +18,6 @@ const cycleStyles = {
const numVerticesPerQuad = 2 * 3; const numVerticesPerQuad = 2 * 3;
export default (regl, config) => { export default (regl, config) => {
const volumetric = config.volumetric; const volumetric = config.volumetric;
@@ -296,15 +295,13 @@ export default (regl, config) => {
vert: ` vert: `
precision lowp float; precision lowp float;
attribute vec2 aPosition, aCorner; attribute vec2 aPosition, aCorner;
uniform float width, height; uniform sampler2D lastState;
uniform float density; uniform float density;
uniform vec2 quadSize; uniform vec2 quadSize;
uniform sampler2D lastState;
uniform float forwardSpeed;
uniform float glyphHeightToWidth; uniform float glyphHeightToWidth;
uniform mat4 camera; uniform mat4 camera, transform;
uniform mat4 transform; uniform vec2 screenSize;
uniform float time, animationSpeed; uniform float time, animationSpeed, forwardSpeed;
uniform bool volumetric; uniform bool volumetric;
uniform bool showComputationTexture; uniform bool showComputationTexture;
varying vec2 vUV; varying vec2 vUV;
@@ -312,24 +309,21 @@ export default (regl, config) => {
void main() { void main() {
vUV = (aPosition + aCorner) * quadSize; vUV = (aPosition + aCorner) * quadSize;
vec2 position = (aPosition + aCorner * vec2(density, 1.)) * quadSize; vGlyph = texture2D(lastState, aPosition * quadSize);
position = (position - 0.5) * 2.0;
vGlyph = texture2D(lastState, vUV + (0.5 - aCorner) * quadSize);
float quadDepth = 0.0; float quadDepth = 0.0;
if (volumetric && !showComputationTexture) { if (volumetric && !showComputationTexture) {
quadDepth = fract(vGlyph.b + time * animationSpeed * forwardSpeed); quadDepth = fract(vGlyph.b + time * animationSpeed * forwardSpeed);
vGlyph.b = quadDepth; vGlyph.b = quadDepth;
} }
vec4 pos = vec4(position, quadDepth, 1.0); vec2 position = (aPosition + aCorner * vec2(density, 1.)) * quadSize;
vec4 pos = vec4((position - 0.5) * 2.0, quadDepth, 1.0);
if (volumetric) { if (volumetric) {
pos.x /= glyphHeightToWidth; pos.x /= glyphHeightToWidth;
pos = camera * transform * pos; pos = camera * transform * pos;
} else { } else {
// Scale the geometry to cover the longest dimension of the viewport pos.xy *= screenSize;
vec2 size = width > height ? vec2(width / height, 1.) : vec2(1., height / width);
pos.xy *= size;
} }
gl_Position = pos; gl_Position = pos;
@@ -428,12 +422,13 @@ export default (regl, config) => {
uniforms: { uniforms: {
...uniforms, ...uniforms,
lastState: doubleBuffer.front,
glyphTex: msdfLoader.texture,
camera: regl.prop("camera"), camera: regl.prop("camera"),
transform: regl.prop("transform"), transform: regl.prop("transform"),
glyphTex: msdfLoader.texture, screenSize: regl.prop("screenSize")
height: regl.context("viewportWidth"),
width: regl.context("viewportHeight"),
lastState: doubleBuffer.front
}, },
attributes: { attributes: {
@@ -445,6 +440,7 @@ export default (regl, config) => {
framebuffer: output framebuffer: output
}); });
const screenSize = [1, 1];
const {mat4, vec3} = glMatrix; const {mat4, vec3} = glMatrix;
const camera = mat4.create(); const camera = mat4.create();
const translation = vec3.set(vec3.create(), 0, 0.5 / numRows, -1); const translation = vec3.set(vec3.create(), 0, 0.5 / numRows, -1);
@@ -458,7 +454,6 @@ export default (regl, config) => {
primary: output primary: output
}, },
() => { () => {
const time = Date.now(); const time = Date.now();
update(); update();
@@ -467,12 +462,13 @@ export default (regl, config) => {
color: [0, 0, 0, 1], color: [0, 0, 0, 1],
framebuffer: output framebuffer: output
}); });
render({camera, transform}); render({camera, transform, screenSize});
}, },
(w, h) => { (w, h) => {
output.resize(w, h); output.resize(w, h);
const aspectRatio = w / h; const aspectRatio = w / h;
glMatrix.mat4.perspective(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000); glMatrix.mat4.perspective(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
[screenSize[0], screenSize[1]] = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
}, },
msdfLoader.ready msdfLoader.ready
); );