187 lines
5.8 KiB
HTML
187 lines
5.8 KiB
HTML
<!doctype html>
|
|
<!-- Copyright 2024 Mark Callow.
|
|
SPDX-License-Identifier: Apache-2.0 -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>libktx.js Demo with WebGL</title>
|
|
<link rel="stylesheet" href="../webgl.css" type="text/css">
|
|
<link rel="shortcut icon" href="../ktx_favicon.ico" type="image/x-icon" />
|
|
<style>
|
|
body {
|
|
/* Set margins to center the page. */
|
|
margin: 2em auto 2em auto;
|
|
max-width: 65em;
|
|
}
|
|
/* Center the canvas container too. */
|
|
#container {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
position: relative;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
#glcanvas {
|
|
border: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: white;
|
|
z-index: -1;
|
|
}
|
|
#glcontent {
|
|
position: relative;
|
|
margin: 10px;
|
|
}
|
|
#panel {
|
|
color: white;
|
|
background-color:rgba(0.3, 0.3, 0.3, 0.3);
|
|
padding: 0.5em;
|
|
max-width: 65em;
|
|
}
|
|
.item {
|
|
display: inline-block;
|
|
margin: 1em;
|
|
padding: 1em;
|
|
background: transparent;
|
|
vertical-align: top;
|
|
}
|
|
.label {
|
|
margin-top: 0.5em;
|
|
width: 256px;
|
|
}
|
|
/*
|
|
* The size of an image is changed when it is added to the div
|
|
* styled by this. So the size needs to be a multiple of 4 for
|
|
* compatibility with various compressed texture formats in WebGL.
|
|
*/
|
|
.view {
|
|
width: 256px;
|
|
height: 256px;
|
|
border: 1px solid black;
|
|
}
|
|
/* An img inside a .view should fill the view. */
|
|
.view img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.pass {
|
|
color: green;
|
|
}
|
|
.fail {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="panel">
|
|
<h2>libktx Read-write Javascript Binding Test</h2>
|
|
<p>This tests the functionality of the read-write Javascript
|
|
binding for libktx, which has been compiled to Javascript using
|
|
Emscripten. Though loosely referred to as "write" the added
|
|
functionalty tested here is more about creating ktxTexture objects
|
|
from scratch than writing them out as files.
|
|
</p>
|
|
<p>Click the <i>Run Tests</i> button to run the tests.</p>
|
|
<p>The test reads a .png file then performs various operations
|
|
using the wrapper API including creating an uncompressed
|
|
ktxTexture2 object. The operations are shown in the list below.
|
|
</p>
|
|
</div>
|
|
<p id="test_ktx">
|
|
<input type="button" value="Run Tests" id='runtests' disabled='true'
|
|
onclick="runTests('ktx_app.png')">
|
|
</p>
|
|
<p>Create uncompressed ktxTexture2: <b id='create_result'></b></p>
|
|
<p>Copy input image to new texture: <b id='copy_image_result'></b></p>
|
|
<p>Check oetf and primaries are set correctly: <b id='colorspace_set_result'></b></p>
|
|
<p>Write and read metadata: <b id='metadata_result'></b></p>
|
|
<p>Get image from new texture: <b id='get_image_result'></b></p>
|
|
<p>Create copy of original texture: <b id='create_copy_result'></b></p>
|
|
<p>Compress ktxTexture2 with Basis: <b id='compress_basis_result'></b></p>
|
|
<p>Write KTX file to memory: <b id='write_to_memory_result'></b></p>
|
|
<p>Read KTX file from memory: <b id='read_from_memory_result'></b></p>
|
|
<p>ASTC inputSwizzle set: <b id ='swizzle_set_result'></b></p>
|
|
<p>Compress ktxTexture2 with ASTC: <b id='compress_astc_result'></b></p>
|
|
<div id="container">
|
|
<!-- <canvas id="glcanvas" width="1280" height="480"></canvas> -->
|
|
<canvas id="glcanvas"></canvas>
|
|
<div id="glcontent"></div>
|
|
</div>
|
|
</body>
|
|
|
|
<script src="../gl-matrix.js"></script>
|
|
<script src="../libktx.js"></script>
|
|
<script src="libktx-test.js"></script>
|
|
<script type="text/javascript">
|
|
function createElem(type, parent, className) {
|
|
const elem = document.createElement(type);
|
|
parent.appendChild(elem);
|
|
if (className) {
|
|
elem.className = className;
|
|
}
|
|
return elem;
|
|
}
|
|
|
|
function randArrayElement(array) {
|
|
return array[Math.random() * array.length | 0];
|
|
}
|
|
|
|
function rand(min, max) {
|
|
if (max === undefined) {
|
|
max = min;
|
|
min = 0;
|
|
}
|
|
return Math.random() * (max - min) + min;
|
|
}
|
|
|
|
// Make 3 elements over the canvas.
|
|
const contentElem = document.querySelector('#glcontent');
|
|
const items = [];
|
|
const numItems = 6;
|
|
const origImageItem = 0, uncompTextureItem = 1;
|
|
const copyTextureItem = 2, basisCompTextureItem = 3;
|
|
const writeReadTextureItem = 4, astcCompTextureItem = 5;
|
|
const labelText = [
|
|
'Input image',
|
|
'Uncompressed ktxTexture2',
|
|
'Copy of uncompressed ktxTexture2',
|
|
'Compressed to ETC1S/Basis-LZ',
|
|
'Written and Read .ktx2 file with uncompressed texture',
|
|
'ASTC compressed texture'
|
|
];
|
|
|
|
for (let i = 0; i < numItems; ++i) {
|
|
const outerElem = createElem('div', contentElem, 'item');
|
|
const viewElem = createElem('div', outerElem, 'view');
|
|
const labelElem = createElem('div', outerElem, 'label');
|
|
//labelElem.textContent = `Item ${i + 1}`;
|
|
labelElem.textContent = labelText[i];
|
|
const bgColor = [rand(1), rand(1), rand(1), 1];
|
|
var placeholder = {};
|
|
switch (i) {
|
|
case 0:
|
|
placeholder.target = null;
|
|
placeholder.object = null;
|
|
placeholder.uvMatrix = null;
|
|
break;
|
|
default:
|
|
const texColor = [rand(255), rand(255), rand(255), 255];
|
|
placeholder = createPlaceholderTexture(gl, texColor);
|
|
break;
|
|
}
|
|
items.push({
|
|
color: bgColor,
|
|
texture: placeholder,
|
|
element: viewElem,
|
|
label: labelElem
|
|
});
|
|
}
|
|
</script>
|
|
</html>
|