@razorpay/blade/build/lib/native/components/Spark/RazorSenseGradient/FluidGradientMount.js

The Design System that powers Razorpay

import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
import _createClass from '@babel/runtime/helpers/createClass';
import { createProgram, setupFullscreenQuad } from '../RzpGlass/webgl-utils.js';
import { FLUID_GRADIENT_LOOP, fragmentShader } from './shader.js';

var vertexShader=`
  precision mediump float;
  attribute vec2 position;
  attribute vec2 uv;
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = vec4(position, 0, 1);
  }
`;var FluidGradientMount=function(){function FluidGradientMount(parentElement,size){var _this=this;var origin=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[0.5,0.5];_classCallCheck(this,FluidGradientMount);this.gl=null;this.program=null;this.buffers=null;this.rafId=null;this.uTimeLoc=null;this.uOriginLoc=null;this.hasBeenDisposed=false;this.render=function(t){if(_this.hasBeenDisposed||!_this.gl)return;_this.rafId=requestAnimationFrame(_this.render);_this.gl.uniform1f(_this.uTimeLoc,t*0.001%FLUID_GRADIENT_LOOP);_this.gl.drawArrays(_this.gl.TRIANGLES,0,6);};this.parentElement=parentElement;var dpr=Math.min(window.devicePixelRatio,2);var pixelSize=Math.round(size*dpr);this.canvasElement=document.createElement('canvas');this.canvasElement.width=pixelSize;this.canvasElement.height=pixelSize;this.canvasElement.style.display='block';this.canvasElement.style.width=`${size}px`;this.canvasElement.style.height=`${size}px`;parentElement.appendChild(this.canvasElement);var gl=this.canvasElement.getContext('webgl',{antialias:false,powerPreference:'high-performance',alpha:true});if(!gl){console.error('FluidGradientMount: WebGL not supported');return;}this.gl=gl;this.setup(gl,pixelSize,origin);this.rafId=requestAnimationFrame(this.render);}return _createClass(FluidGradientMount,[{key:"setup",value:function setup(gl,pixelSize,origin){var program=createProgram(gl,vertexShader,fragmentShader);if(!program)return;this.program=program;var buffers=setupFullscreenQuad(gl,program);if(!buffers){gl.deleteProgram(program);this.program=null;return;}this.buffers=buffers;gl.useProgram(program);gl.viewport(0,0,pixelSize,pixelSize);gl.disable(gl.DEPTH_TEST);this.uTimeLoc=gl.getUniformLocation(program,'uTime');this.uOriginLoc=gl.getUniformLocation(program,'uOrigin');var iResolutionLoc=gl.getUniformLocation(program,'iResolution');gl.uniform2f(iResolutionLoc,pixelSize,pixelSize);gl.uniform2f(this.uOriginLoc,origin[0],origin[1]);}},{key:"setOrigin",value:function setOrigin(origin){if(!this.gl||!this.uOriginLoc)return;this.gl.uniform2f(this.uOriginLoc,origin[0],origin[1]);}},{key:"dispose",value:function dispose(){this.hasBeenDisposed=true;if(this.rafId!==null){cancelAnimationFrame(this.rafId);this.rafId=null;}if(this.gl){var _this$gl$getExtension;if(this.program){this.gl.deleteProgram(this.program);this.program=null;}if(this.buffers){this.gl.deleteBuffer(this.buffers.positionBuffer);this.gl.deleteBuffer(this.buffers.uvBuffer);this.buffers=null;}(_this$gl$getExtension=this.gl.getExtension('WEBGL_lose_context'))==null?void 0:_this$gl$getExtension.loseContext();}if(this.parentElement.contains(this.canvasElement)){this.parentElement.removeChild(this.canvasElement);}}}]);}();

export { FluidGradientMount };
//# sourceMappingURL=FluidGradientMount.js.map