Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="world"></div>
<div id="info">
	Hold and drag left or right to view the opposite side.
</div>
              
            
!

CSS

              
                * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


body{
	background: #000;
}

#info{
	position: absolute;
	color: rgba(255, 255, 255, 0.46);
	width: 100%;
	text-align: center;
	z-index: 1;
	font-family: sans-serif;
	font-size: 23px;
	font-weight: 700;
	bottom: 2vh;
}
              
            
!

JS

              
                import { EffectComposer } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "https://unpkg.com/three@0.120.0/examples/jsm/postprocessing/UnrealBloomPass.js";
import { OBJLoader } from "https://unpkg.com/three@0.120.0/examples/jsm/loaders/OBJLoader";
import { OrbitControls } from "https://unpkg.com/three@0.120.0/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "https://unpkg.com/three@0.120.0/examples/jsm/loaders/GLTFLoader";
const streakimg = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/streak.webp";
const streakimg2 = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/streak2.webp";
const perlin = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/perlin.webp";
const straightnoise = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/straightnoise.webp";
const water = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/water.webp";
const pokeball = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/ball3.glb";
const pokelogo = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/log2.glb";
const charmodel = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/char8.glb";
const rocks = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/rocks12.glb";
const borderFront = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/fontborder.png";
const borderBack = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/border9.png";
const rampimg = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/ramp12.webp";
const rampimg2 = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/ramp11.webp";
const demo = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/demo5-min.png";
const color3 = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/color3.webp";
const lavamap = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/Lava/Lava_001_COLOR.webp";
const lavanormal = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/Lava/Lava_001_NRM.webp";
const lavadisplacement = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/Lava/Lava_001_DISP.webp";
const lavaocc = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/Lava/Lava_001_OCC.webp";
const lavaspec = "https://raw.githubusercontent.com/pizza3/asset/master/chaassets/Lava/Lava_001_SPEC.webp";

let scene, sceneRTT, camera, cameraRTT, renderer, controls, rocksmat;
const width = window.innerWidth,
  height = window.innerHeight;

var params = {
  exposure: 2.8,
  bloomStrength: 0.75,
  // bloomStrength: 0.68,
  color0: [245, 78, 660],
  bloomThreshold: 0.1,
  bloomRadius: 0.2,
};

const vert = `
varying vec2 vUv;
  
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;

const vertPos = `
varying vec2 vUv;
varying vec3 camPos;

