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

trying to fade out #71

Merged
merged 7 commits into from
Feb 13, 2025
Merged

trying to fade out #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
590b719
trying to fade out
ameerabuf Feb 9, 2025
16e3dbf
trying to fade out
ameerabuf Feb 9, 2025
bbb9c54
opt in
ameerabuf Feb 9, 2025
990ed42
opt in
ameerabuf Feb 9, 2025
1ef1a62
Updated docs
ydaniv Feb 13, 2025
c6d623b
Updated build
ydaniv Feb 13, 2025
5c7daf8
0.14.12
ydaniv Feb 13, 2025
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
21 changes: 17 additions & 4 deletions dist/index.cjs
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop

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
Open in desktop
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
Open in desktop
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
Loading