Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebGL formatting improvements #80

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

WebGL formatting improvements #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0104c68
WebGL formatting improvements
Jirinrin Feb 27, 2023
ba10fb1
Also improve glsl formatting for 'bouncing' webgl anim
Jirinrin Feb 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 58 additions & 59 deletions src/modules/webgl-bouncing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,75 +12,74 @@ proto.author = 'Katja';
// 1: float, 2: vec2(x,y), 3: vec3(x,y,z)/(r,g,b), 4: vec4(x,y,z,w)/(r,g,b,a)
proto.uniforms['amp'] = 1;

proto.vertexShader = [
"attribute vec2 pos;",
"uniform float time;",
"varying float timeVar;",
"uniform float amp;",
"uniform vec2 mousePos;",
"varying vec2 mousePosF;",
"varying float ampF;",
"varying float timeF;",
"uniform vec2 ratio;",
"varying vec4 position;",
"void main()",
"{",
// This variable is shared with the fragment shader
// The 4th position is used for clipping-- irrelevant here, keep it at 1
"position = vec4(pos.x*ratio.x,pos.y*ratio.y,0.0,1.0);",

// Share time with fragment shader
"timeVar = time;",
"ampF = amp;",
//"position = vec4(pos.x*ratio.x*.5, pos.y*ratio.y*.5, 0.0, 1.0);",
// Manipulate the position of this vertex based on time
"position.xy *= 1.0 - ampF * .5;",
"float bla = ampF * abs(cos(time*.005));",
"position.y += bla * .6 * (position.y + 1.0);",
"position.y += ampF * position.y * -.3;",
"position.y += bla * .7;",
"position.y += ampF * max(-.7, min(-.7, position.y));",

// gl_Position is the default output variable
"gl_Position = position;",
"}"
].join("\n");
proto.vertexShader = glsl`
attribute vec2 pos;
uniform float time;
varying float timeVar;
uniform float amp;
uniform vec2 mousePos;
varying vec2 mousePosF;
varying float ampF;
varying float timeF;
uniform vec2 ratio;
varying vec4 position;

void main() {
// This variable is shared with the fragment shader
// The 4th position is used for clipping-- irrelevant here, keep it at 1
position = vec4(pos.x*ratio.x,pos.y*ratio.y,0.0,1.0);
// Share time with fragment shader
timeVar = time;
ampF = amp;
// position = vec4(pos.x*ratio.x*.5, pos.y*ratio.y*.5, 0.0, 1.0);
// Manipulate the position of this vertex based on time
position.xy *= 1.0 - ampF * .5;
float bla = ampF * abs(cos(time*.005));
position.y += bla * .6 * (position.y + 1.0);
position.y += ampF * position.y * -.3;
position.y += bla * .7;
position.y += ampF * max(-.7, min(-.7, position.y));

// gl_Position is the default output variable
gl_Position = position;
}
`

