Skip to content

Commit

Permalink
Merge pull request #71 from wix-incubator/rgbSplit_fixing
Browse files Browse the repository at this point in the history 
trying to fade out
  • Loading branch information
@ameerabuf
ameerabuf authored Feb 13, 2025
2 parents 18c2fad + 5c7daf8 commit 88c6b61
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 17 deletions.
21 changes: 17 additions & 4 deletions dist/index.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1148,6 +1148,7 @@ displacement.WRAP = WRAP_METHODS.WRAP;
* @param {string} [params.offsetInputR] code to use as input for the red offset. Defaults to `u_channelOffsetR`.
* @param {string} [params.offsetInputG] code to use as input for the green offset. Defaults to `u_channelOffsetG`.
* @param {string} [params.offsetInputB] code to use as input for the blue offset. Defaults to `u_channelOffsetB`.
* @param {function} [params.boundsOffsetFactor] function that takes name of variable for channel offset and returns a float value as string. Defaults to returning `'1.0`'.
* @returns {channelSplitEffect}
*
* @example channelSplit({offsetRed: {x: 0.02, y: 0.0}})
Expand All @@ -1159,8 +1160,8 @@ function channelSplit({
offsetInputR = 'u_channelOffsetR',
offsetInputG = 'u_channelOffsetG',
offsetInputB = 'u_channelOffsetB',
boundsOffsetFactor = (boundsOffset) => '1.0',
} = {}) {

/**
* @typedef {Object} channelSplitEffect
* @property {boolean} disabled
Expand All @@ -1184,9 +1185,21 @@ function channelSplit({
vec2 _splitOffsetR = ${offsetInputR};
vec2 _splitOffsetG = ${offsetInputG};
vec2 _splitOffsetB = ${offsetInputB};
float redSplit = texture2D(u_source, sourceCoord + _splitOffsetR).r;
float greenSplit = texture2D(u_source, sourceCoord + _splitOffsetG).g;
float blueSplit = texture2D(u_source, sourceCoord + _splitOffsetB).b;
vec2 redSample = sourceCoord + _splitOffsetR;
vec2 greenSample = sourceCoord + _splitOffsetG;
vec2 blueSample = sourceCoord + _splitOffsetB;
float redBoundsOffset = min(0.0, min(min(redSample.x, redSample.y), min(1.0 - redSample.x, 1.0 - redSample.y)));
float greenBoundsOffset = min(0.0, min(min(greenSample.x, greenSample.y), min(1.0 - greenSample.x, 1.0 - greenSample.y)));
float blueBoundsOffset = min(0.0, min(min(blueSample.x, blueSample.y), min(1.0 - blueSample.x, 1.0 - blueSample.y)));
float redSplit = texture2D(u_source, sourceCoord + _splitOffsetR).r * ${boundsOffsetFactor(
'redBoundsOffset'
)};
float greenSplit = texture2D(u_source, sourceCoord + _splitOffsetG).g * ${boundsOffsetFactor(
'greenBoundsOffset'
)};
float blueSplit = texture2D(u_source, sourceCoord + _splitOffsetB).b * ${boundsOffsetFactor(
'blueBoundsOffset'
)};
color = vec3(redSplit, greenSplit, blueSplit);
}`,
},
Expand Down
15 changes: 13 additions & 2 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset='utf-8'>
<title>kampos 0.14.10 | Documentation</title>
<title>kampos 0.14.11 | Documentation</title>
<meta name='description' content='Tiny and fast effects compositor on WebGL'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link href='assets/bass.css' rel='stylesheet'>
Expand All @@ -15,7 +15,7 @@
<div id='split-left' class='overflow-auto fs0 height-viewport-100'>
<div class='py1 px2'>
<h3 class='mb0 no-anchor'>kampos</h3>
<div class='mb1'><code>0.14.10</code></div>
<div class='mb1'><code>0.14.11</code></div>
<input
placeholder='Filter'
id='filter-input'
Expand Down Expand Up @@ -4046,6 +4046,17 @@ <h3 class='fl m0' id='effects'>



<tr>
<td class='break-word'><span class='code bold'>params.boundsOffsetFactor</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">function</a>?</code>
</td>
<td class='break-word'><span>function that takes name of variable for channel offset and returns a float value as string. Defaults to returning
<code>'1.0</code>
'.
</span></td>
</tr>



</tbody>
</table>

Expand Down
21 changes: 17 additions & 4 deletions index.umd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1152,6 +1152,7 @@ const mat3 satmat = mat3(
* @param {string} [params.offsetInputR] code to use as input for the red offset. Defaults to `u_channelOffsetR`.
* @param {string} [params.offsetInputG] code to use as input for the green offset. Defaults to `u_channelOffsetG`.
* @param {string} [params.offsetInputB] code to use as input for the blue offset. Defaults to `u_channelOffsetB`.
* @param {function} [params.boundsOffsetFactor] function that takes name of variable for channel offset and returns a float value as string. Defaults to returning `'1.0`'.
* @returns {channelSplitEffect}
*
* @example channelSplit({offsetRed: {x: 0.02, y: 0.0}})
Expand All @@ -1163,8 +1164,8 @@ const mat3 satmat = mat3(
offsetInputR = 'u_channelOffsetR',
offsetInputG = 'u_channelOffsetG',
offsetInputB = 'u_channelOffsetB',
boundsOffsetFactor = (boundsOffset) => '1.0',
} = {}) {

/**
* @typedef {Object} channelSplitEffect
* @property {boolean} disabled
Expand All @@ -1188,9 +1189,21 @@ const mat3 satmat = mat3(
vec2 _splitOffsetR = ${offsetInputR};
vec2 _splitOffsetG = ${offsetInputG};
vec2 _splitOffsetB = ${offsetInputB};
float redSplit = texture2D(u_source, sourceCoord + _splitOffsetR).r;
float greenSplit = texture2D(u_source, sourceCoord + _splitOffsetG).g;
float blueSplit = texture2D(u_source, sourceCoord + _splitOffsetB).b;
vec2 redSample = sourceCoord + _splitOffsetR;
vec2 greenSample = sourceCoord + _splitOffsetG;
vec2 blueSample = sourceCoord + _splitOffsetB;
float redBoundsOffset = min(0.0, min(min(redSample.x, redSample.y), min(1.0 - redSample.x, 1.0 - redSample.y)));
float greenBoundsOffset = min(0.0, min(min(greenSample.x, greenSample.y), min(1.0 - greenSample.x, 1.0 - greenSample.y)));
float blueBoundsOffset = min(0.0, min(min(blueSample.x, blueSample.y), min(1.0 - blueSample.x, 1.0 - blueSample.y)));
float redSplit = texture2D(u_source, sourceCoord + _splitOffsetR).r * ${boundsOffsetFactor(
'redBoundsOffset'
)};
float greenSplit = texture2D(u_source, sourceCoord + _splitOffsetG).g * ${boundsOffsetFactor(
'greenBoundsOffset'
)};
float blueSplit = texture2D(u_source, sourceCoord + _splitOffsetB).b * ${boundsOffsetFactor(
'blueBoundsOffset'
)};
color = vec3(redSplit, greenSplit, blueSplit);
}`,
},
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "kampos",
"version": "0.14.11",
"version": "0.14.12",
"description": "Tiny and fast effects compositor on WebGL",
"registry": "https://registry.npmjs.org/",
"main": "dist/index.cjs",
Expand Down
21 changes: 17 additions & 4 deletions src/effects/channel-split.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
* @param {string} [params.offsetInputR] code to use as input for the red offset. Defaults to `u_channelOffsetR`.
* @param {string} [params.offsetInputG] code to use as input for the green offset. Defaults to `u_channelOffsetG`.
* @param {string} [params.offsetInputB] code to use as input for the blue offset. Defaults to `u_channelOffsetB`.
* @param {function} [params.boundsOffsetFactor] function that takes name of variable for channel offset and returns a float value as string. Defaults to returning `'1.0`'.
* @returns {channelSplitEffect}
*
* @example channelSplit({offsetRed: {x: 0.02, y: 0.0}})
Expand All @@ -18,8 +19,8 @@ export default function channelSplit({
offsetInputR = 'u_channelOffsetR',
offsetInputG = 'u_channelOffsetG',
offsetInputB = 'u_channelOffsetB',
boundsOffsetFactor = (boundsOffset) => '1.0',
} = {}) {

/**
* @typedef {Object} channelSplitEffect
* @property {boolean} disabled
Expand All @@ -43,9 +44,21 @@ export default function channelSplit({
vec2 _splitOffsetR = ${offsetInputR};
vec2 _splitOffsetG = ${offsetInputG};
vec2 _splitOffsetB = ${offsetInputB};
float redSplit = texture2D(u_source, sourceCoord + _splitOffsetR).r;
float greenSplit = texture2D(u_source, sourceCoord + _splitOffsetG).g;
float blueSplit = texture2D(u_source, sourceCoord + _splitOffsetB).b;
vec2 redSample = sourceCoord + _splitOffsetR;
vec2 greenSample = sourceCoord + _splitOffsetG;
vec2 blueSample = sourceCoord + _splitOffsetB;
float redBoundsOffset = min(0.0, min(min(redSample.x, redSample.y), min(1.0 - redSample.x, 1.0 - redSample.y)));
float greenBoundsOffset = min(0.0, min(min(greenSample.x, greenSample.y), min(1.0 - greenSample.x, 1.0 - greenSample.y)));
float blueBoundsOffset = min(0.0, min(min(blueSample.x, blueSample.y), min(1.0 - blueSample.x, 1.0 - blueSample.y)));
float redSplit = texture2D(u_source, sourceCoord + _splitOffsetR).r * ${boundsOffsetFactor(
'redBoundsOffset'
)};
float greenSplit = texture2D(u_source, sourceCoord + _splitOffsetG).g * ${boundsOffsetFactor(
'greenBoundsOffset'
)};
float blueSplit = texture2D(u_source, sourceCoord + _splitOffsetB).b * ${boundsOffsetFactor(
'blueBoundsOffset'
)};
color = vec3(redSplit, greenSplit, blueSplit);
}`,
},
Expand Down

0 comments on commit 88c6b61

Please sign in to comment.