void main() {
  vUv = uv;
  camPos = cameraPosition;
  vec4 worldPosition = modelViewMatrix * vec4( position, 1.0);
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;

const frag = `
varying vec2 vUv;
uniform sampler2D perlinnoise;
uniform sampler2D sparknoise;
uniform sampler2D straightnoise;
uniform sampler2D streaknoise;
uniform sampler2D waternoise;
uniform float time;
uniform vec3 color0;

vec2 UnityPolarCoordinates (vec2 UV, vec2 Center, float RadialScale, float LengthScale){
  //https://twitter.com/Cyanilux/status/1123950519133908995/photo/1
  vec2 delta = UV - Center;
  float radius = length(delta) * 2. * RadialScale;
  float angle = atan(delta.x, delta.y) * 1.0/6.28 * LengthScale;
  return vec2(radius, angle);
}

float setOpacity(float r, float g, float b, float tonethreshold) {
  float tone = (r + g + b) / 3.0;
  float alpha = 1.0;
  if(tone<tonethreshold) {
    alpha = 0.0;
  }
  return alpha;
}

vec3 rgbColor(float r, float g, float b){
  return vec3(r/255.,g/255.,b/255.);
}

void main(){

  // set polar coords
  vec2 center = vec2(0.5);
  vec2 cor = UnityPolarCoordinates(mod(vec2(vUv.x,vUv.y),1.), center, 1., 1.);

  // set textures
  vec2 newUv = vec2(cor.x + time, cor.y + cor.x/1.3)*2.;
  vec3 noisetex = texture2D(streaknoise,mod(newUv,1.)).rgb;    
  vec3 noisetex2 = texture2D(sparknoise,mod(newUv,1.)).rgb;   

  vec3 color = rgbColor(color0.r,color0.g,color0.b);

  gl_FragColor = vec4(vec3(color),noisetex.r);
  gl_FragColor *= vec4(smoothstep(0.45,1.,1. - distance(vUv,vec2(0.5))));

}

`;

const frag2 = `
varying vec2 vUv;
uniform sampler2D perlinnoise;
uniform sampler2D sparknoise;
uniform sampler2D straightnoise;
uniform sampler2D streaknoise;
uniform sampler2D waternoise;
uniform vec3 color0;

uniform float time;

vec2 UnityPolarCoordinates (vec2 UV, vec2 Center, float RadialScale, float LengthScale){
  //https://twitter.com/Cyanilux/status/1123950519133908995/photo/1
  vec2 delta = UV - Center;
  float radius = length(delta) * 2. * RadialScale;
  float angle = atan(delta.x, delta.y) * 1.0/6.28 * LengthScale;
  return vec2(radius, angle);
}

float setOpacity(float r, float g, float b, float tonethreshold) {
  float tone = (r + g + b) / 3.0;
  float alpha = 1.0;
  if(tone<tonethreshold) {
    alpha = 0.0;
  }
  return alpha;
}

vec3 rgbColor(float r, float g, float b){
  return vec3(r/255.,g/255.,b/255.);
}

void main(){

  // set polar coords
  vec2 center = vec2(0.5);
  vec2 cor = UnityPolarCoordinates(mod(vec2(vUv.x,vUv.y),1.), center, 1., 1.);

  // set textures
  vec2 newUv = vec2(cor.x + time/2., cor.y + cor.x)*3.;
  vec3 noisetex = texture2D(straightnoise,mod(newUv,1.)).rgb;    
  vec3 noisetex2 = texture2D(streaknoise,mod(newUv,1.)).rgb;   
  
  vec3 color = rgbColor(color0.r,color0.g,color0.b);

  gl_FragColor = vec4(noisetex.r)*0.7 + vec4(noisetex2.r)*0.3;
  gl_FragColor *= smoothstep(0.15,1.,1. - distance(vUv,vec2(0.5)));
}

`;

const frag3 = `
varying vec2 vUv;
uniform sampler2D perlinnoise;
uniform sampler2D sparknoise;
uniform sampler2D straightnoise;
uniform sampler2D streaknoise;
uniform sampler2D waternoise;
uniform float time;

vec2 UnityPolarCoordinates (vec2 UV, vec2 Center, float RadialScale, float LengthScale){
  //https://twitter.com/Cyanilux/status/1123950519133908995/photo/1
  vec2 delta = UV - Center;
  float radius = length(delta) * 2. * RadialScale;
  float angle = atan(delta.x, delta.y) * 1.0/6.28 * LengthScale;
  return vec2(radius, angle);
}

float setOpacity(float r, float g, float b, float tonethreshold) {
  float tone = (r + g + b) / 3.0;
  float alpha = 1.0;
  if(tone<tonethreshold) {
    alpha = 0.0;
  }
  return alpha;
}

vec3 rgb(float r,float g,float b){
  return vec3(r/255.,g/255.,b/255.);
}

void main(){

  // set polar coords
  vec2 center = vec2(0.5);
  vec2 cor = UnityPolarCoordinates(mod(vec2(vUv.x,vUv.y),1.), center, 1., 1.);

  // set textures
  vec2 newUv = vec2(cor.x + time/5., cor.y + cor.x*0.5)*3.;
  vec3 noisetex = texture2D(waternoise,mod(newUv,1.)).rgb;    
  vec3 noisetex2 = texture2D(sparknoise,mod(newUv,1.)).rgb;   
  
  // set textures tones
  float tone0 =  smoothstep(0.,0.6,noisetex.r);

  gl_FragColor = vec4(rgb(42.,72.,133.),tone0);
}

`;

const fraggroups = `
varying vec2 vUv;
uniform sampler2D perlinnoise;
uniform sampler2D sparknoise;
uniform sampler2D straightnoise;
uniform sampler2D streaknoise;
uniform sampler2D waternoise;
uniform float time;

vec2 UnityPolarCoordinates (vec2 UV, vec2 Center, float RadialScale, float LengthScale){
  //https://twitter.com/Cyanilux/status/1123950519133908995/photo/1
  vec2 delta = UV - Center;
  float radius = length(delta) * 2. * RadialScale;
  float angle = atan(delta.x, delta.y) * 1.0/6.28 * LengthScale;
  return vec2(radius, angle);
}

float setOpacity(float r, float g, float b, float tonethreshold) {
  float tone = (r + g + b) / 3.0;
  float alpha = 1.0;
  if(tone<tonethreshold) {
    alpha = 0.0;
  }
  return alpha;
}


void main(){

  // set polar coords
  vec2 center = vec2(0.5);
  vec2 cor = UnityPolarCoordinates(mod(vec2(vUv.x,vUv.y),1.), center, 1., 1.);

  // set textures
  vec2 newUv = vec2(cor.x + time, cor.y + cor.x/1.3)*3.;
  vec3 noisetex = texture2D(streaknoise,mod(newUv,1.)).rgb;    
  vec3 noisetex2 = texture2D(sparknoise,mod(newUv,1.)).rgb;   

  gl_FragColor = vec4(noisetex.r + 0.1);
  gl_FragColor *= vec4(smoothstep(0.4,1.,1. - distance(vUv,vec2(0.5))));
}
`;

const fireVert = `
varying vec2 vUv;
uniform sampler2D perlinnoise;
uniform float time;

void main() {
  vUv = uv;
  vec4 noisetex = texture2D(perlinnoise,mod(vec2(vUv.x*1. + vUv.y*4. + time*0.1,vUv.y*4. - time*1.),1.));   
  vec3 newpos = vec3(position);
  newpos.z = position.z + 1.3*noisetex.r*position.x/.15;
  newpos.x = position.x + 1.*noisetex.g*position.z/.15;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(newpos , 1.0);
}
`;

const fireFrag = `
varying vec2 vUv;
uniform sampler2D perlinnoise;
uniform sampler2D straightnoise;
uniform float time;

vec3 rgb(float r,float g,float b){
  return vec3(r/255.,g/255.,b/255.);
}

void main(){
  vec4 sparktex = texture2D(straightnoise,mod(vec2(vUv.x*1.,vUv.y*4. - time),1.));   
  vec4 noisetex = texture2D(perlinnoise,mod(vec2(vUv.x*1. +vUv.y*4. ,vUv.y*4. - time),1.));  
  vec3 primcolor = rgb(246., 255., 0.); 
  vec3 basecolor = rgb(222.,56.,0.);
  vec3 sparkcolor = rgb(255.,22.,22.);

  float tone0 =  1. - smoothstep(0.2,0.7,noisetex.r);
  float tone1 =  1. - smoothstep(0.1,1.3,noisetex.r);

  gl_FragColor = vec4(basecolor, .6);

  if(noisetex.r>=tone0){
    gl_FragColor = vec4(vec3(primcolor)*0.45, 1.);
  }
  if(noisetex.r>=tone1){
    gl_FragColor = vec4(vec3(sparkcolor),1.);
  }
}
`;

const backfrag = `
varying vec2 vUv;
uniform sampler2D perlinnoise;
uniform sampler2D ramp;
uniform sampler2D straightnoise;
uniform float time;
varying vec3 camPos;

void main(){
  vec4 noisetexoriginal = texture2D(perlinnoise,mod(vec2(vUv.x,vUv.y)*5.,1.));   
  vec4 noisetex1 = texture2D(perlinnoise,mod(vec2(vUv.x + time/20., vUv.y - time/40.)*5.,1.));   
  vec4 noisetex2 = texture2D(perlinnoise,mod(vec2(vUv.x, vUv.y + time/30.)*5.,1.));   
  vec4 animnoise = vec4(noisetex1/9. + noisetex2/9.);

  vec4 noisetexoriginaluv = texture2D(perlinnoise,mod(vec2(vUv.x + animnoise.r,vUv.y + animnoise.g)*5.,1.));   

  gl_FragColor = noisetexoriginaluv;
  gl_FragColor *= animnoise*2.;


  float tone = pow(dot(normalize(camPos), normalize(animnoise.rgb)), 1.);

  vec4 col = texture2D(ramp,mod(vec2(mod(gl_FragColor.r,1.),0.),1.))/2.23;   
  gl_FragColor = col;
  

}
`;

const vertPoint = `
    uniform vec2 mouse;
    uniform float time;
    varying vec2 vCoordinates;
    attribute vec3 aCoordinates;
    attribute float aDirection;
    attribute float aPress;
    uniform float height;
    varying vec2 vUv;

    vec3 random3(vec3 c) {
      float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
      vec3 r;
      r.z = fract(512.0*j);
      j *= .125;
      r.x = fract(512.0*j);
      j *= .125;
      r.y = fract(512.0*j);
      return r-0.5;
    }
    
    const float F3 =  0.3333333;
    const float G3 =  0.1666667;
    float snoise(vec3 p) {
    
      vec3 s = floor(p + dot(p, vec3(F3)));
      vec3 x = p - s + dot(s, vec3(G3));
       
      vec3 e = step(vec3(0.0), x - x.yzx);
      vec3 i1 = e*(1.0 - e.zxy);
      vec3 i2 = 1.0 - e.zxy*(1.0 - e);
         
      vec3 x1 = x - i1 + G3;
      vec3 x2 = x - i2 + 2.0*G3;
      vec3 x3 = x - 1.0 + 3.0*G3;
       
      vec4 w, d;
       
      w.x = dot(x, x);
      w.y = dot(x1, x1);
      w.z = dot(x2, x2);
      w.w = dot(x3, x3);
       
      w = max(0.6 - w, 0.0);
       
      d.x = dot(random3(s), x);
      d.y = dot(random3(s + i1), x1);
      d.z = dot(random3(s + i2), x2);
      d.w = dot(random3(s + 1.0), x3);
       
      w *= w;
      w *= w;
      d *= w;
       
      return dot(d, vec4(52.0));
    }
    
    

    vec3 snoiseVec3( vec3 x ){

      float s  = snoise(vec3( x ));
      float s1 = snoise(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));
      float s2 = snoise(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));
      vec3 c = vec3( s , s1 , s2 );
      return c;

    }


    vec3 curlNoise( vec3 p ){
      
      const float e = .1;
      vec3 dx = vec3( e   , 0.0 , 0.0 );
      vec3 dy = vec3( 0.0 , e   , 0.0 );
      vec3 dz = vec3( 0.0 , 0.0 , e   );

      vec3 p_x0 = snoiseVec3( p - dx );
      vec3 p_x1 = snoiseVec3( p + dx );
      vec3 p_y0 = snoiseVec3( p - dy );
      vec3 p_y1 = snoiseVec3( p + dy );
      vec3 p_z0 = snoiseVec3( p - dz );
      vec3 p_z1 = snoiseVec3( p + dz );

      float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
      float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
      float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;

      const float divisor = 1.0 / ( 2.0 * e );
      return normalize( vec3( x , y , z ) * divisor );

    }


    float map2(float value, float min1, float max1, float min2, float max2) {
      return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
    }


    void main() {
        vUv=uv;
        vec3 stable = position;
        vec3 stable2 = position;
        float dist = distance(stable.xy,vec2(0.,mouse.y));
        float area = 1. - smoothstep(0.,300.,dist);
        vec3 cn = curlNoise(position+0.0001*time)*100.*1.;
        stable.x -= 50.*sin(0.01*time*aPress)*1.*aDirection - cn.x;
        // stable.x = position.x + cn.x*aDirection;
        stable.y += 60.*sin(0.001*time*aPress)*1.*aDirection + cn.y;
        // stable.z += 100.*cos(0.01*time*aPress)*1.*aDirection + cn.z;

        vec3 cn2 = curlNoise(position+0.0001*time)*20.*1.;
        stable2.z = position.z + cn2.z  ;
        // stable2.x = position.x + mod(cn2/10.,1.).x ;
        stable2.y = position.y + 20.*aDirection*sin(0.001*time + stable2.y*20.) + cn2.y/10.   ;

        vec4 mvPosition = modelViewMatrix * vec4( vec3(stable2), 1.0 );
        /// still need to fix this
        float xr = map2(height, 150., 1201.,20.,60.);
        gl_PointSize = xr * (1. / -mvPosition.z);
        vCoordinates = aCoordinates.xy;
        gl_Position = projectionMatrix * mvPosition;
    }
`;

const fragPoint = `
   varying vec2 vUv;

    vec3 rgb(float r,float g,float b){
      return vec3(r/255.,g/255.,b/255.);
    }

    void main() {
      vec3 sparkcolor = rgb(255., 224., 0.);
      vec2 uv2 = vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y);
    

      gl_FragColor = vec4(sparkcolor,1.)*(distance(vec2(0.5),uv2));
      gl_FragColor = vec4(sparkcolor,vec4(1. - smoothstep(0.0,.30,distance(vec2(0.5),uv2))))/1.3;

    }
`;

const rttHeight = height * 2;
const rttWidth = (rttHeight * 2) / 3;

function init() {
  createScene();
  postProc();
  sceneLights();
  light();
  models();
  mesh();
  meshgroups();
  cardBack();
  cardFront();
  addFontCard();
  addPoints();
  onPositionChange();
  animate();
}

function createScene() {
  scene = new THREE.Scene();
  sceneRTT = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
  camera.position.set(0.0, 0.0, -2.5);

  cameraRTT = new THREE.PerspectiveCamera(75, rttWidth / rttHeight, 0.08, 1000);
  cameraRTT.position.set(0, 0, 1.5);

  renderer = new THREE.WebGLRenderer({ antialias: true, autoSize: true });
  renderer.setPixelRatio(2);
  renderer.setSize(width, height);
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.interpolateneMapping = THREE.ACESFilmicToneMapping;
  renderer.outputEncoding = THREE.sRGBEncoding;
  sceneRTT.background = new THREE.Color(0x111930);

  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableZoom = false;
  controls.addEventListener("change", onPositionChange);

  document.getElementById("world").appendChild(renderer.domElement);
}

const uniforms = {
  perlinnoise: {
    type: "t",
    value: new THREE.TextureLoader().load(perlin),
  },
  sparknoise: {
    type: "t",
    value: new THREE.TextureLoader().load(water),
  },
  straightnoise: {
    type: "t",
    value: new THREE.TextureLoader().load(straightnoise),
  },
  waternoise: {
    type: "t",
    value: new THREE.TextureLoader().load(water),
  },
  streaknoise: {
    type: "t",
    value: new THREE.TextureLoader().load(streakimg),
  },
  color0: {
    value: new THREE.Vector3(255, 255, 255),
  },
  time: {
    type: "f",
    value: 0.0,
  },
};
let bloomPass, bloomComposer, blurComposer, backcard, frontcard;
function postProc() {
  var renderScene = new RenderPass(sceneRTT, cameraRTT);

  bloomPass = new UnrealBloomPass(
    new THREE.Vector2(rttWidth, rttHeight),
    1.5,
    0.4,
    0.85
  );

  bloomPass.strength = params.bloomStrength;
  bloomPass.radius = params.bloomRadius;
  bloomPass.threshold = params.bloomThreshold;

  bloomComposer = new EffectComposer(renderer);
  bloomComposer.renderToScreen = false;
  bloomComposer.addPass(renderScene);
  bloomComposer.addPass(bloomPass);
}

function addFontCard() {
  const loader = new GLTFLoader();
  loader.load(charmodel, (gltf) => {
    gltf.scene.traverse(function (node) {
      if (node.isMesh) {
        node.castShadow = true;
      }
    });

    gltf.scene.scale.set(0.03, 0.03, 0.03);
    gltf.scene.position.set(-0.35, -1.7, -1.2);
    gltf.scene.rotation.set(0, Math.PI / 6, 0);

    parentGroupFront.add(gltf.scene);

    const geocyl = new THREE.CylinderBufferGeometry(
      0.0008,
      0.45,
      7,
      32,
      64,
      true
    );
    const mesh = new THREE.Mesh(geocyl, newMaterial5);
    mesh.rotation.set(Math.PI / 1.6, Math.PI / 4.5, Math.PI / 1.6);
    mesh.position.set(2.7, 2.3, 1.38);
    mesh.scale.set(1, 1, 1);
    parentGroupFront.add(mesh);

    const geosphere = new THREE.SphereBufferGeometry(10, 32, 32);
    const meshback = new THREE.Mesh(geosphere, newMaterial6);

    parentGroupFront.add(meshback);

    parentGroupFront.rotation.set(0, Math.PI, 0);
    parentGroupFront.scale.set(0.75, 0.75, 0.75);
  });

  loader.load(rocks, (gltf) => {
    rocksmat = new THREE.MeshStandardMaterial({
      color: 0x666666,
      map: new THREE.TextureLoader().load(lavamap),
      normalMap: new THREE.TextureLoader().load(lavanormal),
      normalScale: new THREE.Vector2(20, 20),
      aoMap: new THREE.TextureLoader().load(lavaocc),
      aoMapIntensity: 1,
      displacementMap: new THREE.TextureLoader().load(lavadisplacement),
      displacementScale: 0.1,
      lightMap: new THREE.TextureLoader().load(lavaspec),
      // metalness: 0.1,
      // lightMapIntensity: 0.01,
    });

    rocksmat.onBeforeCompile = (shader) => {
      shaderRockCtx = shader;
      shader.uniforms = {
        ...shader.uniforms,
        time: { type: "f", value: 0.0 },
      };

      shader.fragmentShader = `
        uniform float time; 
        float map2(float value, float min1, float max1, float min2, float max2) {
          return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
        }
    
      ${shader.fragmentShader}`;

      shader.fragmentShader = shader.fragmentShader.replace(
        "#include <dithering_fragment>",
        `
        #include <dithering_fragment>
        vec4 color = gl_FragColor;

        if(color.r>=0.3 && color.r!=color.g){
          gl_FragColor *= map2(sin(time/1.3),-1.,1.,0.7,1.9);
        }
        `
      );
    };

    gltf.scene.traverse(function (node) {
      if (node.isMesh) node.material = rocksmat;
    });

    gltf.scene.rotation.set(0, -Math.PI / 1.5, 0);
    gltf.scene.scale.set(1.2, 1.2, 1.2);
    gltf.scene.position.set(3, -4.85, -7);
    parentGroupFront.add(gltf.scene);
  });
}

function sceneLights() {
  const color = 0xffffff;
  const intensity = 0.02;
  const ambLight = new THREE.AmbientLight(color, intensity);
  scene.add(ambLight);

  dir3Light = new THREE.DirectionalLight(0x363636, 0.007);
  dir3Light.position.set(0, 0, -100);
  scene.add(dir3Light);
}

let ambLight, dir1Light, dir2Light, dir3Light, hemiLight;
function light() {
  const color = 0xffffff;
  const intensity = 1;
  ambLight = new THREE.AmbientLight(color, intensity);
  sceneRTT.add(ambLight);

  dir1Light = new THREE.DirectionalLight(0xffffff, 0.5);
  dir1Light.position.set(4, 2, 2).normalize();
  sceneRTT.add(dir1Light);

  dir2Light = new THREE.DirectionalLight(0xebd834, 0);
  dir2Light.position.set(-4, 2.3, -1).normalize();
  sceneRTT.add(dir2Light);

  hemiLight = new THREE.HemisphereLight(0x000000, 0xffffff, 0.94);
  sceneRTT.add(hemiLight);
}

const newMaterial = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vert,
  fragmentShader: frag,
  side: THREE.DoubleSide,
  transparent: true,
  depthWrite: false,
});

