vaporwave/Assets/Components/VaporwaveSunShaderMaterialComponent.re.ts

import * as RE from 'rogue-engine'
import * as THREE from 'three'

export default class VaporwaveSunShaderMaterialComponent extends RE.Component {
  elapsed = 0
  uniforms : any = {}
  vertexShader = `#define GLSLIFY 1
  varying vec3 v_position;
  varying vec3 v_normal;
  varying vec2 v_Uv;
  
  void main() {
      // Save the varyings
      v_position = position;
      v_normal = normalize(normalMatrix * normal);
      v_Uv = uv;
  
      // Vertex shader output
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`
fragmentShader = `#define GLSLIFY 1
uniform float u_time;

varying vec3 v_position;
varying vec3 v_normal;
varying vec2 v_Uv;

void main() {
  float invertedUv = 1.0 - v_Uv.y;
  float yPos = 64.0 * (invertedUv * invertedUv * invertedUv);
  float delta = 2.0 * u_time;
    // Don't paint the pixels between the stripes
    if (cos(yPos + delta) > 0.0 && v_Uv.y < 0.6) {
        discard;
    }


      float lerpValue = v_Uv.y / 1.0;
      vec3 colorA = vec3(1., 1., 0);
      vec3 colorB = vec3(1.0, 0.0, 1.0);
      gl_FragColor = vec4(mix(colorB, colorA, lerpValue), 1.0);
}
`  
  awake() {
    this.initMaterial()
  }

  update() {
    this.elapsed += RE.Runtime.deltaTime

    this.uniforms.u_time.value = this.elapsed;
  }

  start() {
    this.initMaterial()
  }

  initMaterial() {
    this.elapsed = 0
    this.uniforms = {
			u_time : {
				type : "f",
				value : 0.0
			}
		};

    const material = (this.object3d as any).material as THREE.ShaderMaterial
    material.uniforms = this.uniforms
    material.vertexShader = this.vertexShader
    material.fragmentShader = this.fragmentShader
    material.extensions.derivatives = true
    material.side = THREE.FrontSide
    material.transparent = true
    material.needsUpdate = true
    material.uniformsNeedUpdate = true
  }
}

RE.registerComponent(VaporwaveSunShaderMaterialComponent);