kampos
-
0.14.2
+
0.14.3
+
+ params.direction string
+
+ (default 'x')
+ |
+ direction to apply the slit scan effect.
+ |
+
+
+
+
diff --git a/index.umd.js b/index.umd.js
index c1abfa9..73ae61a 100644
--- a/index.umd.js
+++ b/index.umd.js
@@ -1341,6 +1341,7 @@ const mat3 satmat = mat3(
* @param {number} [params.time=0.0] initial time for controlling initial noise value.
* @param {number} [params.intensity=0.1] initial intensity to use.
* @param {number} [params.frequency] initial frequency to use .
+ * @param {string} [params.direction='x'] direction to apply the slit scan effect.
* @returns {slitScanEffect}
*
* @example slitScan({intensity: 0.5, frequency: 3.0})
@@ -1349,7 +1350,8 @@ const mat3 satmat = mat3(
noise,
time = 0.0,
intensity = 0.1,
- frequency = 2.0
+ frequency = 2.0,
+ direction = 'x',
}) {
/**
* @typedef {Object} slitScanEffect
@@ -1362,6 +1364,10 @@ const mat3 satmat = mat3(
* effect.intensity = 0.5;
* effect.frequency = 3.5;
*/
+ const isHorizontal = direction === 'x';
+ const noiseFragPart = `gl_FragCoord.${direction} / u_resolution.${direction} * u_frequency`;
+ const noiseTimePart = 'u_time * 0.0001';
+
return {
fragment: {
uniform: {
@@ -1369,13 +1375,16 @@ const mat3 satmat = mat3(
u_intensity: 'float',
u_frequency: 'float',
u_time: 'float',
+ u_horizontal: 'bool'
},
constant: noise,
source: `
- float noiseValue = noise(vec2(gl_FragCoord.x / u_resolution.x * u_frequency, u_time * 0.0001));
- float sourceX = sourceCoord.x + noiseValue * u_intensity;
- float mirroredX = mod(-sourceX, 1.0) * (mod(sourceX - 1.0, 2.0) - mod(sourceX, 1.0)) + mod(sourceX, 1.0) * (mod(sourceX, 2.0) - mod(sourceX, 1.0));
- sourceCoord = vec2(mirroredX, sourceCoord.y);`,
+ if (u_slitScanEnabled) {
+ float noiseValue = noise(vec2(${isHorizontal ? noiseFragPart : noiseTimePart}, ${isHorizontal ? noiseTimePart : noiseFragPart}));
+ float source_ = sourceCoord.${direction} + noiseValue * u_intensity;
+ float mirrored_ = mod(-source_, 1.0) * (mod(source_ - 1.0, 2.0) - mod(source_, 1.0)) + mod(source_, 1.0) * (mod(source_, 2.0) - mod(source_, 1.0));
+ sourceCoord = ${isHorizontal ? 'vec2(mirrored_, sourceCoord.y)' : 'vec2(sourceCoord.x, mirrored_)'};
+ }`,
},
get disabled() {
return !this.uniforms[0].data[0];
@@ -2853,8 +2862,11 @@ void main() {
_getWebGLProgram(gl, vertexSrc, fragmentSrc);
if (error) {
+ function addLineNumbers(str) {
+ return str.split('\n').map((line, i) => `${i + 1}: ${line}`).join('\n');
+ }
throw new Error(
- `${type} error:: ${error}\n${type === SHADER_ERROR_TYPES.fragment ? fragmentSrc : vertexSrc}`,
+ `${type} error:: ${error}\n${addLineNumbers(type === SHADER_ERROR_TYPES.fragment ? fragmentSrc : vertexSrc)}`,
);
}
diff --git a/package-lock.json b/package-lock.json
index 064726b..0029469 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "kampos",
- "version": "0.14.3",
+ "version": "0.14.4",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "kampos",
- "version": "0.14.3",
+ "version": "0.14.4",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.26.0",
diff --git a/package.json b/package.json
index 1851e4b..cffa065 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "kampos",
- "version": "0.14.3",
+ "version": "0.14.4",
"description": "Tiny and fast effects compositor on WebGL",
"registry": "https://registry.npmjs.org/",
"main": "dist/index.cjs",
diff --git a/src/core.js b/src/core.js
index fb8047a..1ec3025 100644
--- a/src/core.js
+++ b/src/core.js
@@ -329,8 +329,11 @@ function _initProgram(gl, plane, effects, noSource = false) {
_getWebGLProgram(gl, vertexSrc, fragmentSrc);
if (error) {
+ function addLineNumbers(str) {
+ return str.split('\n').map((line, i) => `${i + 1}: ${line}`).join('\n');
+ }
throw new Error(
- `${type} error:: ${error}\n${type === SHADER_ERROR_TYPES.fragment ? fragmentSrc : vertexSrc}`,
+ `${type} error:: ${error}\n${addLineNumbers(type === SHADER_ERROR_TYPES.fragment ? fragmentSrc : vertexSrc)}`,
);
}
diff --git a/src/effects/slit-scan.js b/src/effects/slit-scan.js
index 070ecfd..d2829ea 100644
--- a/src/effects/slit-scan.js
+++ b/src/effects/slit-scan.js
@@ -6,6 +6,7 @@
* @param {number} [params.time=0.0] initial time for controlling initial noise value.
* @param {number} [params.intensity=0.1] initial intensity to use.
* @param {number} [params.frequency] initial frequency to use .
+ * @param {string} [params.direction='x'] direction to apply the slit scan effect.
* @returns {slitScanEffect}
*
* @example slitScan({intensity: 0.5, frequency: 3.0})
@@ -14,7 +15,8 @@ export default function ({
noise,
time = 0.0,
intensity = 0.1,
- frequency = 2.0
+ frequency = 2.0,
+ direction = 'x',
}) {
/**
* @typedef {Object} slitScanEffect
@@ -27,6 +29,10 @@ export default function ({
* effect.intensity = 0.5;
* effect.frequency = 3.5;
*/
+ const isHorizontal = direction === 'x';
+ const noiseFragPart = `gl_FragCoord.${direction} / u_resolution.${direction} * u_frequency`;
+ const noiseTimePart = 'u_time * 0.0001';
+
return {
fragment: {
uniform: {
@@ -34,13 +40,16 @@ export default function ({
u_intensity: 'float',
u_frequency: 'float',
u_time: 'float',
+ u_horizontal: 'bool'
},
constant: noise,
source: `
- float noiseValue = noise(vec2(gl_FragCoord.x / u_resolution.x * u_frequency, u_time * 0.0001));
- float sourceX = sourceCoord.x + noiseValue * u_intensity;
- float mirroredX = mod(-sourceX, 1.0) * (mod(sourceX - 1.0, 2.0) - mod(sourceX, 1.0)) + mod(sourceX, 1.0) * (mod(sourceX, 2.0) - mod(sourceX, 1.0));
- sourceCoord = vec2(mirroredX, sourceCoord.y);`,
+ if (u_slitScanEnabled) {
+ float noiseValue = noise(vec2(${isHorizontal ? noiseFragPart : noiseTimePart}, ${isHorizontal ? noiseTimePart : noiseFragPart}));
+ float source_ = sourceCoord.${direction} + noiseValue * u_intensity;
+ float mirrored_ = mod(-source_, 1.0) * (mod(source_ - 1.0, 2.0) - mod(source_, 1.0)) + mod(source_, 1.0) * (mod(source_, 2.0) - mod(source_, 1.0));
+ sourceCoord = ${isHorizontal ? 'vec2(mirrored_, sourceCoord.y)' : 'vec2(sourceCoord.x, mirrored_)'};
+ }`,
},
get disabled() {
return !this.uniforms[0].data[0];