@shijiu/jsview-vue-samples 2.2.128 → 2.2.373

package/BakeViewDemo/App.vue

@@ -37,7 +37,12 @@ onMounted(() => {
       (textureName, autoRecycle, w, h) => {
         vCapturedTexture.value = textureName;
         console.log(`capture done id=${textureName} w=${w} h=${h}`);
-      }
+
+        if (autoRecycle) {
+          // 已经是设置了texture的自动回收，所以不再需要主动调用 JsvTextureStoreApi.deleteTexture 来释放内存
+        }
+      },
+      true // 自动回收, 不填也行，默认为true
     );
   }, 2200);
 });

package/Basic/components/anim/AnimEasingCubicBezier.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { getKeyFramesGroup } from "jsview";
+import { onBeforeUnmount } from "vue";
+
+const itemStyle = {
+  top: 20,
+  left: 20,
+  width: 60,
+  height: 60,
+  fontSize: 15,
+  color: "rgba(255, 255, 0, 1)",
+  backgroundColor: "rgba(255, 0, 0, 1)",
+};
+
+// 单纯的放大动画使用贝塞尔的timingFunction成为心跳效果
+const cP1 = [0.42, 3.96];
+const cP2 = [0.62, 0];
+const sScaleUpTs = `BasicAnim_PumpUp 0.8s cubic-bezier(${cP1[0]}, ${cP1[1]}, ${cP2[0]}, ${cP2[1]}) infinite`;
+
+// 暂时不暴露fill-mode = forwards接口
+// const sScaleUpOnce = `BasicAnim_PumpUp 0.8s cubic-bezier(${cP1[0]}, ${cP1[1]}, ${cP2[0]}, ${cP2[1]}) 3 forwards`;
+
+// 拿取group句柄
+const styleShell = getKeyFramesGroup();
+
+// 动态注入规则, 注意 keyFrame 名称是全局的, 不要重名
+styleShell.insertRule(
+  "@keyframes BasicAnim_PumpUp \
+    {from {transform: scale3d(1, 1, 1);} \
+    to {transform: scale3d(1.2, 1.2, 1);}}"
+);
+
+// keyFrame 注意unmount时的销毁
+onBeforeUnmount(() => {
+  styleShell.removeRule("BasicAnim_PumpUp");
+});
+</script>
+
+<template>
+  <div id="layout-root">
+    <div :style="{ ...itemStyle, animation: sScaleUpTs }">
+      {{ "心跳\n效果" }}
+    </div>
+    <!-- <div
+      :style="{
+        ...itemStyle,
+        left: 100,
+        animation: sScaleUpOnce,
+      }"
+    >
+      {{ "心跳\n效果2" }}
+    </div> -->
+  </div>
+</template>
+
+<style></style>

package/Basic/components/anim/AnimGroup2.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { reactive, onMounted, onBeforeUnmount } from "vue";
+import ContentBlock from "../ContentBlock.vue";
+import AnimEasingCubicBezier from "./AnimEasingCubicBezier.vue";
+
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object,
+});
+
+const contentBlockProps = {
+  colIndex: 0,
+  itemSides: props.itemSides,
+};
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {});
+</script>
+
+<template>
+  <div id="item-root">
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 0 }"
+      :="contentBlockProps"
+      :index="1"
+      title="贝塞尔动画"
+    >
+      <AnimEasingCubicBezier />
+    </ContentBlock>
+  </div>
+</template>

package/Basic/components/panel/Panel2.vue

@@ -1,13 +1,14 @@
 <script setup>
 import TitleBar from "./TitleBar.vue";
 import ImageGroup from "../img/ImageGroup.vue";
+import AnimGroup2 from "../anim/AnimGroup2.vue";
 
 const props = defineProps({
   panelClass: String,
   itemSides: Object,
 });
 
-const titleData = ["img标签"];
+const titleData = ["img标签", "div动画2"];
 </script>
 
 <template>
@@ -23,9 +24,13 @@ const titleData = ["img标签"];
         :contentClass="panelClass"
         :itemSides="itemSides"
       />
+      <AnimGroup2
+        :style="{ left: itemSides.width * 1 }"
+        :contentClass="panelClass"
+        :itemSides="itemSides"
+      />
     </div>
   </div>
 </template>
 
