Permalink
Browse files

debug fixes

  • Loading branch information...
wizgrav committed Dec 30, 2017
1 parent 2cba59b commit 514160690f5eb5fdb6fd56319a6154ca31aad12c
Showing with 29 additions and 16 deletions.
  1. +3 −3 assets/shaders/spectrum.fs
  2. +1 −1 lib/common.js
  3. +12 −0 lib/shader.js
  4. +1 −1 package.json
  5. +7 −5 tool/main.js
  6. +5 −6 tool/tool.html
@@ -8,7 +8,7 @@ void mainImage( out vec4 fragColor, in vec2 fragCoord ){
vec4 c = vec4(0.);
vec2 c2 = vec2(0.);
c2 = min(step(iBounds.xz,uv),step(uv, iBounds.yw));
c.rgb = vec3(min(c2.x, c2.y) * 0.4);
c.rgb += smoothstep(uv.y - alpha, uv.y, v) * (0.6 - 0.1 * step(mod(uv.x * 128.0, 12.0), 128.0/iResolution.x));
fragColor.rgb=c.rgb;
c.rgb = vec3(min(c2.x, c2.y) * 0.33);
c.rgb += smoothstep(uv.y - alpha, uv.y, v) * (0.66 - 0.1 * step(mod(uv.x * 128.0, 12.0), 128.0/iResolution.x));
fragColor=vec4(c.rgb, 1.0);
}
View
@@ -7,7 +7,7 @@ var audio = document.querySelector("audio");
audio.crossOrigin = "anonymous";
var canvas = document.querySelector("canvas");
var gl = twgl.getWebGLContext(canvas);
var gl = twgl.getWebGLContext(canvas, { powerPreference: "high-performance" });
var ext = gl.getExtension("OES_standard_derivatives");
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.BLEND);
View
@@ -13,6 +13,8 @@ var Shader = function (renderer, config) {
Object.keys(defines).forEach(function (d) {
def.push("#define "+d+" "+defines[d]);
});
if(!config.debug) def.push("#define TRANSITION 1");
self.programInfo = twgl.createProgramInfo(self.renderer,
[self.vertexShader, [self.fragmentHeader, def.join("\n"), source, config.correct ? self.fragmentCorrect : self.fragmentMain].join("\n")],
function(msg, line){
@@ -80,9 +82,13 @@ Shader.prototype.fragmentMain = [
"void main () {",
" vec4 color = vec4(0.0);",
" mainImage(color, gl_FragCoord.xy);",
"#if defined TRANSITION",
" const vec3 W = vec3(0.2125, 0.7154, 0.0721);",
" float l = dot(color.rgb, W);",
" color.a = iTransition < 1.0 ? iTransition * clamp(0.2,1.0,l): 1.0;",
"#else",
" color.a = iTransition < 1.0 ? 0.66: 1.0;",
"#endif",
" gl_FragColor = color;",
"}"
].join("\n");
@@ -113,7 +119,13 @@ Shader.prototype.fragmentCorrect = [
" hsv.yz *= iCorrect.zw;",
" hsv.x = mix(iCorrect.x, iCorrect.y, hsv.x);",
" color.rgb = hsv2rgb(hsv);",
"#if defined TRANSITION",
" const vec3 W = vec3(0.2125, 0.7154, 0.0721);",
" float l = dot(color.rgb, W);",
" color.a = iTransition < 1.0 ? iTransition * clamp(0.2,1.0,l): 1.0;",
"#else",
" color.a = iTransition < 1.0 ? iTransition * max(color.b, max(color.r, color.g)): 1.0;",
"#endif",
" gl_FragColor = color;",
"}"
].join("\n");
View
@@ -1,6 +1,6 @@
{
"name": "clubber",
"version": "1.7.0",
"version": "1.7.1",
"description": "Application of music theory in audio reactive visualizations",
"main": "./index.js",
"local-web-server": {
View
@@ -142,15 +142,17 @@ function getChunk(s) {
shaders.push(new Shader(gl, {
source: load("../assets/shaders/debug.fs"),
uniforms: uniforms,
correct: false
uniforms: uniforms,
correct: false,
debug: true
})
);
shaders.push(new Shader(gl, {
source: load("../assets/shaders/spectrum.fs"),
uniforms: uniforms,
correct: false
correct: false,
debug: true,
})
);
@@ -448,12 +450,12 @@ function render(time) {
gl.viewport(0, h * 0.52, w, h * 0.25);
uniforms.iResolution[1] = h * 0.25;
uniforms.iResolution[2] = h * 0.52;
shaders[1].transition = altShader ? 0.99 : 1;
shaders[1].transition = altShader ? 0.66 : 1.0;
shaders[1].render(data, true);
gl.viewport(0, 0, w, h * 0.49);
uniforms.iResolution[1] = h * 0.49;
uniforms.iResolution[2] = 0;
shaders[2].transition = altShader ? 0.99 : 1;
shaders[2].transition = altShader ? 0.66 : 1.0;
shaders[2].render(data, false);
}
}
View
@@ -160,7 +160,7 @@
#octaves {
position: relative;
display: none;
height: 47.5vh;
height: 47.2vh;
margin-top: 44.5vh;
width: 99%;
margin: 0;
@@ -307,7 +307,6 @@
<button onclick="change()" >4 audio</button>
<button onclick="loadShader()">5 shader</button>
<button onclick="toggleExport(this)" class="disabled">6 code</button>
<button class="midi disabled" onclick="toggleMidi(this)">7 midi</button>
</div>
<a style="color: rgb(220, 220, 255);" id="source" onmouseenter="sourceLink(this)" href="" target="_blank"
title="Go to the shader's source on ShaderToy.">Shader&nbsp;</a>
@@ -325,27 +324,27 @@
<input type="text" onkeyup="if(event.keyCode == 13) reMod()"
value="length(iMusic[0].yz) * min(iMusic[0].w, iMusic[1].w)" />
<input type="checkbox" onchange="reMod()" checked/>
<button class="midi disabled" onclick="setMidi(this, 0)">---</button>
<button title="midi out" class="midi disabled" onclick="setMidi(this, 0)">---</button>
</div>
<div class="green">
<div></div>
<input type="text" onkeyup="if(event.keyCode == 13) reMod()"
value="mix(iMusic[3].w, iMusic[3].z, iMusic[2].y)"/>
<input type="checkbox" onchange="reMod()" checked/>
<button class="midi disabled" onclick="setMidi(this, 1)">---</button>
<button title="midi out" class="midi disabled" onclick="setMidi(this, 1)">---</button>
</div>
<div class="blue">
<div></div>
<input type="text" onkeyup="if(event.keyCode == 13) reMod()" />
<input type="checkbox" onchange="reloadAll()" checked/>
<button class="midi disabled" onclick="setMidi(this, 2)">---</button>
<button title="midi out" class="midi disabled" onclick="setMidi(this, 2)">---</button>
</div>
<div class="alpha">
<div></div>
<input type="text" onkeyup="if(event.keyCode == 13) reMod()"
placeholder="Write glsl statements in the fields. These should evaluate to floats, ideally 0-1. Press enter to compile. Alt-<RGBA> toggles fields by color."/>
<input type="checkbox" id="radioAlpha" onchange="reMod()" checked/>
<button class="midi disabled" onclick="setMidi(this, 3)">---</button>
<button title="midi out" class="midi disabled" onclick="setMidi(this, 3)">---</button>
</div>
</div>
<div id="config">

0 comments on commit 5141606

Please sign in to comment.