const newMaterial2 = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vert,
  fragmentShader: frag2,
  side: THREE.DoubleSide,
  transparent: true,
  depthWrite: false,
});

const newMaterial3 = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vert,
  fragmentShader: frag3,
  side: THREE.BackSide,
  transparent: true,
  depthWrite: false,
});

const newMaterial4 = new THREE.ShaderMaterial({
  uniforms: {
    ...uniforms,
    streaknoise: {
      type: "t",
      value: new THREE.TextureLoader().load(streakimg2),
    },
    color0: {
      value: new THREE.Vector3(0, 83, 244),
    },
  },
  vertexShader: vert,
  fragmentShader: frag,
  side: THREE.BackSide,
  transparent: true,
  depthWrite: false,
});

const newMaterial5 = new THREE.ShaderMaterial({
  uniforms: {
    ...uniforms,
  },
  vertexShader: fireVert,
  fragmentShader: fireFrag,
  // side: THREE.DoubleSide,
  transparent: true,
  // depthWrite: false,
});

const newMaterial6 = new THREE.ShaderMaterial({
  uniforms: {
    ...uniforms,
    ramp: {
      type: "t",
      value: new THREE.TextureLoader().load(rampimg2),
    },
  },
  vertexShader: vertPos,
  fragmentShader: backfrag,
  side: THREE.BackSide,
  // transparent: true,
  // depthWrite: false,
});

