Merge pull request #15 from crashmax-dev/webgl

feat: add `@twallpaper/webgl`

packages/twallpaper-webgl/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @twallpaper/webgl
+
+## 2.2.0
+
+### Minor Changes
+
+- feat: add webgl implementation

packages/twallpaper-webgl/README.md

@@ -0,0 +1,38 @@
+<br>
+<p align="center">
+  <a href="https://twallpaper.js.org">
+    <img height="220" src="https://twallpaper.js.org/utya.webp"/>
+    <br/>
+    <h1 align="center">TWallpaper</h1>
+  </a>
+</p>
+
+<p align="center">
+  <b>🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.</b>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@twallpaper/webgl">
+    <img alt="npm" src="https://img.shields.io/npm/v/@twallpaper/webgl">
+  </a>
+  <a href="https://www.npmjs.com/package/@twallpaper/webgl">
+    <img alt="npm" src="https://img.shields.io/npm/dt/@twallpaper/webgl?color=blue">
+  </a>
+  <a href="https://bundlephobia.com/package/@twallpaper/webgl@latest">
+    <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@twallpaper/webgl">
+  </a>
+</p>
+
+## Installation
+
+```sh
+npm install @twallpaper/webgl
+```
+
+```sh
+yarn add @twallpaper/webgl
+```
+
+```sh
+pnpm add @twallpaper/webgl
+```

packages/twallpaper-webgl/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@twallpaper/webgl",
+  "version": "2.2.0",
+  "description": "🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs.js",
+  "jsdelivr": "./dist/index.umd.js",
+  "unpkg": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/crashmax-dev/twallpaper.git"
+  },
+  "bugs": {
+    "url": "https://github.com/crashmax-dev/twallpaper/issues"
+  },
+  "homepage": "https://twallpaper.js.org",
+  "keywords": [
+    "react",
+    "multicolor",
+    "gradient",
+    "wallpaper",
+    "background",
+    "animation",
+    "telegram",
+    "canvas",
+    "webgl"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.4",
+    "vite": "^4.3.1"
+  }
+}

packages/twallpaper-webgl/src/distance.ts

@@ -0,0 +1,3 @@
+export function distance(a: number[], b: number[]): number {
+  return Math.sqrt((a[1] - b[1]) * (a[1] - b[1]))
+}

packages/twallpaper-webgl/src/fragment-shader.glsl

@@ -0,0 +1,37 @@
+precision highp float;
+
+uniform vec2 resolution;
+
+uniform vec3 color1;
+uniform vec3 color2;
+uniform vec3 color3;
+uniform vec3 color4;
+
+uniform vec2 color1Pos;
+uniform vec2 color2Pos;
+uniform vec2 color3Pos;
+uniform vec2 color4Pos;
+
+void main() {
+  vec2 position = gl_FragCoord.xy / resolution.xy;
+  position.y = 1.0 - position.y;
+
+  float dp1 = distance(position, color1Pos);
+  float dp2 = distance(position, color2Pos);
+  float dp3 = distance(position, color3Pos);
+  float dp4 = distance(position, color4Pos);
+  float minD = min(dp1, min(dp2, min(dp3, dp4)));
+  float p = 3.0;
+
+  dp1 = pow(1.0 - (dp1 - minD), p);
+  dp2 = pow(1.0 - (dp2 - minD), p);
+  dp3 = pow(1.0 - (dp3 - minD), p);
+  dp4 = pow(1.0 - (dp4 - minD), p);
+  float dpt = abs(dp1 + dp2 + dp3 + dp4);
+
+  gl_FragColor =
+    (vec4(color1 / 255.0, 1.0) * dp1 / dpt) +
+    (vec4(color2 / 255.0, 1.0) * dp2 / dpt) +
+    (vec4(color3 / 255.0, 1.0) * dp3 / dpt) +
+    (vec4(color4 / 255.0, 1.0) * dp4 / dpt);
+}

packages/twallpaper-webgl/src/hex-to-vec3.ts

@@ -0,0 +1,17 @@
+export type Vec3 = [r: number, g: number, b: number]
+
+export function hexToVec3(hex: string): Vec3 {
+  if (hex.startsWith('#')) {
+    hex = hex.slice(1)
+  }
+
+  const r = parseInt(hex.slice(0, 2), 16)
+  const g = parseInt(hex.slice(2, 4), 16)
+  const b = parseInt(hex.slice(4, 6), 16)
+
+  return [
+    r,
+    g,
+    b
+  ]
+}

packages/twallpaper-webgl/src/index.ts

@@ -0,0 +1,9 @@
+import { TWallpaperWebGL } from './twallpaper.js'
+
+export { hexToVec3 } from './hex-to-vec3.js'
+
+export type { TWallpaperWebGLOptions } from './twallpaper.js'
+export type { Vec3 } from './hex-to-vec3.js'
+
+export { TWallpaperWebGL }
+export default TWallpaperWebGL

packages/twallpaper-webgl/src/load-shaders.ts

@@ -0,0 +1,21 @@
+export function loadShaders(
+  gl: WebGLRenderingContext,
+  shaderSources: [vertexShader: string, fragmentShader: string]
+): readonly [WebGLShader, WebGLShader] {
+  const [vertexShader, fragmentShader] = shaderSources
+  return [
+    createShader(gl, vertexShader, gl.VERTEX_SHADER),
+    createShader(gl, fragmentShader, gl.FRAGMENT_SHADER)] as const
+}
+
+function createShader(
+  gl: WebGLRenderingContext,
+  shaderSource: string,
+  shaderType: number
+): WebGLShader {
+  const shader = gl.createShader(shaderType)!
+  gl.shaderSource(shader, shaderSource)
+  gl.compileShader(shader)
+  gl.getShaderParameter(shader, gl.COMPILE_STATUS)
+  return shader
+}

packages/twallpaper-webgl/src/style.css

@@ -0,0 +1,45 @@
+.tw-mask {
+  -webkit-mask: center repeat;
+  -webkit-mask-size: var(--tw-size) auto;
+  -webkit-mask-image: var(--tw-image);
+  opacity: var(--tw-opacity);
+}
+
+.tw-wrap {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: -1;
+  background-color: var(--tw-background-color);
+}
+
+.tw-canvas.tw-mask + .tw-pattern {
+  background-image: none;
+  opacity: initial;
+  filter: none;
+}
+
+.tw-canvas {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.tw-pattern {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  mix-blend-mode: soft-light;
+  background: center repeat;
+  background-size: var(--tw-size) auto;
+  background-image: var(--tw-image);
+  filter: blur(var(--tw-blur));
+  opacity: var(--tw-opacity);
+}