GLSL "No Matching Overloaded Function Found" ( Palette)

Question

What obvious thing am I missing? I'm trying to compile/run this vertex shader:

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
    vec2 uv0 = uv;
    vec3 finalColor = vec3(0.0);

    for (float i = 0.0; i < 4.0; i++) {
        uv = fract(uv * 1.5) - 0.5;

        float d = length(uv) * exp(-length(uv0));

        vec3 col = palette(length(uv0) + i*.4 + iTime*.4);

        d = sin(d*8. + iTime)/8.;
        d = abs(d);

        d = pow(0.01 / d, 1.2);

        finalColor += col * d;
       }

       fragColor = vec4(finalColor, 1.0);    
    }

I get this error message

'palette' : no matching overloaded function found
'=' : dimension mismatch
'=' : cannot convert from 'const mediump float' to 'highp 3-component vector of float'

Thanks for your help.

I tried calling the function earlier in the script, but it didn't work. I'm still new to all this. thanks

Answer 1

...I'm trying to compile/run this vertex shader:...

Are you sure that is vertex shader?

Problem is, probably, in palette only, like you wrote. Try define palette function.

Look at this implementation:

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
    }
  }
</script>

<canvas class="webglHH"> </canvas>

<script type="module">
import * as THREE from "three";

const scene = new THREE.Scene();

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

const canvas = document.querySelector("canvas.webglHH");

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 3;

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.render(scene, camera);

const vertexShader = `
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;

const fragmentShader = `
uniform vec3 iResolution;
uniform float iTime;

  vec3 palette(float t) {
      return vec3(0.5 + 0.5 * cos(0.0 + t), 
                  0.5 + 0.5 * cos(0.5 + t), 
                  0.5 + 0.5 * cos(1.0 + t));
  }

  void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
      vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
      vec2 uv0 = uv;
      vec3 finalColor = vec3(0.0);

      for (float i = 0.0; i < 4.0; i++) {
          uv = fract(uv * 1.5) - 0.5;

          float d = length(uv) * exp(-length(uv0));

          vec3 col = palette(length(uv0) + i * 0.4 + iTime * 0.4);

          d = sin(d * 8.0 + iTime) / 8.0;
          d = abs(d);

          d = pow(0.01 / d, 1.2);

          finalColor += col * d;
      }

      fragColor = vec4(finalColor, 1.0);    
  }

  void main() {
      mainImage(gl_FragColor, gl_FragCoord.xy);
  }
`;

const material = new THREE.ShaderMaterial({
  uniforms: {
    iTime: { value: 0.0 },
    iResolution: { value: new THREE.Vector2() },
  },
  vertexShader,
  fragmentShader,
});

const geometry = new THREE.PlaneGeometry(3, 3);
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

function windowResize() {
  const newResolution = new THREE.Vector2(
    window.innerWidth,
    window.innerHeight
  );
  material.uniforms.iResolution.value.copy(newResolution);
  renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
  requestAnimationFrame(animate);
  material.uniforms.iTime.value += 0.01;
  renderer.render(scene, camera);
}
windowResize();
animate();
</script>