const ballGroup = new THREE.Group();
let parentGroupBack = new THREE.Group();
let parentGroupFront = new THREE.Group();

function models() {
  const gloader = new GLTFLoader();
  gloader.load(pokeball, function (result) {
    result.scene.scale.set(0.27, 0.28, 0.28);
    result.scene.rotation.set(-Math.PI / 8, 0, 0);
    result.scene.position.set(-0.01, -0.02, -0.15);
    ballGroup.add(result.scene);
  });

  gloader.load(pokelogo, (gltf) => {
    let obj = new THREE.Object3D();
    obj.add(gltf.scene);
    obj.position.set(-0.13, 0.3, -0.3);
    obj.scale.set(0.23, 0.23, 0.23);
    parentGroupBack.add(obj);

    let obj2 = new THREE.Object3D();
    obj2.add(obj.clone());
    obj2.rotation.set(0, 0, Math.PI);
    parentGroupBack.add(obj2);
  });
}
function mesh() {
  const geometry = new THREE.SphereBufferGeometry(
    1,
    30,
    30,
    Math.PI / 2,
    Math.PI
  );
  const fullgeometry = new THREE.SphereBufferGeometry(1, 30, 30);

  const mesh3 = new THREE.Mesh(fullgeometry, newMaterial3);
  mesh3.scale.set(1.1, 2.3, 1.3);
  mesh3.position.set(0, 0, -0.1);
  mesh3.rotation.set(0, Math.PI / 2, 0);
  parentGroupBack.add(mesh3);

  const mesh4 = new THREE.Mesh(fullgeometry, newMaterial4);
  mesh4.scale.set(1.8, 3.3, 1.3);
  mesh4.position.set(0, 0, -0.4);
  mesh4.rotation.set(0, Math.PI / 2, 0);
  parentGroupBack.add(mesh4);

  const mesh2 = new THREE.Mesh(geometry, newMaterial2);
  mesh2.scale.set(0.9, 1.2, 1.41);
  mesh2.position.set(0, 0, 0.1);
  mesh2.rotation.set(0, Math.PI / 2, 0);
  parentGroupBack.add(mesh2);

  const mesh = new THREE.Mesh(geometry, newMaterial);
  mesh.scale.set(1.463, 2.7, 1.1);
  mesh.position.set(0, 0, 0.2);
  mesh.rotation.set(0, Math.PI / 2, 0);
  parentGroupBack.add(mesh);
}