-<style>
-</style>
+<style></style>

package/CoupletsTest/widget/Banger/Maroon.vue

@@ -81,14 +81,12 @@ let deg = shallowRef(props.deg);
 //动画处理
 const fire = () => {
   props.myRef.value.start();
-  actorControl.run([
-    actorControl
-      .action()
-      .setSpdAndAccel(undefined, 0, undefined, 0.15, null, null),
-    actorControl
+  actorControl.run((cmds) => [
+    cmds.action().setSpdAndAccel(undefined, 0, undefined, 0.15, null, null),
+    cmds
       .condition()
       .reachPosition(undefined, 280)
-      .then([actorControl.action().stopMoving()]),
+      .then([cmds.action().stopMoving()]),
   ]);
 };
 
@@ -112,7 +110,6 @@ const sprayOk = {
   lifeMax: 2000,
   accelerateX: 0,
   accelerateY: 0,
-  addNumSpeed: 0.001,
   enableFade: true,
   enableShrink: true,
 };

package/CoupletsTest/widget/Fireworks/Fireworks.vue

@@ -160,16 +160,26 @@ const props = defineProps({
 });
 
 //火花图片素材
-const group1_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_1.png"
-const group1_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_2.png"
-const group2_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_1.png"
-const group2_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_2.png"
-const group3_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_1.png"
-const group3_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_2.png"
-const group4_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_1.png"
-const group4_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_2.png"
-const group5_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_1.png"
-const group5_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_2.png"
+const group1_1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_1.png";
+const group1_2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_2.png";
+const group2_1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_1.png";
+const group2_2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_2.png";
+const group3_1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_1.png";
+const group3_2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_2.png";
+const group4_1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_1.png";
+const group4_2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_2.png";
+const group5_1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_1.png";
+const group5_2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_2.png";
 //弹药图片素材(请按需修改)
 const ammo =
   "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star2.png";
@@ -180,7 +190,7 @@ const fireworksJson =
   "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/fireworks.json";
 
 //运动距离
-let moveDistance = 260
+let moveDistance = 260;
 let sprite_info = shallowRef(null);
 let view_size = shallowRef(null);
 let isSpray = shallowRef(false);
@@ -195,7 +205,7 @@ let actorRef = shallowRef(null);
 let myShow = shallowRef(false);
 let actorControl;
 //随机顺序绽放函数
-const spray=()=> {
+const spray = () => {
   timer.id2 = setTimeout(() => {
     let randomIndex = Math.floor(Math.random() * sprayArray.length);
     sprayArray[randomIndex].value = true;
@@ -210,7 +220,7 @@ const spray=()=> {
       }
     }, 100);
   }, 500);
-}
+};
 
 //预加载
 const preload_info = [
@@ -260,7 +270,6 @@ const sprayOk = {
   lifeMax: 800,
   accelerateX: 0,
   accelerateY: 0,
-  addNumSpeed: 0.001,
   enableFade: false,
   enableShrink: true,
 };
@@ -278,7 +287,6 @@ const sprayOk1 = {
   lifeMax: 2000,
   accelerateX: 0,
   accelerateY: -40,
-  addNumSpeed: 0.001,
   enableFade: false,
   enableShrink: false,
 };
@@ -295,50 +303,50 @@ let ImgData4;
 let ImgData5;
 const allGroup = [group1, group2, group3, group4, group5];
 //随机烟花颜色设定
-  const remainingGroups = [...allGroup];
-  for (let i = 1; i <= 5; i++) {
-    const randomIndex = Math.floor(Math.random() * remainingGroups.length);
-    const selectedGroup = remainingGroups[randomIndex];
-    switch(i) {
-      case 1:
-        ImgData1 = selectedGroup;
-        break;
-      case 2:
-        ImgData2 = selectedGroup;
-        break;
-      case 3:
-        ImgData3 = selectedGroup;
-        break;
-      case 4:
-        ImgData4 = selectedGroup;
-        break;
-      case 5:
-        ImgData5 = selectedGroup;
-        break;
-    }
-    
-    remainingGroups.splice(randomIndex, 1);
+const remainingGroups = [...allGroup];
+for (let i = 1; i <= 5; i++) {
+  const randomIndex = Math.floor(Math.random() * remainingGroups.length);
+  const selectedGroup = remainingGroups[randomIndex];
+  switch (i) {
+    case 1:
+      ImgData1 = selectedGroup;
+      break;
+    case 2:
+      ImgData2 = selectedGroup;
+      break;
+    case 3:
+      ImgData3 = selectedGroup;
+      break;
+    case 4:
+      ImgData4 = selectedGroup;
+      break;
+    case 5:
+      ImgData5 = selectedGroup;
+      break;
   }
 
+  remainingGroups.splice(randomIndex, 1);
+}
+
 watch(readyNum, (n, o) => {
   if (o != 2 && n == 2) {
     myShow.value = true;
     timer.id2 = setTimeout(() => {
       myRef.value.start();
 
-      actorControl.run([
-        actorControl
+      actorControl.run((cmds) => [
+        cmds
           .condition()
           .onNextTick(2)
           .then([
-            actorControl.action().setSpeed(undefined, -9),
-            actorControl.action(3).setAccel(undefined, 0.13),
+            cmds.action().setSpeed(undefined, -9),
+            cmds.action(3).setAccel(undefined, 0.13),
           ]),
-        actorControl
+        cmds
           .condition()
           .reachPosition(undefined, -moveDistance)
           .then([
-            actorControl.action().stopMoving(),
+            cmds.action().stopMoving(),
             () => {
               isSpray.value = true;
               isShow.value = false;

package/CustomShader/App.vue

@@ -0,0 +1,174 @@
+<script setup>
+import { onMounted, onUnmounted, ref, computed } from "vue";
+import { JsvFragShaderView } from "jsview";
+import vortexShader from "./vortex.glsl?raw";
+import pageFlipShader from "./pageFlip.glsl?raw";
+import sdfShader from "./sdf.glsl?raw";
+import gaussianBlurShader from "./gaussianBlur.glsl?raw";
+// import testShader from "./test.glsl?raw";
+
+const ImageChinChilla =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
+const ImageLandscape = "https://oss.image.qcast.cn/ai-draw/landscape.jpeg";
+const ImagePanda = "https://oss.image.qcast.cn/ai-draw/panda.jpeg";
+const ImageOwl = "https://oss.image.qcast.cn/ai-draw/owl.jpeg";
+
+const cShaderSettings = [
+  {
+    name: "vortex",
+    shader: vortexShader,
+    uniforms: [],
+    textures: [
+      {
+        name: "iChannel0",
+        resource: ImageOwl,
+      },
+    ],
+    duration: 100000,
+  },
+  {
+    name: "pageFlip",
+    shader: pageFlipShader,
+    uniforms: [],
+    textures: [
+      {
+        name: "iChannel0",
+        resource: ImageOwl,
+      },
+    ],
+    duration: 500,
+    onEnd: (id, status) => {
+      if (status) {
+        // 动画正常结束，而非cancel打断
+        console.log("flip anim end");
+        rShowShaderView.value = false;
+      } else {
+        console.log("flip anim cancel");
+      }
+    },
+  },
+  {
+    name: "sdf",
+    shader: sdfShader,
+    uniforms: [],
+    textures: [
+      {
+        name: "iChannel0",
+        resource: ImageOwl,
+      },
+    ],
+    duration: 100000,
+  },
+  // 高斯模糊性能太差，先不做推广
+  {
+    name: "gaussianBlur",
+    shader: gaussianBlurShader,
+    uniforms: [],
+    textures: [
+      {
+        name: "iChannel0",
+        resource: ImageOwl,
+      },
+    ],
+    duration: 0,
+  },
+];
+
+const rShowShaderView = ref(true);
+const rKeyCount = ref(0);
+const rShaderInfo = computed(() => {
+  return cShaderSettings[rKeyCount.value];
+});
+
+const rAutoplay = computed(() => {
+  return true;
+});
+
+const rWidgetRef = ref();
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37: {
+      rShowShaderView.value = true;
+      rKeyCount.value =
+        rKeyCount.value > 0 ? rKeyCount.value - 1 : rKeyCount.value;
+      return true;
+    }
+    case 39: {
+      rShowShaderView.value = true;
+      rKeyCount.value =
+        rKeyCount.value < cShaderSettings.length - 1
+          ? rKeyCount.value + 1
+          : rKeyCount.value;
+      return true;
+    }
+    case 13: {
+      rShowShaderView.value = true;
+      rWidgetRef.value?.startAnim();
+      return true;
+    }
+    default:
+      return false;
+  }
+};
+
+onMounted(() => {
+  window.JsView?.enableFpsDisplay(true);
+});
+
+onUnmounted(() => {
+  window.JsView?.enableFpsDisplay(false);
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundImage: `url(${ImageChinChilla})`,
+    }"
+  ></jsv-focus-block>
+
+  <jsv-frag-shader-view
+    v-if="rShowShaderView"
+    :key="rKeyCount"
+    ref="rWidgetRef"
+    :style="{ left: 0, top: 0, width: 1280, height: 720 }"
+    :duration="rShaderInfo.duration"
+    :shaderStr="rShaderInfo.shader"
+    :autoplay="rAutoplay"
+    :textures="rShaderInfo.textures"
+    :onEnd="rShaderInfo.onEnd"
+  ></jsv-frag-shader-view>
+  <div
+    :key="rKeyCount"
+    :style="{
+      top: 100,
+      left: 20,
+      width: 500,
+      height: 50,
+      fontSize: 30,
+      backgroundColor: '#00000055',
+      color: '#ffffff',
+    }"
+  >
+    {{ rShaderInfo.name }}
+  </div>
+  <div
+    :style="{
+      top: 150,
+      left: 20,
+      width: 500,
+      height: 50,
+      fontSize: 30,
+      backgroundColor: '#00000055',
+      color: '#ffffff',
+    }"
+  >
+    左右键切换效果, OK键重新播放
+  </div>
+</template>

package/CustomShader/gaussianBlur.glsl

@@ -0,0 +1,27 @@
+const int samples = 35, LOD = 2,         // gaussian done on MIPmap at scale LOD
+sLOD = 4; // tile size = 2^LOD
+const float sigma = float(samples) * .25;
+
+float gaussian(vec2 i) {
+  return exp(-.5 * dot(i /= sigma, i)) / (6.28 * sigma * sigma);
+}
+
+int myMod(int a, int b) {
+  return a - b * int(floor(float(a) / float(b)));
+}
+
+vec4 blur(sampler2D sp, vec2 U, vec2 scale) {
+  vec4 O = vec4(0);
+  int s = samples / sLOD;
+
+  for(int i = 0; i < s * s; i++) {
+    vec2 d = vec2(myMod(i, s), i / s) * float(sLOD) - float(samples) / 2.;
+    O += gaussian(d) * jsvTexture2D(sp, U + scale * d);
+  }
+
+  return O / O.a;
+}
+
+void mainImage(out vec4 O, vec2 U) {
+  O = blur(iChannel0, U / iResolution.xy, 1. / iResolution.xy);
+}

package/CustomShader/pageFlip.glsl

@@ -0,0 +1,41 @@
+//https://andrewhungblog.wordpress.com/2018/04/29/page-curl-shader-breakdown/
+#define pi 3.14159265359
+#define radius .1
+
+float fastAsin(float x) {
+  float x2 = x * x;
+  float x3 = x2 * x;
+  float x5 = x3 * x2;
+  float x7 = x5 * x2;
+  return x + (1.0 / 6.0) * x3 + (3.0 / 40.0) * x5 + (5.0 / 112.0) * x7;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 aspect = iResolution.xy / iResolution.y;
+  vec2 uv = fragCoord * aspect / iResolution.xy;
+  vec2 anchor = aspect;
+  vec2 mouse = anchor - abs(iTime / iDuration) * anchor;
+  vec2 mouseDir = normalize(anchor - mouse);
+  vec2 origin = mouse - mouseDir * mouse.x / abs(mouseDir.x);
+  float mouseDist = length(mouse - origin);
+
+  float proj = dot(uv - origin, mouseDir);
+  float dist = proj - mouseDist;
+  vec2 linePoint = uv - dist * mouseDir;
+  if(dist > radius) {
+    fragColor = vec4(0.0, 0.0, 0.0, 0.0);
+    fragColor.rgb *= pow(clamp(dist - radius, 0., 1.) * 1.5, .2);
+  } else if(dist >= 0.) {
+    // map to cylinder point
+    float theta = fastAsin(dist / radius);
+    vec2 p2 = linePoint + mouseDir * (pi - theta) * radius;
+    vec2 p1 = linePoint + mouseDir * theta * radius;
+    uv = (p2.x <= aspect.x && p2.y <= aspect.y && p2.x > 0. && p2.y > 0.) ? p2 : p1;
+    fragColor = jsvTexture2D(iChannel0, uv / aspect);
+    fragColor.rgb *= pow(clamp((radius - dist) / radius, 0., 1.), .2);
+  } else {
+    vec2 p = linePoint + mouseDir * (abs(dist) + pi * radius);
+    uv = (p.x <= aspect.x && p.y <= aspect.y && p.x > 0. && p.y > 0.) ? p : uv;
+    fragColor = jsvTexture2D(iChannel0, uv / aspect);
+  }
+}

package/CustomShader/sdf.glsl

@@ -0,0 +1,22 @@
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    // Normalized pixel coordinates (from 0 to 1)
+  vec2 aspect = iResolution.xy / iResolution.y;
+  vec2 originUv = fragCoord / iResolution.xy;
+  vec2 uv = 2. * (originUv - 0.5) * aspect;
+
+  vec2 sum = vec2(0., 0.); // r, g
+
+  float modTime = iTime - (60. * floor(iTime / 60.));
+  float time = 50. * abs(fract(modTime / 30.) - .5);
+
+  for(int i = 10; i < 13; i++) {
+    vec2 pos = uv * 40. + vec2(sin(time / 3. * float(i) / 2.), cos(time / 3. * float(i) / 3.)) * 10. * (1.0 + float(i) / 10.);
+    float dist = 1. / length(pos) * 6.;
+    sum += dist;
+  }
+  sum *= 0.5;
+  // sum.x = clamp(sum.x, 0., 1.);
+  // sum.x = step(.5, sum.x);
+  // fragColor = vec4(.1, sum.x, sum.x, sum.x);
+  fragColor = sum.x > 0.5 ? jsvTexture2D(iChannel0, originUv) : vec4(0.);
+}

package/CustomShader/test.glsl

@@ -0,0 +1,8 @@
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  if (uv.x < .1 && uv.y < .1) {
+    fragColor = vec4(1.);
+  } else {
+    fragColor = vec4(0.);
+  }
+}

package/CustomShader/vortex.glsl

@@ -0,0 +1,38 @@
+#define RANGE 6.
+#define SPEED .5
+#define STRENGTH 6.
+
+mat2 rotate(float a) {
+  float s = sin(a);
+  float c = cos(a);
+  return mat2(c, -s, s, c);
+}
+
+void mainImage(out vec4 fragColor, vec2 coord) {
+  /** mediump精度10bit, 直接使用0-1的uv, 小值的normalize()会有精度问题, 导致异常大的结果; 但乘1920x1080又会有大值的问题, 所以选取16x9 */
+  vec2 aspect = (iResolution.xy / iResolution.y) * 9.;
+  vec2 center = 0.5 * aspect;
+
+  vec2 uv = coord / iResolution.xy * aspect;
+  uv -= center;
+
+  float d = length(uv);
+  float progress = sin(iTime * SPEED);
+
+    //vortex
+  float cTime = STRENGTH * progress;
+  d = smoothstep(0., RANGE, RANGE - d) * cTime;
+  uv *= rotate(d);
+
+    //shrink
+  float edge = aspect.y * abs(progress);
+  uv = uv + normalize(uv) * edge;
+
+  uv += center;
+  uv /= aspect;
+  if(uv.x > 1. || uv.y > 1. || uv.x < 0. || uv.y < 0.) {
+    fragColor = vec4(0.0, 0.5, 0.6, 1.);
+  } else {
+    fragColor = jsvTexture2D(iChannel0, uv);
+  }
+}