时间戳

首页 > 解决方案 > ivec2 未在带有 gl 过渡的 webgl 滑块上定义

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

问题描述

我正在使用一个使用不同转换的 webgl 滑块，您也可以使用自己的转换。使用的过渡来自 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'
        }
    );
}

标签： javascript

解决方案

【看源码】（看源码）没有对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>

推荐阅读