2d:null 2e:["$","title",null,{"children":"Images By GPU | AbserAri | Observable"}] 33:T6ff,viewof A = form(html` `)34:T58d,rendorTrans = async () => { const img = new Image(); img.src = status.imagePath; // console.log(`${img.naturalWidth} - ${img.naturalHeight}`); const canvas = DOM.canvas(img.naturalWidth, img.naturalHeight); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight); // console.log(width, (width / img.naturalWidth) * img.naturalHeight); var imageData = ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight); console.log(`计算 ${imageData.data.length / 4} * 4 与 4 * 4 矩阵`); // Use gpu or not if (!navigator.gpu) { let t0 = window.performance.now(); console.log( 'WebGPU is not supported. Enable chrome://flags/#enable-unsafe-webgpu flag.' ); // trans rgba, when ispng is false, try 3*3 do not change alpha var lineT = new matrix([ [A.a11, A.a12, A.a13, A.a14], [A.a21, A.a22, A.a23, A.a24], [A.a31, A.a32, A.a33, A.a34], [A.a41, A.a42, A.a43, A.a44] ]); rgbTrans(imageData, lineT); console.log( `不使用 GPU 加速：执行了 ${window.performance.now() - t0} 毫秒.` ); } else { console.log('Now is using WebGPU'); let t0 = window.performance.now(); await rgbTransByGPU(imageData); console.log( `使用 GPU 加速：执行了 ${window.performance.now() - t0} 毫秒.` ); } ctx.putImageData(imageData, 0, 0); return canvas; }35:[] 31:{"id":"3f8907b5868da77f","slug":"images-by-gpu","title":"Images By GPU","thumbnail":"4c3accf5d0ff98f6a816e7b1477eb648a9c5c82e4c298bf910183313c7954da5","access_level":"public","create_time":"$D2020-02-11T09:32:22.340Z","update_time":"$D2020-02-11T09:46:16.871Z","view_time":null,"first_public_time":"$D2020-02-11T09:35:02.795Z","has_unpublished_edits":null,"fork":{"id":"a7585b1bb36b2735","slug":"images","title":"Images","owner":{"id":"8c968b856895152e","login":"yhyddr","name":"AbserAri"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8c968b856895152e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":"starter_2024"},"version":913,"publish_version":913,"role":null,"authored":false,"authors":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null}],"members":[{"type":"individual","id":"3935e5bc2f09179e","login":"yhyddr","name":"AbserAri","avatar_url":"https://avatars-next.observableusercontent.com/52e627081ba2d80c7443d9aa2d2f732769d9872798ccdeb00090f1cd68156140","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9d66bfdd3bca4b7d","slug":"cv","title":"CV","owner":{"id":"8c968b856895152e","login":"yhyddr","name":"AbserAri"}},"type":"notebook","body":{"title":"Images By GPU","cells":[{"id":0,"value":"md`# Images By GPU`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`\n## Canvas\n### Show\n- [Using Images](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)\n- [drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`\n## Kind\nAfter Upload your picture, please choose your image kind in case we know use RGB channel or RGBA channel.\n\n## Matrix\nThen you could configure the value of matrix which trans all the pixel's channel.\n\nThe example is eyes matrix which means that we default do nothing about your picture.\n\n you click start RendorOn to see what changed.\n\n\n**Update: Use GPU to speed up**\n\n Dogfood🐾: WebGPU is available for now in Chrome 78 for macOS behind an experimental flag. \n You can enable it at chrome://flags/#enable-unsafe-webgpu.\n\n If console.log inform you gpu not find, you may Should use this version to get visit on navigator.gpu [Google Chrome Canary]https://github.com/yyc-git/MyData/blob/master/3d/googlechrome(canary).dmg\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"{\n if (!navigator.gpu) {\n return 'WebGPU is not supported. Enable chrome://flags/#enable-unsafe-webgpu flag.';\n } else {\n return 'WebGPU is Good Now';\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html` No Image

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"{\n if (rendorOn) {\n return await rendorTrans();\n }\n return \"don't rendor realtime\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"start = {\n const button = html``;\n button.onclick = () => {\n if (rendorOn) {\n mutable rendorOn = 0;\n } else {\n mutable rendorOn = 1;\n }\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"mutable rendorOn = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"status = {\n return {\n imagePath: undefined\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"{\n const input = document.getElementById('chooseImage');\n const image = document.getElementById('origin');\n\n input.addEventListener(\n 'change',\n e => {\n status.imagePath = URL.createObjectURL(e.target.files[0]);\n image.src = status.imagePath;\n },\n false\n );\n\n image.onload = () => {\n showImage();\n };\n return 'this cell’s code is using to load your image';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"showImage = () => {\n const img = new Image();\n img.src = status.imagePath;\n \n console.log(`${img.naturalWidth} - ${img.naturalHeight}`);\n const canvas = DOM.canvas(\n width,\n (width / img.naturalWidth) * img.naturalHeight\n );\n console.log(`new ${width} - \n ${(width / img.naturalWidth) * img.naturalHeight}`);\n const ctx = canvas.getContext('2d');\n\n // draw image use imgdata\n ctx.drawImage(\n img,\n 0,\n 0,\n width,\n (width / img.naturalWidth) * img.naturalHeight\n );\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"md`rgbTrans use matrix multiplie to convert rgb`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"rgbTrans = (\n img,\n lineTransMatrix,\n\n { fx } = {\n fx: mx => {\n return mx;\n }\n }\n) => {\n // convert img.data to Matrix to compute\n // console.log(img.data.length / 4);\n\n var y = [];\n for (let i = 0; i < img.data.length; i += 4) {\n let x = [];\n for (let j = 0; j < 4; ++j) {\n x.push(img.data[i + j]);\n }\n y.push(x);\n }\n var m = new matrix(y);\n // make lineTrans\n var x = fx(m.mmul(lineTransMatrix));\n // convert Matrix to linear Uint8Array\n var z = [];\n for (let i = 0; i < x.data.length; ++i) {\n for (let j = 0; j < 4; ++j) {\n img.data[4 * i + j] = x.data[i][j];\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"rgbTransByGPU = async img => {\n // construct first martix\n var image = new Float32Array(2 + img.data.length);\n image[0] = img.data.length / 4;\n image[1] = 4;\n for (var i = 0; i < img.data.length; i++) {\n image[i + 2] = img.data[i];\n }\n\n // construct second matrix which use to trans\n var lineT = new Float32Array([\n 4,\n 4,\n A.a11,\n A.a12,\n A.a13,\n A.a14,\n A.a21,\n A.a22,\n A.a23,\n A.a24,\n A.a31,\n A.a32,\n A.a33,\n A.a34,\n A.a41,\n A.a42,\n A.a43,\n A.a44\n ]);\n\n // console.log(img);\n // use gpu compute the result\n const result = await gpuMatrixCompute(image, lineT);\n for (var i = 0; i < result.length; i++) {\n img.data[i] = result[i + 2];\n }\n // console.log(img);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"Matrix = require('ml-matrix')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"import { button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"import { gpuMatrixCompute } from '@yhyddr/gpu-matrix-compute'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"matrix = Matrix.Matrix","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"