function meshgroups() {
  const geometry = new THREE.SphereBufferGeometry(
    0.4,
    30,
    30,
    Math.PI / 2,
    Math.PI
  );
  const newMaterialGroup = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: vert,
    fragmentShader: fraggroups,
    side: THREE.DoubleSide,
    transparent: true,
    depthWrite: false,
  });
  const mesh = new THREE.Mesh(geometry, newMaterialGroup);
  mesh.scale.set(1.6, 1.1, 1.3);
  mesh.position.set(-0.16, 0.21, -0.14);
  mesh.rotation.set(-Math.PI / 1.8, Math.PI / 3, 0);
  ballGroup.add(mesh);
  ballGroup.scale.set(1.84, 1.84, 1.84);
  ballGroup.rotation.set(Math.PI / 16, -Math.PI / 16, 0);
  parentGroupBack.add(ballGroup);
  sceneRTT.add(parentGroupBack);
}

let newfrontmaterial, newbackmaterial;

function cardBack() {
  const geometry = new THREE.PlaneBufferGeometry(2, 3);
  const rough = new THREE.TextureLoader().load(straightnoise);
  const uniforms = {
    renderBackTex: {
      type: "t",
      value: bloomComposer.readBuffer.texture,
    },
    btemplate: {
      type: "t",
      value: new THREE.TextureLoader().load(borderBack),
    },
    demoimg: {
      type: "t",
      value: new THREE.TextureLoader().load(demo),
    },
    screenWidth: {
      value: width,
    },
    resolution: {
      value: new THREE.Vector2(rttWidth, rttHeight),
    },
    backtexture: {
      type: "t",
      value: new THREE.TextureLoader().load(color3),
    },
    colorramp: {
      type: "t",
      value: new THREE.TextureLoader().load(rampimg),
    },
  };
  newbackmaterial = new THREE.MeshStandardMaterial({
    color: 0xfffffff,
    metalness: 1,
    roughness: 0.7,
    roughnessMap: rough,
    transparent: true,
  });
  newbackmaterial.onBeforeCompile = (shader) => {
    shaderCtx2 = shader;
    shader.uniforms = {
      ...shader.uniforms,
      ...uniforms,
    };

    shader.vertexShader = `
      varying vec2 vUv2;
      varying vec3 camPos;
    ${shader.vertexShader}
    `;

    shader.vertexShader = shader.vertexShader.replace(
      "#include <project_vertex>",
      `
      #include <project_vertex>
      vUv2 = uv;
      camPos = cameraPosition;
      vec4 worldPosition = modelViewMatrix * vec4( position, 1.0);
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);`
    );

    shader.fragmentShader = `
    
      varying vec2 vUv2;
      varying vec3 camPos;
      uniform sampler2D renderBackTex;
      uniform sampler2D btemplate;
      uniform vec4 resolution;
      uniform float screenWidth;
      uniform sampler2D frontimg;
      uniform sampler2D backtexture;
      uniform sampler2D colorramp;
      uniform sampler2D demoimg;

      vec3 rgb(float r,float g,float b){
        return vec3(r/255.,g/255.,b/255.);
      }
      
    ${shader.fragmentShader}
  `;

    shader.fragmentShader = shader.fragmentShader.replace(
      "#include <dithering_fragment>",
      `
      #include <dithering_fragment>

      vec4 originalG = gl_FragColor;
      vec2 uv = gl_FragCoord.xy/resolution.xy ;
      float centerXAxis = screenWidth/resolution.x;
      vec4 backTemplete = texture2D(btemplate,mod(vUv2,1.));    
      vec4 target = texture2D(renderBackTex,vec2(uv.x - centerXAxis + 0.5,uv.y));    

      vec4 frontimgtex = texture2D(btemplate,mod(vUv2,1.));   
      vec3 backtexturetex = texture2D(backtexture,mod(vUv2,1.)).rgb;   
      float tone = pow(dot(normalize(camPos), normalize(backtexturetex.rgb)), 1.);
      vec4 colortex = texture2D( colorramp, vec2(tone,0.));

      gl_FragColor = vec4(frontimgtex);
      vec4 col = vec4(0.);
      col = vec4(vec3(colortex),1.);
      col += vec4(sin((tone + vUv2.x + vUv2.y/10.)*10.))/8.;
      col += vec4(0.3);

      vec4 shine = vUv.y*smoothstep(0.1,0.101,vec4(0.48)*sin((-normalize(camPos).x + vUv.x*2. - vUv.y*.7)/3.))/10.;
      vec4 finaltex = vec4(frontimgtex);
      if(frontimgtex.r<=0.99 && frontimgtex.g<=0.99 && frontimgtex.b<=0.99){
        finaltex = vec4(1.);
      }
      gl_FragColor = frontimgtex;

      if(gl_FragColor.g==1. && (gl_FragColor.r <= 0.055 && gl_FragColor.r >= 0.05 )){
        gl_FragColor = vec4(0.);
      }

      if(gl_FragColor.r == 0.0 && gl_FragColor.g >= 0.00){
        // gl_FragColor = (vec4(target) + originalG/5.)*gl_FragColor.a;
        gl_FragColor = (vec4(target))*gl_FragColor.a;
        // gl_FragColor += shine;

      } else {
        gl_FragColor =  col - vec4(vec3( 1.4 - col.r),1.) + 0.2 + originalG;
        gl_FragColor.b = 0.8;
        gl_FragColor.g *= 0.45;
        gl_FragColor.r *= 0.38;
        gl_FragColor += shine/5.;
      }

    `
    );
  };
  backcard = new THREE.Mesh(geometry, newbackmaterial);
  scene.add(backcard);
}

