https://binomial.biz/shader_deblocking/

1<!DOCTYPE html>
2<html lang="en">
3<head>
4   <meta charset="utf-8" />
5   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
6   <title>Shader Deblocking</title>
7   <style>
8      html, body {
9         margin: 0;
10         padding: 0;
11         height: 100%;
12         background: #202020;
13         color: #e0e0e0;
14         font-family: Consolas, "Courier New", monospace;
15         overflow: hidden;
16         overscroll-behavior: none; /* stop Android pull-to-refresh / iOS rubber-banding */
17      }
18      #canvas {
19         display: block;
20         width: 100vw;
21         height: 100vh;   /* fallback for older browsers */
22         height: 100dvh;  /* dynamic viewport height: correct under the mobile URL bar */
23         touch-action: none; /* we handle drag/pinch ourselves; stop browser pan/zoom */
24      }
25      /* Text overlays sit on top of the GL canvas. The native sample drew an
26         8x8 bitmap font into the framebuffer; in the browser plain HTML/CSS is
27         simpler and crisper. */
28      .overlay {
29         position: fixed;
30         left: calc(8px + env(safe-area-inset-left));
31         pointer-events: none;
32         white-space: pre;
33         font-size: 13px;
34         line-height: 1.35;
35         text-shadow: 0 0 3px #000, 0 0 3px #000;
36      }
37      /* #info top-left; #help stacked just below it (kept away from the bottom
38         button bar, which can wrap to multiple rows on a narrow phone). */
39      #info { top: calc(8px + env(safe-area-inset-top)); }
40      #help { top: calc(70px + env(safe-area-inset-top)); color: #b0b0b0; font-size: 12px; }
41      /* On-screen control bar — keeps the sample fully usable on touch devices. */
42      #buttons {
43         position: fixed;
44         left: 50%;
45         bottom: calc(10px + env(safe-area-inset-bottom));
46         transform: translateX(-50%);
47         display: flex;
48         flex-wrap: nowrap;           /* single horizontal row along the bottom */
49         gap: 6px;
50         justify-content: center;
51         max-width: calc(100vw - 12px);
52         overflow-x: auto;            /* scroll rather than stack if a screen is too narrow */
53         pointer-events: auto;
54      }
55      #buttons button {
56         background: #303030;
57         color: #e0e0e0;
58         border: 1px solid #555;
59         font-family: inherit;
60         font-size: 13px;
61         padding: 10px 8px;
62         min-height: 44px;            /* iOS HIG minimum tap target */
63         white-space: nowrap;         /* keep each label on one line */
64         flex: 0 0 auto;
65         border-radius: 5px;
66         cursor: pointer;
67         touch-action: manipulation;  /* kill the 300ms double-tap delay/zoom */
68      }
69      /* Guard :hover so it doesn't "stick" after a tap on touch devices. */
70      @media (hover: hover) { #buttons button:hover { background: #3a3a3a; } }
71      #buttons button:active { background: #454545; }  /* immediate touch feedback */
72      #buttons button.active { background: #2a5d2a; border-color: #3a8a3a; }
73      /* Pulldown sits BELOW the debug text (#info 3 lines + #help), left-aligned, so
74         it never overlaps/obscures the overlay text on a narrow phone screen. */
75      #controls {
76         position: fixed;
77         top: calc(112px + env(safe-area-inset-top));
78         left: calc(8px + env(safe-area-inset-left));
79         pointer-events: auto;
80         font-size: 13px;
81      }
82      #controls select {
83         background: #303030;
84         color: #e0e0e0;
85         border: 1px solid #555;
86         font-family: inherit;
87         font-size: 16px;     /* >=16px stops iOS auto-zoom on focus */
88         padding: 8px 10px;
89         min-height: 44px;
90         touch-action: manipulation;
91      }
92      #error {
93         position: fixed;
94         left: 50%;
95         top: 50%;
96         transform: translate(-50%, -50%);
97         color: #ff8080;
98         font-size: 15px;
99         max-width: 80vw;
100         text-align: center;
101         display: none;
102      }
103   </style>
104</head>
105<body>
106   <canvas id="canvas"></canvas>
107
108   <div id="info" class="overlay">Loading…</div>
109   <div id="help" class="overlay"></div>
110
111   <div id="buttons">
112      <button id="btnMode">Quad</button>
113      <button id="btnDeblock">Deblock</button>
114      <button id="btnEdges">Edges</button>
115      <button id="btnFilter">Trilinear</button>
116      <button id="btnReset">Reset</button>
117   </div>
118
119   <div id="controls">
120      <label for="asset">Texture: </label>
121      <select id="asset">
122         <option value="assets/kodim01.ktx2">kodim01.ktx2</option>
123         <option value="assets/kodim03.ktx2">kodim03.ktx2</option>
124         <option value="assets/kodim23.ktx2" selected>kodim23.ktx2</option>
125         <option value="assets/tng.ktx2">tng.ktx2 (8x8, mipped)</option>
126         <option value="assets/tng2.ktx2">tng2.ktx2 (8x8, mipped, 1000h)</option>
127         <option value="assets/tng3.ktx2">tng3.ktx2 (12x12, mipped)</option>
128         <option value="assets/frymire.ktx2">frymire.ktx2</option>
129         <option value="assets/frymire2.ktx2">frymire2.ktx2</option>
130      </select>
131   </div>
132
133   <div id="error"></div>
134
135   <!-- Shared Basis Universal transcoder (transcode-only WASM build), same one
136        used by the other webgl/ samples. main.js boots it via BASIS(). -->
137   

137<script src="../transcoder/build/basis_transcoder.js"></script>

137
138   

138<script src="main.js"></script>

138
139</body>
140</html>