@razorpay/blade
Version:
The Design System that powers Razorpay
111 lines (107 loc) • 4.52 kB
JavaScript
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
import _createClass from '@babel/runtime/helpers/createClass';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { createProgram, setupFullscreenQuad } from '../RzpGlass/webgl-utils.js';
import { FLUID_GRADIENT_LOOP, fragmentShader } from './shader.js';
var vertexShader = /* glsl */"\n precision mediump float;\n attribute vec2 position;\n attribute vec2 uv;\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = vec4(position, 0, 1);\n }\n";
var FluidGradientMount = /*#__PURE__*/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);
_defineProperty(this, "gl", null);
_defineProperty(this, "program", null);
_defineProperty(this, "buffers", null);
_defineProperty(this, "rafId", null);
// Uniform locations
_defineProperty(this, "uTimeLoc", null);
_defineProperty(this, "uOriginLoc", null);
_defineProperty(this, "hasBeenDisposed", false);
_defineProperty(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 = "".concat(size, "px");
this.canvasElement.style.height = "".concat(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: /** Update the gradient origin in UV space without re-initialising WebGL. */
function setOrigin(origin) {
if (!this.gl || !this.uOriginLoc) return;
this.gl.uniform2f(this.uOriginLoc, origin[0], origin[1]);
}
/** Tear down the render loop, release all WebGL resources, and remove the canvas. */
}, {
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 || _this$gl$getExtension === void 0 || _this$gl$getExtension.loseContext();
}
if (this.parentElement.contains(this.canvasElement)) {
this.parentElement.removeChild(this.canvasElement);
}
}
}]);
}();
export { FluidGradientMount };
//# sourceMappingURL=FluidGradientMount.js.map