let shaderCtx, shaderCtx2, shaderRockCtx;

function cardFront() {
  console.log(blurComposer);
  const uniforms = {
    renderBackTex: {
      type: "t",
      value: bloomComposer.readBuffer.texture,
    },
    btemplate: {
      type: "t",
      value: new THREE.TextureLoader().load(borderFront),
    },
    demoimg: {
      type: "t",
      value: new THREE.TextureLoader().load(demo),
    },
    screenWidth: {
      value: width,
    },
    resolution: {
      value: new THREE.Vector2(rttWidth, rttHeight),
    },
    backtexture: {
      type: "t",
      value: new THREE.TextureLoader().load(color3),
    },
    colorramp: {
      type: "t",
      value: new THREE.TextureLoader().load(rampimg),
    },
    time: {
      type: "f",
      value: 0.0,
    },
  };
  const geometry = new THREE.PlaneBufferGeometry(2, 3);
  const rough = new THREE.TextureLoader().load(straightnoise);
  newfrontmaterial = new THREE.MeshStandardMaterial({
    color: 0xfffffff,
    metalness: 1,
    roughness: 1.4,
    roughnessMap: rough,
    transparent: true,
  });
  newfrontmaterial.onBeforeCompile = (shader) => {
    shaderCtx = shader;
    shader.uniforms = {
      ...shader.uniforms,
      ...uniforms,
    };

    shader.vertexShader = `
        varying vec2 vUv2;
        varying vec3 camPos;
        // varying vec3 eyeVector;
      ${shader.vertexShader}
      `;

    shader.vertexShader = shader.vertexShader.replace(
      "#include <project_vertex>",
      `
        #include <project_vertex>
        vUv2 = uv;
        camPos = cameraPosition;
        vec4 worldPosition2 = modelViewMatrix * vec4( position, 1.0);
        // eyeVector = normalize(worldPosition2.xyz - abs(cameraPosition));
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);`
    );

    shader.fragmentShader = `
        varying vec2 vUv2;
        varying vec3 camPos;
        // varying vec3 eyeVector;
        uniform sampler2D renderBackTex;
        uniform sampler2D btemplate;
        uniform vec4 resolution;
        uniform float screenWidth;
        uniform sampler2D frontimg;
        uniform sampler2D backtexture;
        uniform sampler2D colorramp;
        uniform sampler2D demoimg;
        uniform float time;

      ${shader.fragmentShader}
    `;

    shader.fragmentShader = shader.fragmentShader.replace(
      "#include <dithering_fragment>",
      `
        #include <dithering_fragment>

        vec4 originalG = gl_FragColor;
        vec2 uv = gl_FragCoord.xy/resolution.xy ;
        vec4 demotex = texture2D(demoimg,mod(vUv2,1.));
        float centerXAxis = screenWidth/resolution.x;
        vec4 backTemplete = texture2D(btemplate,mod(vUv2,1.));

        float frequency = 100.0/(0.8 - vUv.y);
        float amplitude = 0.004;
        float distortion=sin(uv.y*frequency + time)*amplitude*(0.8 - vUv.y)*smoothstep(0.380,0.1,vUv.y);;

        vec4 target = texture2D(renderBackTex,vec2(uv.x - centerXAxis + distortion + 0.5,uv.y));

        gl_FragColor = vec4(backTemplete);
        if(backTemplete.r >= .05 ){
          gl_FragColor = vec4(target);
        }

        vec4 frontimgtex = texture2D(btemplate,mod(vUv2,1.));
        vec3 backtexturetex = texture2D(backtexture,mod(vec2(vUv2.x,vUv2.y*1.),1.)).rgb;
        float tone = pow(dot(normalize(camPos), normalize(backtexturetex.rgb)), 1.);
        vec4 colortex = texture2D( colorramp, vec2(mod(tone + 0.,1.),0.2));

        gl_FragColor = vec4(frontimgtex);
        vec4 col = vec4(0.);
        col = vec4(vec3(colortex),1.);
        col += vec4(sin((tone + vUv2.x + vUv2.y/10.)*10.))/8.;
        col += vec4(0.3);

        vec4 finaltex = vec4(frontimgtex);

        if(frontimgtex.r<=0.99 && frontimgtex.g<=0.1){
          finaltex = vec4(0.);
        }

        vec4 shine = vUv.y*smoothstep(0.1,0.101,vec4(0.48)*sin((normalize(camPos).x + vUv.x*2. - vUv.y*.7)/3.))/10.;
        if(finaltex.r>=0.01 && finaltex.g <=0.001){
          gl_FragColor = vec4(target) + originalG/5.;
          // gl_FragColor = vec4(target) + vec4(shine);
        } else {
          if(finaltex.r==0.&&finaltex.g==0.){
            // gl_FragColor = vec4(1.,1.,1.,finaltex.a) * (col - vec4(vec3( 1.4  - gl_FragColor.r),1.) + 0.2 + originalG);
            gl_FragColor = vec4(0.2,0.2,0.2,1.) * (col - vec4(vec3(0.2),1.)  + originalG);

          }else{
            gl_FragColor = vec4(1.,1.,1.,finaltex.a) * (col - vec4(vec3( 1.4  - gl_FragColor.r),1.) + 0.2 + originalG) + shine/5.;
          }
        }

        // display pokemon info
        if(demotex.a>=0.9){
          if(demotex.r>=0.5 && demotex.g>=0.5 && demotex.b>=0.5){
            gl_FragColor = (col - vec4(vec3( 1.6 - demotex.r),demotex.a) + 0.2 + originalG)*gl_FragColor.a ;
          }else{
            gl_FragColor = (col * demotex + originalG)*gl_FragColor.a ;
          }
        }

        `
    );
  };
  newfrontmaterial.anisotropy = 0;
  newfrontmaterial.magFilter = THREE.NearestFilter;
  newfrontmaterial.minFilter = THREE.NearestFilter;

  frontcard = new THREE.Mesh(geometry, newfrontmaterial);
  frontcard.rotation.set(0, Math.PI, 0);
  scene.add(frontcard);
}
let shadermat,
  positions,
  coordinates,
  direction,
  press,
  point = { x: 0, y: 0 };
