added initial version

schiller-manuel · schiller-manuel · commit 64cbe413ef6b · 2020-05-22T14:27:02.000+02:00
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,6 @@
+node_modules/
+dist/
+lib/
+
+.expo/
+.vscode/
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,36 @@
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true
+        }
+    },
+    settings: {
+        react: {
+            version: 'detect'
+        },
+        'import/parsers': {
+            '@typescript-eslint/parser': ['.ts', '.tsx']
+        },
+        'import/resolver': {
+            typescript: {
+                alwaysTryTypes: true
+            }
+        }
+    },
+    extends: [
+        'plugin:react/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'prettier/@typescript-eslint',
+        'plugin:import/errors',
+        'plugin:import/warnings',
+        'plugin:import/typescript',
+        'plugin:prettier/recommended'
+    ],
+    rules: {
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        'import/order': ['error']
+    }
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+.vscode
+node_modules/
+/lib/
+.expo
+
+yarn-error.log
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+package.json
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+    semi: true,
+    trailingComma: "none",
+    singleQuote: true,
+    printWidth: 120,
+    tabWidth: 4,
+};
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,19 @@
+The MIT License (MIT)
+Copyright (c) 2020 Manuel Schiller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,37 @@
+# gl-react-blurhash ![](https://img.shields.io/npm/v/gl-react-blurhash.svg)
+
+Universal [`gl-react`](https://github.com/gre/gl-react) module that implements [BlurHash](https://github.com/woltapp/blurhash) in OpenGL.
+
+## Installation
+
+### Expo
+
+Add the following dependencies:
+
+```sh
+expo add gl-react gl-react-expo expo-gl buffer gl-react-blurhash
+```
+
+### React Native
+
+First setup [`react-native-unimodules`](https://github.com/unimodules/react-native-unimodules), then add the following dependencies:
+
+```sh
+yarn add gl-react gl-react-native buffer gl-react-blurhash
+```
+
+### Example
+
+```js
+import React from 'react';
+import { Surface } from 'gl-react-expo'; // 'gl-react-native' for React Native
+import { Blurhash } from 'gl-react-blurhash';
+
+export default function App {
+    return (
+        <Surface style={{ width: 300, height: 200 }}>
+            <Blurhash hash="LPKA$w{H_c05b{Nqwbx^grotMnNf" />
+        </Surface>
+    );
+}
+```
diff --git a/package.json b/package.json
@@ -0,0 +1,68 @@
+{
+  "name": "gl-react-blurhash",
+  "version": "1.0.0",
+  "description": "Universal gl-react module that implements BlurHash in OpenGL",
+  "license": "MIT",
+  "author": "Manuel Schiller",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/schiller-manuel/gl-react-blurhash.git"
+  },
+  "homepage": "https://github.com/schiller-manuel/gl-react-blurhash#readme",
+  "bugs": {
+    "url": "https://github.com/schiller-manuel/gl-react-blurhash/issues"
+  },
+  "keywords": [
+    "blurhash",
+    "gl-react"
+  ],
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "src",
+    "lib"
+  ],
+  "@react-native-community/bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "scripts": {
+    "lint": "eslint --ext '.js,.ts,.tsx' .",
+    "build": "bob build",
+    "clean": "del lib"
+  },
+  "dependencies": {
+    "blurhash": "^1.1.3"
+  },
+  "peerDependencies": {
+    "gl-react": "^4.0.1"
+  },
+  "devDependencies": {
+    "@react-native-community/bob": "^0.14.3",
+    "@types/gl-react": "^3.15.2",
+    "@types/react": "^16.9.34",
+    "@typescript-eslint/eslint-plugin": "^2.30.0",
+    "@typescript-eslint/parser": "^2.30.0",
+    "del-cli": "^3.0.1",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-typescript": "^2.0.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
+    "prettier": "^2.0.5",
+    "react": "^16.13.1",
+    "typescript": "^3.9.2"
+  }
+}
diff --git a/src/Blurhash.tsx b/src/Blurhash.tsx
@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/default
+import React from 'react';
+import { Node } from 'gl-react';
+import { BlurhashProps } from './BlurhashProps';
+import { decode } from './decode';
+import { getShader } from './getShader';
+
+export const Blurhash = (props: BlurhashProps) => {
+    const decoded = decode(props.hash, props.punch);
+    return (
+        <Node
+            shader={{
+                frag: getShader(decoded.numX, decoded.numY)
+            }}
+            uniforms={{
+                colors: decoded.colors
+            }}
+        />
+    );
+};
diff --git a/src/BlurhashProps.ts b/src/BlurhashProps.ts
@@ -0,0 +1,4 @@
+export interface BlurhashProps {
+    hash: string;
+    punch?: number;
+}
diff --git a/src/decode.ts b/src/decode.ts
@@ -0,0 +1,56 @@
+import { sRGBToLinear, signPow } from 'blurhash/dist/utils';
+import { decode83 } from 'blurhash/dist/base83';
+
+// the following code is copied/extracted from https://github.com/woltapp/blurhash/blob/master/TypeScript/src/decode.ts
+// license: MIT
+// Author: Olli Mahlamäki https://github.com/omahlama
+
+const decodeDC = (value: number) => {
+    const intR = value >> 16;
+    const intG = (value >> 8) & 255;
+    const intB = value & 255;
+    return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];
+};
+
+const decodeAC = (value: number, maximumValue: number) => {
+    const quantR = Math.floor(value / (19 * 19));
+    const quantG = Math.floor(value / 19) % 19;
+    const quantB = value % 19;
+
+    const rgb = [
+        signPow((quantR - 9) / 9, 2.0) * maximumValue,
+        signPow((quantG - 9) / 9, 2.0) * maximumValue,
+        signPow((quantB - 9) / 9, 2.0) * maximumValue
+    ];
+
+    return rgb;
+};
+
+export const decode = (blurhash: string, punch = 1) => {
+    const sizeFlag = decode83(blurhash[0]);
+
+    const numY = Math.floor(sizeFlag / 9) + 1;
+    const numX = (sizeFlag % 9) + 1;
+
+    const quantisedMaximumValue = decode83(blurhash[1]);
+    const maximumValue = (quantisedMaximumValue + 1) / 166;
+
+    const numColors = numX * numY;
+    const colors = new Array<number[]>(numX * numY);
+
+    for (let i = 0; i < numColors; i++) {
+        if (i === 0) {
+            const value = decode83(blurhash.substring(2, 6));
+            colors[i] = decodeDC(value);
+        } else {
+            const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));
+            colors[i] = decodeAC(value, maximumValue * punch);
+        }
+    }
+
+    return {
+        numX,
+        numY,
+        colors
+    };
+};
diff --git a/src/getShader.ts b/src/getShader.ts
@@ -0,0 +1,33 @@
+import { GLSL } from 'gl-react';
+
+export function getShader(numX: number, numY: number) {
+    return GLSL`
+    #define M_PI 3.1415926535897932384626433832795
+    
+    precision highp float;
+    varying vec2 uv;
+    uniform vec3 colors[${numX * numY}];
+  
+    const int numX = ${numX};
+    const int numY = ${numY};
+  
+    vec3 linearTosRGB(vec3 linear) {
+      vec3 upper = vec3(1.055) * pow(linear, vec3(1.0/2.4)) - vec3(0.055);
+      vec3 lower = linear * vec3(12.92);
+      bvec3 threshold = lessThan(linear, vec3(0.003131));
+      return lower * vec3(threshold) + upper * vec3(not(threshold));
+    }
+    
+    void main() {
+      vec3 linear = vec3(0);
+      for (int j = 0; j < numY; j++) {
+        for (int i = 0; i < numX; i++) {
+          float basis = cos(M_PI * uv.x * float(i)) * cos(M_PI * (1.0 - uv.y) * float(j));
+          vec3 color = colors[i + j * numX];
+          linear += color * basis;
+        }
+      }
+      gl_FragColor = vec4(linearTosRGB(linear), 1.0);
+    }
+  `;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,2 @@
+export { BlurhashProps } from './BlurhashProps';
+export { Blurhash } from './Blurhash';
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "composite": false,
+    "sourceMap": false,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext",
+    "outDir": "./lib/typescript"
+  },
+  "exclude": ["example"]
+}
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +node_modules/
 +dist/
 +lib/
++
 +.expo/
 +.vscode/