Skip to content

Commit

Permalink
feat: add extra effects
Browse files Browse the repository at this point in the history
  • Loading branch information
@Robpayot
Robpayot committed Feb 9, 2025
1 parent 808a6db commit 55b9c8c
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 14 deletions.
25 changes: 19 additions & 6 deletions demo/shape-transition.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const guiObj = {
easing: 'quart.out',
bkgColor: '#121212',
brightness: false,
brightnessValue: 1,
maxBrightness: 1,
overlayColor: false,
};

Expand Down Expand Up @@ -106,6 +106,19 @@ const gsapEasings = [
'quint.inOut',
];

function hexToWebGLArray(hex, alpha = 1.0) {
// Remove the # if present
hex = hex.replace(/^#/, '');

// Parse r, g, b from the hex string
let r = parseInt(hex.substring(0, 2), 16) / 255;
let g = parseInt(hex.substring(2, 4), 16) / 255;
let b = parseInt(hex.substring(4, 6), 16) / 255;

// Return as a WebGL-compatible array
return new Float32Array([r, g, b, alpha]);
}

const setGUI = () => {
const gui = new GUI();

Expand Down Expand Up @@ -182,7 +195,7 @@ const setGUI = () => {
gui.add(guiObj, 'easing', gsapEasings);
gui.addColor(guiObj, 'bkgColor').onChange((value) => {
document.body.style.backgroundColor = value;
// program.uniforms.uColor.value = new Color(value);
fade.color = hexToWebGLArray(value);
});

const extras = gui.addFolder('Extras FX');
Expand All @@ -191,21 +204,21 @@ const setGUI = () => {
.add(guiObj, 'brightness')
.name('Brightness')
.onChange((value) => {
// program.uniforms.uBrightness.value = value ? 1 : 0;
fade.brightnessEnabled = value;
});
extras
.add(guiObj, 'brightnessValue', 0, 1)
.add(guiObj, 'maxBrightness', 0, 1)
.step(0.01)
.name('Brightness strength')
.onChange((value) => {
// program.uniforms.uBrightnessValue.value = value;
fade.maxBrightness = value;
});

extras
.add(guiObj, 'overlayColor')
.name('Overlay Color')
.onChange((value) => {
// program.uniforms.uOverlayColor.value = value ? 1 : 0;
fade.overlayColorEnabled = value;
});

document.body.style.backgroundColor = guiObj.bkgColor;
Expand Down
57 changes: 53 additions & 4 deletions dist/index.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2558,6 +2558,8 @@ function shapeTransition () {
* effect.progress = 0.5;
*/

// TODO: get uniforms params from the

// Default Uniforms values
const DEFAULT = {
progress: 0,
Expand All @@ -2570,7 +2572,7 @@ function shapeTransition () {
easing: 'quart.out',
bkgColor: '#121212',
brightness: false,
brightnessValue: 1,
maxBrightness: 1,
overlayColor: false,
};

Expand All @@ -2593,6 +2595,10 @@ function shapeTransition () {
u_shape: 'float',
u_direction: 'float',
u_effect: 'float',
u_brightnessEnabled: 'bool',
u_maxBrightness: 'float',
u_color: 'vec3',
u_overlayColorEnabled: 'bool',
},
constant: `
const float circleBorder = 0.15;
Expand Down Expand Up @@ -2630,9 +2636,6 @@ function shapeTransition () {
}
`,
main: `
// Under the hood
// vec4 pixel = texture2D(u_source, sourceCoord);
// vec3 color = pixel.rgb;
if (u_transitionEnabled) {
Expand Down Expand Up @@ -2697,6 +2700,18 @@ function shapeTransition () {
alpha = shapeColor.r;
}
// Apply brightness.
if (u_brightnessEnabled) {
float brightness = (0.5 * u_maxBrightness) * (1. - (abs(u_transitionProgress - 0.5) * 2.0));
color.rgb += brightness;
}
// Apply color.
if (u_overlayColorEnabled) {
float overlayProgress = (1. - (abs(u_transitionProgress - 0.5) * 2.0));
color.rgb += overlayProgress * u_color;
}
}`,
},
get disabled() {
Expand Down Expand Up @@ -2736,6 +2751,20 @@ function shapeTransition () {
set effect(value) {
this.uniforms[8].data[0] = value;
},
set brightnessEnabled(value) {
this.uniforms[9].data[0] = +value;
},
set maxBrightness(value) {
this.uniforms[10].data[0] = value;
},
set color([r, g, b, a]) {
this.uniforms[11].data[0] = r;
this.uniforms[11].data[1] = g;
this.uniforms[11].data[2] = b;
},
set overlayColorEnabled(value) {
this.uniforms[12].data[0] = +value;
},
varying: {
v_transitionToTexCoord: 'vec2',
},
Expand Down Expand Up @@ -2785,6 +2814,26 @@ function shapeTransition () {
type: 'f',
data: [DEFAULT.effect],
},
{
name: 'u_brightnessEnabled',
type: 'i',
data: [0],
},
{
name: 'u_maxBrightness',
type: 'f',
data: [DEFAULT.maxBrightness],
},
{
name: 'u_color',
type: 'f',
data: [0, 0, 0],
},
{
name: 'u_overlayColorEnabled',
type: 'i',
data: [0],
},
],
attributes: [
{
Expand Down
57 changes: 53 additions & 4 deletions src/transitions/shape.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export default function () {
* effect.progress = 0.5;
*/

// TODO: get uniforms params from the

// Default Uniforms values
const DEFAULT = {
progress: 0,
Expand All @@ -27,7 +29,7 @@ export default function () {
easing: 'quart.out',
bkgColor: '#121212',
brightness: false,
brightnessValue: 1,
maxBrightness: 1,
overlayColor: false,
};

Expand All @@ -50,6 +52,10 @@ export default function () {
u_shape: 'float',
u_direction: 'float',
u_effect: 'float',
u_brightnessEnabled: 'bool',
u_maxBrightness: 'float',
u_color: 'vec3',
u_overlayColorEnabled: 'bool',
},
constant: `
const float circleBorder = 0.15;
Expand Down Expand Up @@ -87,9 +93,6 @@ export default function () {
}
`,
main: `
// Under the hood
// vec4 pixel = texture2D(u_source, sourceCoord);
// vec3 color = pixel.rgb;
if (u_transitionEnabled) {
Expand Down Expand Up @@ -154,6 +157,18 @@ export default function () {
alpha = shapeColor.r;
}
// Apply brightness.
if (u_brightnessEnabled) {
float brightness = (0.5 * u_maxBrightness) * (1. - (abs(u_transitionProgress - 0.5) * 2.0));
color.rgb += brightness;
}
// Apply color.
if (u_overlayColorEnabled) {
float overlayProgress = (1. - (abs(u_transitionProgress - 0.5) * 2.0));
color.rgb += overlayProgress * u_color;
}
}`,
},
get disabled() {
Expand Down Expand Up @@ -193,6 +208,20 @@ export default function () {
set effect(value) {
this.uniforms[8].data[0] = value;
},
set brightnessEnabled(value) {
this.uniforms[9].data[0] = +value;
},
set maxBrightness(value) {
this.uniforms[10].data[0] = value;
},
set color([r, g, b, a]) {
this.uniforms[11].data[0] = r;
this.uniforms[11].data[1] = g;
this.uniforms[11].data[2] = b;
},
set overlayColorEnabled(value) {
this.uniforms[12].data[0] = +value;
},
varying: {
v_transitionToTexCoord: 'vec2',
},
Expand Down Expand Up @@ -242,6 +271,26 @@ export default function () {
type: 'f',
data: [DEFAULT.effect],
},
{
name: 'u_brightnessEnabled',
type: 'i',
data: [0],
},
{
name: 'u_maxBrightness',
type: 'f',
data: [DEFAULT.maxBrightness],
},
{
name: 'u_color',
type: 'f',
data: [0, 0, 0],
},
{
name: 'u_overlayColorEnabled',
type: 'i',
data: [0],
},
],
attributes: [
{
Expand Down

0 comments on commit 55b9c8c

Please sign in to comment.