function addPoints() {
  const s = 18;
  const number = s * s;

  const geometry = new THREE.BufferGeometry();
  positions = new THREE.BufferAttribute(new Float32Array(number * 3), 3);
  coordinates = new THREE.BufferAttribute(new Float32Array(number * 3), 3);
  direction = new THREE.BufferAttribute(new Float32Array(number), 1);
  press = new THREE.BufferAttribute(new Float32Array(number), 1);

  let index = 0;
  for (let i = 0; i < s; i++) {
    let posx = i - s * 0.5;
    for (let j = 0; j < s; j++) {
      let posy = j - s * 0.5;
      positions.setXYZ(index, posx * 1, posy * 1, 0);
      coordinates.setXYZ(index, i, j, 0);
      direction.setX(index, Math.random());
      press.setX(index, rand(0.4, 1));
      index++;
    }
  }

  geometry.setAttribute("position", positions);
  geometry.setAttribute("aCoordinates", coordinates);
  geometry.setAttribute("aDirection", direction);
  geometry.setAttribute("aPress", press);

  shadermat = new THREE.ShaderMaterial({
    vertexShader: vertPoint,
    fragmentShader: fragPoint,
    uniforms: {
      time: {
        type: "f",
        value: null,
      },
      height: {
        value: window.innerHeight,
      },
    },
    transparent: true,
    depthTest: false,
    depthWrite: false,
  });

  const pointmesh = new THREE.Points(geometry, shadermat);
  pointmesh.scale.set(0.14, 0.14, 0.14);
  pointmesh.rotation.set(0, Math.PI / 2, 0);
  pointmesh.position.set(0, 0, -1);
  parentGroupFront.add(pointmesh);
  sceneRTT.add(parentGroupFront);
}