// The fragment shader gives the pixels their actual colour
proto.fragmentShader = [
proto.fragmentShader = glsl`
// Some default boilerplate mumbo-jumbo
"precision mediump float;",
precision mediump float;

// The colour as passed from Javascript
"uniform vec3 mainCol;",
"varying float ampF;",
uniform vec3 mainCol;
varying float ampF;

// timestamp in MS from vertex shader
"varying float timeVar;",
// timestamp in MS from vertex shader
varying float timeVar;

// The shared vector position from the vertex shader
"varying vec4 position;",
varying vec4 position;

// This runs for _every_ pixel drawn
"void main()",
"{",
//amp == 1 mouse over, amp == 0 mouse leave
"vec3 initialColor = vec3(132.0/255.0, 187.0/255.0, 37.0/255.0);",
// Play with the colours
"float red = initialColor.r * (1.0 - ampF) + ampF * abs(cos(timeVar*.0012));",
"float green = initialColor.g * (1.0 - ampF) + ampF * abs(cos(timeVar*.0016));",
"float blue = initialColor.b * (1.0 - ampF) + ampF * abs(cos(timeVar*.0029));",

//make letters white
"if(mainCol == vec3(1.0,1.0,1.0)) {",
"red = 1.0;",
"green = 1.0;",
"blue = 1.0;",
"}",
// Output is RGBA
"gl_FragColor = vec4(red, green, blue, 1.0);",
"}"
].join("\n");
void main() {
//amp == 1 mouse over, amp == 0 mouse leave
vec3 initialColor = vec3(132.0/255.0, 187.0/255.0, 37.0/255.0);
// Play with the colours
float red = initialColor.r * (1.0 - ampF) + ampF * abs(cos(timeVar*.0012));
float green = initialColor.g * (1.0 - ampF) + ampF * abs(cos(timeVar*.0016));
float blue = initialColor.b * (1.0 - ampF) + ampF * abs(cos(timeVar*.0029));

//make letters white
if (mainCol == vec3(1.0,1.0,1.0)) {
red = 1.0;
green = 1.0;
blue = 1.0;
}

// Output is RGBA
gl_FragColor = vec4(red, green, blue, 1.0);
}
`


// Module specifics -- fade-in and fade-out animation on mouse enter / leave
Expand Down
112 changes: 55 additions & 57 deletions src/modules/webgl-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,97 +23,95 @@ proto.margin = 0;
proto.uniforms['amp'] = 1;

// The vertex shader transforms vertex coordinates to on-screen pixels
proto.vertexShader = [
proto.vertexShader = glsl`
// x, y position for each vertex
"attribute vec2 pos;",
attribute vec2 pos;

// timestamp in MS
"uniform float time;",
uniform float time;

// Effect amplitude
"uniform float amp;",
uniform float amp;

// Logo width, height ratio for correct rendering
"uniform vec2 ratio;",
uniform vec2 ratio;

// Mouse position [x,y], where center is [0,0]
"uniform vec2 mousePos;",
uniform vec2 mousePos;

// Send the vector to the fragment shader
"varying vec4 position;",
varying vec4 position;

// Timestamp in ms from vertex shader
"varying float timeVar;",
varying float timeVar;

// The amplitude of your effect (when mouse-overed) (0-1)
"varying float ampF;",
varying float ampF;

// This function runs for _every_ vector in the shape
"void main()",
"{",
// This variable is shared with the fragment shader
// The 4th position is used for clipping-- irrelevant here, keep it at 1
"position = vec4(pos.x*ratio.x,pos.y*ratio.y,0.0,1.0);",
// This function runs for _every_ vertex in the shape
void main() {
// This variable is shared with the fragment shader
// The 4th position is used for clipping-- irrelevant here, keep it at 1
position = vec4(pos.x*ratio.x,pos.y*ratio.y,0.0,1.0);

// Send needed variables to fragment shader
"timeVar = time;",
"ampF = amp;",
// Send needed variables to fragment shader
timeVar = time;
ampF = amp;

// Manipulate the x-position of this vertex based on time
"position.x *= cos(time*.005);",
// Manipulate the x-position of this vertex based on time
position.x *= cos(time*.005);

// gl_Position is the default output variable
"gl_Position = position;",
"}"
].join("\n");
// gl_Position is the default output variable
gl_Position = position;
}
`

// The fragment shader gives the pixels their actual color
proto.fragmentShader = [
proto.fragmentShader = glsl`
// Some default boilerplate mumbo-jumbo
"precision mediump float;",
precision mediump float;

// The color as passed from Javascript
"uniform vec3 mainCol;",
uniform vec3 mainCol;

// timestamp in MS from vertex shader
"varying float timeVar;",
varying float timeVar;

// The amplitude of your effect
"varying float ampF;",
varying float ampF;

// The shared vector position from the vertex shader
"varying vec4 position;",
varying vec4 position;

// Color definitions
"const vec4 white = vec4(1.,1.,1.,1.);",
"const vec4 transparent = vec4(0.,0.,0.,0.);",
const vec4 white = vec4(1.,1.,1.,1.);
const vec4 transparent = vec4(0.,0.,0.,0.);

// This runs for _every_ pixel drawn
"void main()",
"{",
// The output color, inherit from main color
"vec4 color = vec4(mainCol,1.);",

// Play with the colors
"color.r = mainCol.r * cos(timeVar*.002);",
"color.g = mainCol.g * cos(timeVar*.01);",
"color.b = mainCol.b * cos(timeVar*.04);",

// What to do with the white letters
//"if(mainCol == white.rgb) {",
// ampF becomes 1 when hovered

// Keep them white,
//"color = white;",

// ..or make them transparent on hover
//"color = (1.-ampF) * white + ampF * transparent;",
//"}",

// gl_FragColor is the color rendered on screen
"gl_FragColor = color;",
"}"
].join("\n");
void main() {
// The output color, inherit from main color
vec4 color = vec4(mainCol,1.);

// Play with the colors
color.r = mainCol.r * cos(timeVar*.002);
color.g = mainCol.g * cos(timeVar*.01);
color.b = mainCol.b * cos(timeVar*.04);

// What to do with the white letters
//"if(mainCol == white.rgb) {",
// ampF becomes 1 when hovered

// Keep them white,
//"color = white;",

// ..or make them transparent on hover
//"color = (1.-ampF) * white + ampF * transparent;",
//"}",

// gl_FragColor is the color rendered on screen (RGBA)
gl_FragColor = color;
}
`


// Module specifics -- fade-in and fade-out animation on mouse enter / leave
Expand Down
88 changes: 45 additions & 43 deletions src/modules/webgl-flap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,50 +10,52 @@ proto.author = 'Sjoerd';

proto.uniforms['amp'] = 1;

proto.vertexShader = [
"attribute vec2 pos;",
"uniform float time;",
"uniform float amp;",
"uniform vec2 mousePos;",
"varying vec2 mousePosF;",
"varying float ampF;",
"varying float timeF;",
"varying float flap;",
"uniform vec2 ratio;",
"varying vec3 position;",
"void main()",
"{",
"float a = amp * 3.1415 * 2.;",
"float curve = (1. - cos(a)) * .5;",
"flap = sin(time / 100.) * pow(pos.x, 2.) * pow(amp, .3);",
"position = vec3(pos.x * cos(flap), pos.y, 1.0 - curve * (1. - cos(pos.y)) - flap * (1. - amp*.5));",
"position = vec3(position.x, position.y * cos(a) + position.z * sin(a), position.z * cos(a) - position.y * sin(a));",
"position = vec3(position.xy / ((2.5 - position.z) / 1.5) * ratio, 0.);",
"mousePosF = mousePos;",
"ampF = amp;",
"timeF = time;",
"gl_Position = vec4(position,1.0);",
"}"
].join("\n");
// todo: ga gwn dit proberen te runnen in een shader sandbox

proto.fragmentShader = [
"precision mediump float;",
"uniform vec3 mainCol;",
"varying float ampF;",
"varying vec2 mousePosF;",
"varying float timeF;",
"varying vec3 position;",
"void main()",
"{",
"float mouseDist = length(mousePosF);",
"vec3 color = mainCol;",
"float lighten = sin(timeF / 100.) * pow(position.x, 1.) * pow(ampF, .3) * -1.;",
"color.r = 1. - (1. - mainCol.r) * (1. - ampF * lighten);",
"color.g = 1. - (1. - mainCol.g) * (1. - ampF * lighten);",
"color.b = 1. - (1. - mainCol.b) * (1. - ampF * lighten);",
"gl_FragColor = vec4(color , 1.0);",
"}"
].join("\n");
proto.vertexShader = glsl`
attribute vec2 pos;
uniform float time;
uniform float amp;
uniform vec2 mousePos;
varying vec2 mousePosF;
varying float ampF;
varying float timeF;
varying float flap;
uniform vec2 ratio;
varying vec3 position;

void main() {
float a = amp * 3.1415 * 2.;
float curve = (1. - cos(a)) * .5;
flap = sin(time / 100.) * pow(pos.x, 2.) * pow(amp, .3);
position = vec3(pos.x * cos(flap), pos.y, 1.0 - curve * (1. - cos(pos.y)) - flap * (1. - amp*.5));
position = vec3(position.x, position.y * cos(a) + position.z * sin(a), position.z * cos(a) - position.y * sin(a));
position = vec3(position.xy / ((2.5 - position.z) / 1.5) * ratio, 0.);
mousePosF = mousePos;
ampF = amp;
timeF = time;
gl_Position = vec4(position,1.0);
}
`

proto.fragmentShader = glsl`
precision mediump float;
uniform vec3 mainCol;
varying float ampF;
varying vec2 mousePosF;
varying float timeF;
varying vec3 position;

void main() {
float mouseDist = length(mousePosF);
vec3 color = mainCol;
float lighten = sin(timeF / 100.) * pow(position.x, 1.) * pow(ampF, .3) * -1.;
color.r = 1. - (1. - mainCol.r) * (1. - ampF * lighten);
color.g = 1. - (1. - mainCol.g) * (1. - ampF * lighten);
color.b = 1. - (1. - mainCol.b) * (1. - ampF * lighten);
gl_FragColor = vec4(color , 1.0);
}
`

proto.initModule = function(){
this.logo.element.addEventListener('mouseenter', this.enter.bind(this));
Expand Down
Loading