如何在Three.js中使用ShaderToy的着色器？

Question

我想在我的 Three.js 项目中使用 ShaderToy 的这个着色器，但我无法让它工作。

你能帮我转换一些值并设置fragmentShader、vertexShader和uniform吗？

我已经尝试过转换一些值，但没有成功。

Answer 1

我认为有些人不喜欢这类问题。可能是因为他们自己在实现上遇到了困难，现在你也必须在困难中......我的观点略有不同，我必须在着色器等的实现上遇到困难，但这并不意味着其他人也必须受苦...... 。 但是无所谓。事实上，如果 Inigo Quilez 也这么想，他就不会发布他的代码。 然而，另一方面，如果您尝试“复制并粘贴”别人的代码并将其视为您自己的代码，或者更糟糕的是，将其按书面形式呈现给潜在客户，那么您将无法利用此逻辑做太多事情由你（不要误会我的意思，我并不是说你这样做，这只是一个一般假设）。这种逻辑是非常短视的，尤其是在论坛上通常都是同一个人的环境（3D、webgl、3等）中。其次，通常这些作品，无论是在 ShaderToy 还是其他此类平台上，都很难或往往不可能在现实生活中的最终客户端项目中实现。它们太贵了，甚至对于台式机来说也是如此。

<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 = `
// Created by inigo quilez - iq/2013 : https://www.shadertoy.com/view/4dl3zn
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
// Messed up by Weyland

uniform vec2 iResolution;
uniform float iTime;

void main() {
  vec2 uv = -1.0 + 2.0 * gl_FragCoord.xy / iResolution.xy;
  uv.x *= iResolution.x / iResolution.y;
  vec3 color = vec3(0.0);
  
  for (int i = 0; i < 128; i++) {
      float pha = sin(float(i) * 546.13 + 1.0) * 0.5 + 0.5;
      float siz = pow(sin(float(i) * 651.74 + 5.0) * 0.5 + 0.5, 4.0);
      float pox = sin(float(i) * 321.55 + 4.1) * iResolution.x / iResolution.y;
      float rad = 0.1 + 0.5 * siz + sin(pha + siz) / 4.0;
      vec2 pos = vec2(pox + sin(iTime / 15. + pha + siz), -1.0 - rad + (2.0 + 2.0 * rad) * mod(pha + 0.3 * (iTime / 7.) * (0.2 + 0.8 * siz), 1.0));
      float dis = length(uv - pos);
      vec3 col = mix(vec3(0.194 * sin(iTime / 6.0) + 0.3, 0.2, 0.3 * pha), vec3(1.1 * sin(iTime / 9.0) + 0.3, 0.2 * pha, 0.4), 0.5 + 0.5 * sin(float(i)));
      float f = length(uv - pos) / rad;
      f = sqrt(clamp(1.0 + (sin((iTime) * siz) * 0.5) * f, 0.0, 1.0));
      color += col.zyx * (1.0 - smoothstep(rad * 0.15, rad, dis));
  }
  color *= sqrt(1.5 - 0.5 * length(uv));
  gl_FragColor = vec4(color, 1.0);
}
`;

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>