body {

  padding: 0;

  margin: 0;

  width: 100vw;

  height: 100vh;

  overflow: hidden;

  background: black;

}

​

.container {

  box-sizing: border-box;

  position: absolute;

  transform: translate(-50%, -50%);

  top: 50%;

  left: 50%;

}

const CONFIG = {};

CONFIG.SCREEN_WIDTH = 960;

CONFIG.SCREEN_HEIGHT = CONFIG.SCREEN_WIDTH * (9 / 16);

​

class CustomRenderer extends AGL.BaseRenderer {

  constructor(options = {}) {

    options.config = AGL.Utils.initRendererConfig(options.config);

    options.config.locations = options.config.locations.concat([

      "uSize",

      "uOffset",

      "uIsHeightRender"

    ]);

​

    super(options);

​

    this.offsetX = this.offsetY = 0;

  }

​

  $render() {

    this.$uploadBuffers();

​

    this.context.setBlendMode(AGL.BlendMode.NORMAL);

​

    this.$gl.uniform1f(this.$locations.uIsHeightRender, this.isHeightRender);

    this.$gl.uniform2f(this.$locations.uOffset, this.offsetX, this.offsetY);

​

    this.$drawInstanced(1);

  }

​

  $esize() {

    super.$resize();

    this.$gl.uniform2f(this.$locations.uSize, this.width, this.height);

  }

​

  $createVertexShader(options) {

    return (

      "in vec2 aPos;" +

      "out vec2 vP;" +

      "void main(void){" +

      "gl_Position=vec4(aPos*2.-1.,1,1);" +

      "gl_Position.y*=-1.;" +

      "vP=gl_Position.xy;" +

      "}"

    );

  }

​

  $createFragmentShader(options) {

    return (

      "uniform vec2 " +

      "uSize," +

      "uOffset;" +

      "uniform float uIsHeightRender;" +

      "in vec2 vP;" +

      "out vec4 outColor;" +

      AGL.Utils.GLSL.RANDOM +

      "void main(void){" +

      "float p=rand(floor((vP+uOffset)/.02)*10.);" +

      "if(uIsHeightRender<1.){" +

      "outColor=vec4(vec3(p>.5&&p<.51?.2:0.),1);" +

      "}else{" +

      "outColor=vec4(0,p>.5&&p<.51?1.:0.,0,1);" +

      "}" +

      "}"

    );

  }

}

​

class Application {

  constructor() {

    this._stageContainer = document.querySelector(".container");

​

    this._step = 0;

​

    this._heightMapFramebuffer = new AGL.Framebuffer();

    this._customFramebuffer = new AGL.Framebuffer();

    this._stageFramebuffer = new AGL.Framebuffer();

    this._lightFramebuffer = new AGL.Framebuffer();

​

    this._context = new AGL.Context();

    this._stageContainer.appendChild(this._context.canvas);

​

    this._customRenderer = new CustomRenderer({

      config: {

        context: this._context

      }

    });

​

    this._stage2DRenderer = new AGL.Stage2D({

      config: {

        context: this._context

      }

    });

​

    this._lightRenderer = new AGL.LightRenderer({

      config: {

        context: this._context

      },

      heightMap: this._heightMapFramebuffer

    });

    this._stage2DRenderer.attachLightRenderer(this._lightRenderer);

​

    this._filterRenderer = new AGL.FilterRenderer({

      config: {

        context: this._context

      },

      sourceTexture: this._stageFramebuffer,

      filters: [new AGL.VignetteFilter(1, 4, 0.5, 0, 0, 0, 0)]

    });

​

    const customImage = new AGL.Image(this._customFramebuffer);

    customImage.transform.width = CONFIG.SCREEN_WIDTH;

    customImage.transform.height = CONFIG.SCREEN_HEIGHT;

    this._stage2DRenderer.container.addChild(customImage);

​

    const lightImage = new AGL.Image(this._lightFramebuffer);

    lightImage.transform.width = CONFIG.SCREEN_WIDTH;

    lightImage.transform.height = CONFIG.SCREEN_HEIGHT;

    this._stage2DRenderer.container.addChild(lightImage);

​

    var light = new AGL.Light();

    light.transform.width = CONFIG.SCREEN_WIDTH;

    light.transform.x = CONFIG.SCREEN_WIDTH * 0.3;

    light.transform.y = CONFIG.SCREEN_HEIGHT * 0.25;

    light.transform.z = 32;

    light.precision = 0;

    light.color.set(0.9, 0.5, 0.8, 1);

    this._stage2DRenderer.container.addChild(light);

    this._light = new AGL.Light();

    this._light.transform.width = CONFIG.SCREEN_WIDTH * 0.75;

    this._light.transform.x = CONFIG.SCREEN_WIDTH * 0.75;

    this._light.transform.y = CONFIG.SCREEN_HEIGHT * 0.95;

    this._light.transform.z = 256;

    this._light.precision = 0;

    this._light.color.set(0.012, 0.608, 0.898, 1);

    this._stage2DRenderer.container.addChild(this._light);

    console.log(this._light);

​

    this._context.setCanvasSize(CONFIG.SCREEN_WIDTH, CONFIG.SCREEN_HEIGHT);

    this._customRenderer.setSize(CONFIG.SCREEN_WIDTH, CONFIG.SCREEN_HEIGHT);

    this._lightRenderer.setSize(CONFIG.SCREEN_WIDTH, CONFIG.SCREEN_HEIGHT);

    this._stage2DRenderer.setSize(CONFIG.SCREEN_WIDTH, CONFIG.SCREEN_HEIGHT);

    this._filterRenderer.setSize(CONFIG.SCREEN_WIDTH, CONFIG.SCREEN_HEIGHT);

​

    this._render = this._render.bind(this);

    this._render();

  }

​

  _render() {

    this._step += 0.002;

​

    this._customRenderer.offsetX = -this._step;

    this._customRenderer.offsetY = this._step;

​

    this._customRenderer.isHeightRender = true;

    this._customRenderer.renderToFramebuffer(this._heightMapFramebuffer);

​

    this._lightRenderer.renderToFramebuffer(this._lightFramebuffer);

​

    this._customRenderer.isHeightRender = false;

    this._customRenderer.renderToFramebuffer(this._customFramebuffer);

​

    this._stage2DRenderer.renderToFramebuffer(this._stageFramebuffer);

​

    this._filterRenderer.render();

​

    requestAnimationFrame(this._render);

  }

}

​

console.clear();

AGL.Utils.initApplication(function (isWebGl2Supported) {

  if (!isWebGl2Supported) return;

​

  new Application();

});

​