webgl/shader_deblocking/index.html - external/github.com/BinomialLLC/basis_universal - Git at Google

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <title>Shader Deblocking</title>
    <style>
       html, body {
          margin: 0;
          padding: 0;
          height: 100%;
          background: #202020;
          color: #e0e0e0;
          font-family: Consolas, "Courier New", monospace;
          overflow: hidden;
          overscroll-behavior: none; /* stop Android pull-to-refresh / iOS rubber-banding */
       }
       #canvas {
          display: block;
          width: 100vw;
          height: 100vh;   /* fallback for older browsers */
          height: 100dvh;  /* dynamic viewport height: correct under the mobile URL bar */
          touch-action: none; /* we handle drag/pinch ourselves; stop browser pan/zoom */
       }
       /* Text overlays sit on top of the GL canvas. The native sample drew an
          8x8 bitmap font into the framebuffer; in the browser plain HTML/CSS is
          simpler and crisper. */
       .overlay {
          position: fixed;
          left: calc(8px + env(safe-area-inset-left));
          pointer-events: none;
          white-space: pre;
          font-size: 13px;
          line-height: 1.35;
          text-shadow: 0 0 3px #000, 0 0 3px #000;
       }
       /* #info top-left; #help stacked just below it (kept away from the bottom
          button bar, which can wrap to multiple rows on a narrow phone). */
       #info { top: calc(8px + env(safe-area-inset-top)); }
       #help { top: calc(70px + env(safe-area-inset-top)); color: #b0b0b0; font-size: 12px; }
       /* On-screen control bar — keeps the sample fully usable on touch devices. */
       #buttons {
          position: fixed;
          left: 50%;
          bottom: calc(10px + env(safe-area-inset-bottom));
          transform: translateX(-50%);
          display: flex;
          flex-wrap: nowrap;           /* single horizontal row along the bottom */
          gap: 6px;
          justify-content: center;
          max-width: calc(100vw - 12px);
          overflow-x: auto;            /* scroll rather than stack if a screen is too narrow */
          pointer-events: auto;
       }
       #buttons button {
          background: #303030;
          color: #e0e0e0;
          border: 1px solid #555;
          font-family: inherit;
          font-size: 13px;
          padding: 10px 8px;
          min-height: 44px;            /* iOS HIG minimum tap target */
          white-space: nowrap;         /* keep each label on one line */
          flex: 0 0 auto;
          border-radius: 5px;
          cursor: pointer;
          touch-action: manipulation;  /* kill the 300ms double-tap delay/zoom */
       }
       /* Guard :hover so it doesn't "stick" after a tap on touch devices. */
       @media (hover: hover) { #buttons button:hover { background: #3a3a3a; } }
       #buttons button:active { background: #454545; }  /* immediate touch feedback */
       #buttons button.active { background: #2a5d2a; border-color: #3a8a3a; }
       /* Pulldown sits BELOW the debug text (#info 3 lines + #help), left-aligned, so
          it never overlaps/obscures the overlay text on a narrow phone screen. */
       #controls {
          position: fixed;
          top: calc(112px + env(safe-area-inset-top));
          left: calc(8px + env(safe-area-inset-left));
          pointer-events: auto;
          font-size: 13px;
       }
       #controls select {
          background: #303030;
          color: #e0e0e0;
          border: 1px solid #555;
          font-family: inherit;
          font-size: 16px;     /* >=16px stops iOS auto-zoom on focus */
          padding: 8px 10px;
          min-height: 44px;
          touch-action: manipulation;
       }
       #error {
          position: fixed;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          color: #ff8080;
          font-size: 15px;
          max-width: 80vw;
          text-align: center;
          display: none;
       }
    </style>
 </head>
 <body>
    <canvas id="canvas"></canvas>

    <div id="info" class="overlay">Loading…</div>
    <div id="help" class="overlay"></div>

    <div id="buttons">
       <button id="btnMode">Quad</button>
       <button id="btnDeblock">Deblock</button>
       <button id="btnEdges">Edges</button>
       <button id="btnFilter">Trilinear</button>
       <button id="btnReset">Reset</button>
    </div>

    <div id="controls">
       <label for="asset">Texture: </label>
       <select id="asset">
          <option value="assets/kodim01.ktx2">kodim01.ktx2</option>
          <option value="assets/kodim03.ktx2">kodim03.ktx2</option>
          <option value="assets/kodim23.ktx2" selected>kodim23.ktx2</option>
          <option value="assets/tng.ktx2">tng.ktx2 (8x8, mipped)</option>
          <option value="assets/tng2.ktx2">tng2.ktx2 (8x8, mipped, 1000h)</option>
          <option value="assets/tng3.ktx2">tng3.ktx2 (12x12, mipped)</option>
          <option value="assets/frymire.ktx2">frymire.ktx2</option>
          <option value="assets/frymire2.ktx2">frymire2.ktx2</option>
       </select>
    </div>

    <div id="error"></div>

    <!-- Shared Basis Universal transcoder (transcode-only WASM build), same one
         used by the other webgl/ samples. main.js boots it via BASIS(). -->
    <script src="../transcoder/build/basis_transcoder.js"></script>
    <script src="main.js"></script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
	<title>Shader Deblocking</title>
	<style>
	html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #202020;
	color: #e0e0e0;
	font-family: Consolas, "Courier New", monospace;
	overflow: hidden;
	overscroll-behavior: none; /* stop Android pull-to-refresh / iOS rubber-banding */
	}
	#canvas {
	display: block;
	width: 100vw;
	height: 100vh; /* fallback for older browsers */
	height: 100dvh; /* dynamic viewport height: correct under the mobile URL bar */
	touch-action: none; /* we handle drag/pinch ourselves; stop browser pan/zoom */
	}
	/* Text overlays sit on top of the GL canvas. The native sample drew an
	8x8 bitmap font into the framebuffer; in the browser plain HTML/CSS is
	simpler and crisper. */
	.overlay {
	position: fixed;
	left: calc(8px + env(safe-area-inset-left));
	pointer-events: none;
	white-space: pre;
	font-size: 13px;
	line-height: 1.35;
	text-shadow: 0 0 3px #000, 0 0 3px #000;
	}
	/* #info top-left; #help stacked just below it (kept away from the bottom
	button bar, which can wrap to multiple rows on a narrow phone). */
	#info { top: calc(8px + env(safe-area-inset-top)); }
	#help { top: calc(70px + env(safe-area-inset-top)); color: #b0b0b0; font-size: 12px; }
	/* On-screen control bar — keeps the sample fully usable on touch devices. */
	#buttons {
	position: fixed;
	left: 50%;
	bottom: calc(10px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	display: flex;
	flex-wrap: nowrap; /* single horizontal row along the bottom */
	gap: 6px;
	justify-content: center;
	max-width: calc(100vw - 12px);
	overflow-x: auto; /* scroll rather than stack if a screen is too narrow */
	pointer-events: auto;
	}
	#buttons button {
	background: #303030;
	color: #e0e0e0;
	border: 1px solid #555;
	font-family: inherit;
	font-size: 13px;
	padding: 10px 8px;
	min-height: 44px; /* iOS HIG minimum tap target */
	white-space: nowrap; /* keep each label on one line */
	flex: 0 0 auto;
	border-radius: 5px;
	cursor: pointer;
	touch-action: manipulation; /* kill the 300ms double-tap delay/zoom */
	}
	/* Guard :hover so it doesn't "stick" after a tap on touch devices. */
	@media (hover: hover) { #buttons button:hover { background: #3a3a3a; } }
	#buttons button:active { background: #454545; } /* immediate touch feedback */
	#buttons button.active { background: #2a5d2a; border-color: #3a8a3a; }
	/* Pulldown sits BELOW the debug text (#info 3 lines + #help), left-aligned, so
	it never overlaps/obscures the overlay text on a narrow phone screen. */
	#controls {
	position: fixed;
	top: calc(112px + env(safe-area-inset-top));
	left: calc(8px + env(safe-area-inset-left));
	pointer-events: auto;
	font-size: 13px;
	}
	#controls select {
	background: #303030;
	color: #e0e0e0;
	border: 1px solid #555;
	font-family: inherit;
	font-size: 16px; /* >=16px stops iOS auto-zoom on focus */
	padding: 8px 10px;
	min-height: 44px;
	touch-action: manipulation;
	}
	#error {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #ff8080;
	font-size: 15px;
	max-width: 80vw;
	text-align: center;
	display: none;
	}
	</style>
	</head>
	<body>
	<canvas id="canvas"></canvas>

	<div id="info" class="overlay">Loading…</div>
	<div id="help" class="overlay"></div>

	<div id="buttons">
	<button id="btnMode">Quad</button>
	<button id="btnDeblock">Deblock</button>
	<button id="btnEdges">Edges</button>
	<button id="btnFilter">Trilinear</button>
	<button id="btnReset">Reset</button>
	</div>

	<div id="controls">
	<label for="asset">Texture: </label>
	<select id="asset">
	<option value="assets/kodim01.ktx2">kodim01.ktx2</option>
	<option value="assets/kodim03.ktx2">kodim03.ktx2</option>
	<option value="assets/kodim23.ktx2" selected>kodim23.ktx2</option>
	<option value="assets/tng.ktx2">tng.ktx2 (8x8, mipped)</option>
	<option value="assets/tng2.ktx2">tng2.ktx2 (8x8, mipped, 1000h)</option>
	<option value="assets/tng3.ktx2">tng3.ktx2 (12x12, mipped)</option>
	<option value="assets/frymire.ktx2">frymire.ktx2</option>
	<option value="assets/frymire2.ktx2">frymire2.ktx2</option>
	</select>
	</div>

	<div id="error"></div>

	<!-- Shared Basis Universal transcoder (transcode-only WASM build), same one
	used by the other webgl/ samples. main.js boots it via BASIS(). -->
	<script src="../transcoder/build/basis_transcoder.js"></script>
	<script src="main.js"></script>
	</body>
	</html>