Skip to content

Instantly share code, notes, and snippets.

@bellbind
bellbind / index.html
Last active May 7, 2022
[WebGPU] Image texture example for WebGPU API for Chrome-100
View index.html
<!doctype html>
<html>
<head>
<!-- IMPORTANT: The current Chrome requires some origin-trial token in <meta>.
To register origins at the last "WebGPU REGISTER" in https://developer.chrome.com/origintrials/
This token is for a Web Origin "http://localhost:8000" (maybe expired at Mar 31, 2022)
-->
<meta http-equiv="origin-trial"
content="AkIL+/THBoi1QEsWbX5SOuMpL6+KGAXKrZE5Bz6yHTuijzvKz2MznuLqE+MH4YSqRi/v1fDK/6JyFzgibTTeNAsAAABJeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjgwMDAiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjUyODMxOTk5fQ==" />
<meta http-equiv="origin-trial"
@bellbind
bellbind / index.html
Last active Apr 3, 2022
[WebGPU] Rendering animated 3D object for Chrome-100
View index.html
<!doctype html>
<html>
<head>
<!-- IMPORTANT: The current Chrome requires some origin-trial token in <meta>.
To register origins at the last "WebGPU REGISTER" in https://developer.chrome.com/origintrials/
This token is for a Web Origin "http://localhost:8000" (maybe expired at Mar 31, 2022)
-->
<meta http-equiv="origin-trial"
content="AkIL+/THBoi1QEsWbX5SOuMpL6+KGAXKrZE5Bz6yHTuijzvKz2MznuLqE+MH4YSqRi/v1fDK/6JyFzgibTTeNAsAAABJeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjgwMDAiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjUyODMxOTk5fQ==" />
<meta http-equiv="origin-trial"
@bellbind
bellbind / index.html
Last active May 9, 2022
[WebGPU] Game of Life as Compute+Render example for Chrome-103
View index.html
<!doctype html>
<html>
<head>
<!-- IMPORTANT: The current Chrome requires some origin-trial token in <meta>.
To register origins at the last "WebGPU REGISTER" in https://developer.chrome.com/origintrials/
This token is for a Web Origin "https://gist.githack.com" (maybe expired at Mar 31, 2022)
It can register localhost origin as "http://localhost:8000"
-->
<meta http-equiv="origin-trial"
content="Akv07qcAop5MFaZYxJtHHjUuM8eV3GpbHkTeuhZo/4wsNjYnQ7GSGJyo7hRVZvpvyjYwilbJ8KbFVchI4O1DpA0AAABQeyJvcmlnaW4iOiJodHRwczovL2dpc3QuZ2l0aGFjay5jb206NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY1MjgzMTk5OX0=" />
@bellbind
bellbind / compute-example.js
Last active May 9, 2022
[WebGPU] Draw a square with WebGPU for chrome-103
View compute-example.js
// Compute example for WebGPU API for Chrome-103: https://www.w3.org/TR/webgpu/
// [Usage] Paste whole codes into Web Comsole of the WebGPU demo page, then output 1024 Float32Array of squares
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
// WGSL shaders: https://www.w3.org/TR/WGSL/
const workgroupSize = device.limits?.maxComputeInvocationsPerWorkgroup ?? 64;
const computeWgsl = `
struct IO {
values: array<i32>,
@bellbind
bellbind / index.html
Last active Apr 3, 2022
[WebGPU] Game of Life as Compute+Render example
View index.html
<!doctype html>
<html>
<head>
<!-- IMPORTANT: The current Chrome requires some origin-trial token in <meta>.
To register origins at the last "WebGPU REGISTER" in https://developer.chrome.com/origintrials/
This token is for a Web Origin "https://gist.githack.com" (maybe expired at Mar 31, 2022)
It can register localhost origin as "http://localhost:8000"
-->
<meta http-equiv="origin-trial"
content="Akv07qcAop5MFaZYxJtHHjUuM8eV3GpbHkTeuhZo/4wsNjYnQ7GSGJyo7hRVZvpvyjYwilbJ8KbFVchI4O1DpA0AAABQeyJvcmlnaW4iOiJodHRwczovL2dpc3QuZ2l0aGFjay5jb206NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY1MjgzMTk5OX0=" />
@bellbind
bellbind / compute-example.js
Last active Apr 3, 2022
[WebGPU] Draw a square with WebGPU for chrome-98/firefox-99
View compute-example.js
// Compute example for WebGPU API: https://www.w3.org/TR/webgpu/
// [Usage] Paste whole codes into Web Comsole of the WebGPU demo page, then output 1024 Float32Array of squares
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
// WGSL shaders: https://www.w3.org/TR/WGSL/
// NOTE: attribute syntax is changed from [[attr]] to @attr at 2022/01/19; not yet supported on chrome98
// NOTE: from chrome99, [[block]] attribute should be removed
const blockAttr = navigator.userAgent?.match(/Chrome\/98/) ? "[[block]]" : "";
const workgroupSize = 64;
@bellbind
bellbind / deno.json
Last active Mar 17, 2022
[deno] wordle on console (use offcial data & refresh 24-hour)
View deno.json
{"fmt": {"options": {"lineWidth": 160, "indentWidth": 2, "singleQuote": false}}}
@bellbind
bellbind / wordle-answer-bookmarklet-src.js
Last active Feb 17, 2022
[deno] print wordle answer of today
View wordle-answer-bookmarklet-src.js
void(fetch(document.querySelector("script[src^=main]").src).then(r=>r.text()).then(c=>JSON.parse(c.match(/(\[("[a-z]{5}",)*"[a-z]{5}"\])/)[1])).then(w=>alert(w[((new Date().setHours(0,0,0,0)-new Date("2021-6-19"))/864e5)%w.length])))
@bellbind
bellbind / json-words.js
Last active Feb 13, 2022
[deno] wordle on console
View json-words.js
// deno run --allow-net json-words.js >> words.json
const url = "https://raw.githubusercontent.com/tabatkins/wordle-list/main/words";
const words = (await fetch(url).then(res => res.text())).split(/\n/);
console.log(JSON.stringify(words));
@bellbind
bellbind / index.html
Last active Jun 25, 2021
[browser] Time Place Player for YouTube video
View index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Time Place Player for YouTube video</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%2290%22 font-size=%2290%22>🎥</text></svg>"/>
<link
rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>