javascript - ivec2 未在带有 gl 过渡的 webgl slider 上定义

Question

我使用的 webgl slider 使用不同的过渡效果，您也可以使用自己的过渡效果。使用的转换来自 https://gl-transitions.com/我想用的是这个: https://gl-transitions.com/editor/randomsquares

问题是我收到ivec2未定义错误...webgl 新手...

我已经设法实现其他效果，但我不明白如何处理 ivec2。它是一个数组吗？

const uniforms = {
    size: ivec2(10, 10),
    smoothness: 0.5
};

const shader = [
    'uniform ivec2 size; // = ivec2(10, 10)',
    'uniform float smoothness; // = 0.5',

    'float rand (vec2 co) {',
      'return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);',
    '}',

    'vec4 transition(vec2 p) {',
      'float r = rand(floor(vec2(size) * p));',
      'float m = smoothstep(0.0, -smoothness, r - (progress * (1.0 + smoothness)));',
      'return mix(getFromColor(p), getToColor(p), m);',
    '}'
].join( '\n' );
GLSlideshow.addShader( 'myShader', shader, uniforms );

loader.whenReady = function() {
    var slideshow = new GLSlideshow(
        [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ],
        {
            canvas: document.getElementById( 'myCanvas' ), // optional
            width: 1024,        // optional
            height: 576,        // optional
            duration: 5000,     // optional
            interval: 3000,     // optional
            effect: 'myShader'
        }
    );
}

Answer 1

[查看源码](查看源码)不支持ivec2。

此外，第二行 size: ivec2(10, 10) 来自某个库，或者是您编写的一些代码，与 WebGL 无关。 JavaScript 中不存在 ivec2 这样的东西。它与您正在使用的库或您自己的代码有关。

简单的解决方案，使用 size: [10, 10] 并将着色器中的每个 ivec2 更改为 vec2。

const uniforms = {
    size: [10, 10],
    smoothness: 0.5
};

const shader = `
    uniform vec2 size; // = vec2(10, 10)
    uniform float smoothness; // = 0.5

    float rand (vec2 co) {
      return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
    }

    vec4 transition(vec2 p) {
      float r = rand(floor(vec2(size) * p));
      float m = smoothstep(0.0, -smoothness, r - (progress * (1.0 + smoothness)));
      return mix(getFromColor(p), getToColor(p), m);
    }
`;
GLSlideshow.addShader( 'myShader', shader, uniforms );


// since we can't use images because gl-slideshow doesn't support CORS
// let's use canvases


    var slideshow = new GLSlideshow(
        [ 
          makeImage('A', 'red', 'cyan'),
          makeImage('B', 'green', 'magenta'),
          makeImage('C', 'blue', 'yellow'),
          makeImage('D', 'black', 'white'),
        ],
        {
            canvas: document.getElementById( 'myCanvas' ), // optional
            duration: 1000,     // optional
            interval: 2000,     // optional
            effect: 'myShader'
        }
    );
    
    
// ----------------------------

function makeImage(str, bg, fg) {
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.canvas.width = 128;
  ctx.canvas.height = 128;
  ctx.fillStyle = bg;
  ctx.fillRect(0, 0, 128, 128);
  ctx.fillStyle = fg;
  ctx.font = "bold 110px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(str, 64, 64);
  return ctx.canvas.toDataURL();  // gl-slideshow doesn't handle canvas so we need to make a data URL
}

<script src="http://unpkg.com/GLSlideshow@2.1.0/dist/gl-slideshow.js"></script>
<canvas id="myCanvas"></canvas>