composer-issue-demo-3

by ren_senage

HTML

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

<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;

void main() {
	vUv = uv;
	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;

uniform int uIndex;
uniform float uSeed;
uniform float uResolution;
uniform float uRes1;
uniform float uRes2;
uniform float uResMix;
uniform sampler2D uTexture;

varying vec2 vUv;

vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x) {
  return mod289((x * 34.0 + 1.0) * x);
}

vec4 taylorInvSqrt(vec4 r) {
  return 1.79284291400159 - 0.85373472095314 * r;
}

vec3 fade(vec3 t) {
  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
}

// Classic Perlin noise
float cnoise3(vec3 P) {
  vec3 Pi0 = floor(P); // Integer part for indexing
  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
  Pi0 = mod289(Pi0);
  Pi1 = mod289(Pi1);
  vec3 Pf0 = fract(P); // Fractional part for interpolation
  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
  vec4 iy = vec4(Pi0.yy, Pi1.yy);
  vec4 iz0 = Pi0.zzzz;
  vec4 iz1 = Pi1.zzzz;

  vec4 ixy = permute(permute(ix) + iy);
  vec4 ixy0 = permute(ixy + iz0);
  vec4 ixy1 = permute(ixy + iz1);

  vec4 gx0 = ixy0 * (1.0 / 7.0);
  vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
  gx0 = fract(gx0);
  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
  vec4 sz0 = step(gz0, vec4(0.0));
  gx0 -= sz0 * (step(0.0, gx0) - 0.5);
  gy0 -= sz0 * (step(0.0, gy0) - 0.5);

  vec4 gx1 = ixy1 * (1.0 / 7.0);
  vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
  gx1 = fract(gx1);
  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
  vec4 sz1 = step(gz1, vec4(0.0));
 ...

CSS

html, body {
  margin: 0;
  padding: 0;
}

JavaScript

import * as THREE from 'three';
import {
  EffectComposer
} from 'three/addons/postprocessing/EffectComposer.js';
import {
  RenderPass
} from 'three/addons/postprocessing/RenderPass.js';
import {
  OutputPass
} from 'three/addons/postprocessing/OutputPass.js';
import {
  FullScreenQuad,
  Pass
} from 'three/addons/postprocessing/Pass.js';
import {
  OrbitControls
} from 'three/addons/controls/OrbitControls.js';

const randomInt = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const randomFloat = (min, max) => {
  return Math.random() * (max - min) + min;
};

const toRGBAString = (color, opacity = 1.0) => {
  return `rgba(${Math.round(color.r * 255)},${Math.round(color.g * 255)},${Math.round(color.b * 255)},${opacity})`;
};

const toIntRGB = (c) => {
  return {
    r: Math.round(c.r * 255),
    g: Math.round(c.g * 255),
    b: Math.round(c.b * 255)
  };
};

const vertexShader = document.getElementById( 'vertexShader' ).textContent;
const fragmentShader = document.getElementById( 'fragmentShader' ).textContent;

class SphereCubeMap {
  constructor(resolution) {
    this.canvas = new OffscreenCanvas(resolution, resolution);
    this.canvas.width = resolution;
    this.canvas.height = resolution;
    this.context = this.canvas.getContext('webgl2');
    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      canvas: this.canvas,
      context: this.context || undefined
    });
    this.resolution = resolution;

    this.camera = new THREE.OrthographicCamera(
      -this.resolution / 2,
      this.resolution / 2,
      this.resolution / 2,
      -this.resolution / 2,
      -10,
      10
    );
    this.camera.position.z = 1;
    this.camera.updateProjectionMatrix();

    this.scene = new THREE.Scene();
    this.plane = new THREE.Mesh(
      new THREE.PlaneGeometry(this.resolution, this.resolution),
      new THREE.MeshBasicMaterial()
    );
    this.plane.matrixAutoUpdate = false;
    this.plane.position.z = -1;
   ...