vaporwave/Assets/Components/GradientShaderMaterialComponent.re.ts

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

export default class GradientShaderMaterialComponent extends RE.Component {
  fragmentShader = `uniform vec3 colorA; 
    uniform vec3 colorB; 
    uniform float meshHeight;
    varying vec3 vUv;
  
    void main() {
      float lerpValue = vUv.y / meshHeight;
      gl_FragColor = vec4(mix(colorA, colorB, lerpValue), 1.0);
    }`


  vertexShader = `varying vec3 vBC;
    varying vec3 vUv;  
      void main() {
        vUv = position; 
  
        vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * modelViewPosition; 
      }`

  shaderMaterial
  elapsed: number = 0
  awake() {
    this.shaderMaterial = new THREE.ShaderMaterial({
      extensions: {
        // needed for anti-alias smoothstep, aastep()
        derivatives: true
      },
      transparent: false,
      side: THREE.FrontSide,
      uniforms: {
        colorA: { type: 'vec3', value: new THREE.Color(0x0c1328) },
        colorB: { type: 'vec3', value: new THREE.Color(0x071647) },
        meshHeight: { type: 'float', value: 25.0}
      } as any,

      fragmentShader: this.fragmentShader,
      vertexShader: this.vertexShader,
    });

    
  }

  start() {
    if((this.object3d as any).material instanceof THREE.ShaderMaterial) {
      console.log("It's a shader")
    } else {
      console.log("no shader here")
    }
    (this.object3d as any).material = this.shaderMaterial
  }

  update() {
  }
}

RE.registerComponent(GradientShaderMaterialComponent);