webgl-lut-filter - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

package.json

 {
   "name": "webgl-lut-filter",
-  "version": "1.0.1",
-  "description": "",
+  "version": "1.1.0",
+  "description": "Use WebGL to render images based on LUT filter images",
+  "keywords": [
+    "webgl",
+    "lut",
+    "filter"
+  ],
   "main": "webgl-lut-filter.js",
+  "files": [
+    "webgl-lut-filter.js"
+  ],
   "scripts": {
     "start": "cross-env NODE_ENV=test rollup -c -w",
-    "build": "rollup -c"
+    "prepack": "rollup -c"
   },
@@ -14,3 +22,3 @@ "repository": {
   },
-  "author": "lijialiang",
+  "author": "[e-mail]",
   "license": "MIT",
@@ -25,2 +33,3 @@ "bugs": {
     "cross-env": "^5.2.0",
+    "rollup": "^2.51.1",
     "rollup-plugin-babel": "^4.3.3",
@@ -27,0 +36,0 @@ "rollup-plugin-banner": "^0.2.1",

README.md

@@ -1,16 +0,22 @@
-# webgl-lut-filter
+# webgl-lut-filter · [![npm version](https://img.shields.io/npm/v/webgl-lut-filter?style=flat)](https://www.npmjs.com/package/webgl-lut-filter)
 
-WebGL 根据 LUT 算法渲染图片
+Use WebGL to render images based on LUT filter images.
 
-## 安装
+[Playground](https://webgl-lut-filter.stackblitz.io/)
 
+### CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/webgl-lut-filter/webgl-lut-filter.js"></script>
+```
+
+### NPM
+
 ```sh
 $ npm i webgl-lut-filter
-
-# 或者
-
+# or
 $ yarn add webgl-lut-filter
 ```
 
-## 使用
+## How to use
 
@@ -21,9 +27,6 @@ ```js
 lutFilter({
-  // 需要描绘的 canvas html 对象
-  canvas: HTMLCanvasElement,
-  // 需要处理的图片 image html 对象
-  image: HTMLImageElement,
-  // 滤镜图片 image html 对象（滤镜图片最好先转为 base64 以防止轻易被获取图片资源）
-  filterImage: HTMLImageElement
+  canvas: <HTMLCanvasElement>,
+  image: <HTMLImageElement>,
+  filterImage: <HTMLImageElement>
 })
 ```

webgl-lut-filter.js

@@ -1,2 +0,2 @@
-// v1.0.1
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(e=e||self).lutFilter=r()}(this,function(){"use strict";var e={type:"x-shader/x-vertex",text:"\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\n\nuniform vec2 u_resolution;\nvarying vec2 v_texCoord;\n\nvoid main() {\n  vec2 zeroToOne = a_position / u_resolution;\n  vec2 zeroToTwo = zeroToOne * 2.0;\n  vec2 clipSpace = zeroToTwo - 1.0;\n  gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n  v_texCoord = a_texCoord;\n}\n"},r={type:"x-shader/x-fragment",text:"\nprecision mediump float;\n\nvarying lowp vec2 v_texCoord;\n\nuniform sampler2D u_image0;\nuniform sampler2D u_image1; // lookup texture\n\nvoid main()\n{\n  vec4 textureColor = texture2D(u_image0, v_texCoord);\n\n  float blueColor = textureColor.b * 63.0;\n\n  vec2 quad1;\n  quad1.y = floor(floor(blueColor) / 8.0);\n  quad1.x = floor(blueColor) - (quad1.y * 8.0);\n\n  vec2 quad2;\n  quad2.y = floor(ceil(blueColor) / 8.0);\n  quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n\n  vec2 texPos1;\n  texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n  texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);\n\n  vec2 texPos2;\n  texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n  texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);\n\n  lowp vec4 newColor1 = texture2D(u_image1, texPos1);\n  lowp vec4 newColor2 = texture2D(u_image1, texPos2);\n\n  lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n\n  gl_FragColor = mix(textureColor, vec4(newColor.rgb, textureColor.w), 1.0);\n}\n"};return function(t){var o=t.canvas,n=t.filterImage,a=t.image,i=o.getContext("webgl",{preserveDrawingBuffer:!0}),T=function(e,r){for(var t=[],o=0;o<r.length;++o){var n=r[o],a=n.type,i=n.text;"x-shader/x-vertex"===a?a=e.VERTEX_SHADER:"x-shader/x-fragment"===a&&(a=e.FRAGMENT_SHADER);var T=e.createShader(a);e.shaderSource(T,i),e.compileShader(T),e.getShaderParameter(T,e.COMPILE_STATUS),t.push(T)}var u=e.createProgram();return t.forEach(function(r){return e.attachShader(u,r)}),e.linkProgram(u),u}(i,[e,r]),u=i.getAttribLocation(T,"a_position"),E=i.getAttribLocation(T,"a_texCoord"),_=i.createBuffer();i.bindBuffer(i.ARRAY_BUFFER,_);var x=i.createBuffer();i.bindBuffer(i.ARRAY_BUFFER,x),i.bufferData(i.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]),i.STATIC_DRAW);var R=i.getUniformLocation(T,"u_resolution"),l=i.getUniformLocation(T,"u_image0"),c=i.getUniformLocation(T,"u_image1");o.width=a.width,o.height=a.height;var d=i.createTexture();i.bindTexture(i.TEXTURE_2D,d),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_S,i.CLAMP_TO_EDGE),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_T,i.CLAMP_TO_EDGE),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,i.NEAREST),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MAG_FILTER,i.NEAREST),i.texImage2D(i.TEXTURE_2D,0,i.RGBA,i.RGBA,i.UNSIGNED_BYTE,a);var f=i.createTexture();i.bindTexture(i.TEXTURE_2D,f),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_S,i.CLAMP_TO_EDGE),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_T,i.CLAMP_TO_EDGE),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,i.NEAREST),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MAG_FILTER,i.NEAREST),i.texImage2D(i.TEXTURE_2D,0,i.RGBA,i.RGBA,i.UNSIGNED_BYTE,n),i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT),i.useProgram(T),i.viewport(0,0,i.canvas.width,i.canvas.height),i.bindBuffer(i.ARRAY_BUFFER,_),i.bufferData(i.ARRAY_BUFFER,new Float32Array([0,0,o.width,0,0,o.height,0,o.height,o.width,0,o.width,o.height]),i.STATIC_DRAW),i.enableVertexAttribArray(u),i.vertexAttribPointer(u,2,i.FLOAT,!1,0,0),i.enableVertexAttribArray(E),i.bindBuffer(i.ARRAY_BUFFER,x),i.vertexAttribPointer(E,2,i.FLOAT,!1,0,0),i.uniform2f(R,i.canvas.width,i.canvas.height),i.uniform1i(l,0),i.uniform1i(c,1),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,d),i.activeTexture(i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,f),i.drawArrays(i.TRIANGLES,0,6)}});
+// v1.1.0
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(e="undefined"!=typeof globalThis?globalThis:e||self).lutFilter=r()}(this,(function(){"use strict";return function(e){var r=e.canvas,t=e.filterImage,o=e.image,a=r.getContext("webgl",{preserveDrawingBuffer:!0}),n=a.createShader(a.VERTEX_SHADER);a.shaderSource(n,"\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\n\nuniform vec2 u_resolution;\nvarying vec2 v_texCoord;\n\nvoid main() {\n  vec2 zeroToOne = a_position / u_resolution;\n  vec2 zeroToTwo = zeroToOne * 2.0;\n  vec2 clipSpace = zeroToTwo - 1.0;\n  gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n  v_texCoord = a_texCoord;\n}\n"),a.compileShader(n),a.getShaderParameter(n,a.COMPILE_STATUS);var i=a.createShader(a.FRAGMENT_SHADER);a.shaderSource(i,"\nprecision mediump float;\n\nvarying lowp vec2 v_texCoord;\nuniform sampler2D u_image0;\nuniform sampler2D u_image1;\n\nvoid main() {\n  vec4 textureColor = texture2D(u_image0, v_texCoord);\n  float blueColor = textureColor.b * 63.0;\n  vec2 quad1;\n  quad1.y = floor(floor(blueColor) / 8.0);\n  quad1.x = floor(blueColor) - (quad1.y * 8.0);\n  vec2 quad2;\n  quad2.y = floor(ceil(blueColor) / 8.0);\n  quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n  vec2 texPos1;\n  texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n  texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);\n  vec2 texPos2;\n  texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n  texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);\n  lowp vec4 newColor1 = texture2D(u_image1, texPos1);\n  lowp vec4 newColor2 = texture2D(u_image1, texPos2);\n  lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n  gl_FragColor = mix(textureColor, vec4(newColor.rgb, textureColor.w), 1.0);\n}\n"),a.compileShader(i),a.getShaderParameter(i,a.COMPILE_STATUS);var T=a.createProgram();a.attachShader(T,n),a.attachShader(T,i),a.linkProgram(T);var E=a.getAttribLocation(T,"a_position"),u=a.getAttribLocation(T,"a_texCoord"),_=a.createBuffer();a.bindBuffer(a.ARRAY_BUFFER,_);var l=a.createBuffer();a.bindBuffer(a.ARRAY_BUFFER,l),a.bufferData(a.ARRAY_BUFFER,new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1]),a.STATIC_DRAW);var R=a.getUniformLocation(T,"u_resolution"),c=a.getUniformLocation(T,"u_image0"),x=a.getUniformLocation(T,"u_image1");r.width=o.width,r.height=o.height;var d=a.createTexture();a.bindTexture(a.TEXTURE_2D,d),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_S,a.CLAMP_TO_EDGE),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MIN_FILTER,a.NEAREST),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MAG_FILTER,a.NEAREST),a.texImage2D(a.TEXTURE_2D,0,a.RGBA,a.RGBA,a.UNSIGNED_BYTE,o);var A=a.createTexture();a.bindTexture(a.TEXTURE_2D,A),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_S,a.CLAMP_TO_EDGE),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MIN_FILTER,a.NEAREST),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MAG_FILTER,a.NEAREST),a.texImage2D(a.TEXTURE_2D,0,a.RGBA,a.RGBA,a.UNSIGNED_BYTE,t),a.clearColor(0,0,0,0),a.clear(a.COLOR_BUFFER_BIT),a.useProgram(T),a.viewport(0,0,a.canvas.width,a.canvas.height),a.bindBuffer(a.ARRAY_BUFFER,_),a.bufferData(a.ARRAY_BUFFER,new Float32Array([0,0,r.width,0,0,r.height,0,r.height,r.width,0,r.width,r.height]),a.STATIC_DRAW),a.enableVertexAttribArray(E),a.vertexAttribPointer(E,2,a.FLOAT,!1,0,0),a.enableVertexAttribArray(u),a.bindBuffer(a.ARRAY_BUFFER,l),a.vertexAttribPointer(u,2,a.FLOAT,!1,0,0),a.uniform2f(R,a.canvas.width,a.canvas.height),a.uniform1i(c,0),a.uniform1i(x,1),a.activeTexture(a.TEXTURE0),a.bindTexture(a.TEXTURE_2D,d),a.activeTexture(a.TEXTURE1),a.bindTexture(a.TEXTURE_2D,A),a.drawArrays(a.TRIANGLES,0,6)}}));

No alert changes

Improved metrics

Total package byte prevSize

5573

increased by3.09%

Number of lines in readme file

32

increased by10.34%

Worsened metrics

Dev dependency count

9

increased by12.5%

Lines of code

16

decreased by-5.88%

No dependency changes