JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<div class="three" id="three">
</div>
<script type="importmap">
      {
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
			"three/": "https://unpkg.com/three/",
      "textures/": "https://unpkg.com/three/examples/textures/",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

.three{
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

import * as THREE from "three";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";

//renderer
const renderer = new THREE.WebGLRenderer({ alpha: true, antialiase: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("three").appendChild(renderer.domElement);

//scene
const scene = new THREE.Scene();
//camera
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;
camera.position.y = 2.5;
camera.position.x = 0.5;

//resize listener
window.addEventListener("resize", function() {
    let width = window.innerWidth;
    let height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
  });

//postprocessing
let postEffect = {
  uniforms: {
    tDiffuse: { value: null },
    tImage: { value: new THREE.TextureLoader().load('https://assets.codepen.io/6547170/SST-Neuron-442x252.jpeg') },
    uTime: { value: 0 },
    resolution: {
      value: new THREE.Vector2( window.innerWidth,window.innerHeight),
    },
    uMouse: { value: new THREE.Vector2(-100, -100) },
  },
  vertexShader: `
  varying vec2 vUv;
  varying vec2 pos;
  void main() {
  vUv = uv;
  pos = position.xy;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );
  }`,
  fragmentShader: `
    
    uniform sampler2D tDiffuse;
    uniform sampler2D tImage;
    uniform vec2 resolution;
    uniform vec2 uMouse;
    uniform float uTime;
    
    varying vec2 vUv;
    varying vec2 pos;

    #define AA 2.

    struct MetaBall{
      float r;
        vec2 pos;
        vec3 col;
    };

    vec4 BallSDF(MetaBall ball, vec2 uv){
        float dst = ball.r / length(uv - ball.pos);
        return vec4(ball.col * dst, dst);
    }

    vec3 renderMetaBall(vec2 uv){
   ...