function rand(a, b) {
  return a + (b - a) * Math.random();
}

let oldY = null;
function updateDraw(delta) {
  if (oldY !== -camera.rotation._y) {
    var matrix = new THREE.Matrix4();
    var matrix2 = new THREE.Matrix4();
    oldY = -camera.rotation._y;
    matrix.makeRotationY(camera.rotation._y);
    matrix2.makeRotationX(camera.rotation._x);

    cameraRTT.position.set(0, 0, 2);
    cameraRTT.position.applyMatrix4(matrix);
    cameraRTT.position.applyMatrix4(matrix2);
    cameraRTT.lookAt(parentGroupBack.position);
    cameraRTT.updateMatrixWorld();
  }
  var vector = new THREE.Vector3(0, 0, 0);
  var angleValue = camera.getWorldDirection(vector);
  bloomPass.strength = params.bloomStrength;
  bloomPass.radius = params.bloomRadius;

  const angle = THREE.Math.radToDeg(Math.atan2(angleValue.x, angleValue.z));
  if (angle >= 90 || angle <= -90) {
    // animate stuff inside parentGroupBack
    bloomPass.strength = 0.75;
    newMaterial.uniforms.time.value = -delta / (1000 * 2);
    newMaterial2.uniforms.time.value = -delta / (1000 * 2);
    newMaterial3.uniforms.time.value = -delta / (1000 * 2);
    ballGroup.position.set(0, 0.05 * Math.sin(-delta / 800), -0.4);
  } else {
    bloomPass.strength = 0.75;
    bloomPass.radius = 0;
    if (shaderCtx && shaderCtx.uniforms) {
      shaderCtx.uniforms.time.value = -delta / (50 * 2);
    }

    if (shaderRockCtx && shaderRockCtx.uniforms) {
      shaderRockCtx.uniforms.time.value = -delta / (50 * 2);
    }

    newMaterial5.uniforms.time.value = -delta / (1000 * 2);
    shadermat.uniforms.time.value = delta;
  }
}
var matrix = new THREE.Matrix4();
var period = 5;
var clock = new THREE.Clock();

function animate(delta) {
  requestAnimationFrame(animate);
  updateDraw(delta);
  controls.update();
  // matrix.makeRotationY(-(clock.getDelta() * 0.7 * Math.PI) / period);
  // camera.position.applyMatrix4(matrix);
  // camera.lookAt(frontcard.position);

  renderer.clear();
  bloomComposer.render();
  renderer.render(scene, camera);
}
let prevAngle = "";
function onPositionChange(o) {
  var vector = new THREE.Vector3(0, 0, 0);
  var angleValue = camera.getWorldDirection(vector);

  const angle = THREE.Math.radToDeg(Math.atan2(angleValue.x, angleValue.z));
  if (angle >= 90 || angle <= -90) {
    if (prevAngle !== "back") {
      handleResize()
			prevAngle = "back";
      ambLight.intensity = 1;
      dir1Light.intensity = 0.4;
      dir2Light.intensity = 0;
      dir3Light.position.set(0, 0, 1);
      sceneRTT.add(parentGroupBack);
      sceneRTT.remove(parentGroupFront);
      sceneRTT.remove(hemiLight);
      scene.add(backcard);
      scene.remove(frontcard);
    }
  } else if (angle < 90 || angle > -90) {
    if (prevAngle !== "front") {
      handleResize()
			prevAngle = "front";
      ambLight.intensity = 0.75;
      // dir1Light.intensity = 0.5;
      dir2Light.intensity = 0.1;
      dir3Light.position.set(0, 0, -1);
      sceneRTT.remove(parentGroupBack);
      sceneRTT.add(parentGroupFront);
      sceneRTT.add(hemiLight);
      scene.add(frontcard);
      scene.remove(backcard);
    }
  }
}

function handleResize() {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
	if(shaderCtx){
		  shaderCtx.uniforms.resolution.value = new THREE.Vector2(
    (window.innerHeight * 2 * 2) / 3,
    window.innerHeight * 2
  );
  shaderCtx.uniforms.screenWidth.value = window.innerWidth;
	}
	if(shaderCtx2){
		shaderCtx2.uniforms.resolution.value = new THREE.Vector2(
    (window.innerHeight * 2 * 2) / 3,
    window.innerHeight * 2
  );
  shaderCtx2.uniforms.screenWidth.value = window.innerWidth;


	}

}

window.addEventListener("load", init());
window.addEventListener("resize", handleResize);

              
            
!
999px

Console