mirror of
https://github.com/pissang/claygl.git
synced 2025-12-08 21:26:11 +00:00
131 lines
4.4 KiB
HTML
131 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<script src="../dist/claygl.js"></script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
body, canvas {
|
|
margin: 0;
|
|
background: #000;
|
|
}
|
|
</style>
|
|
<canvas></canvas>
|
|
<script>
|
|
const canvas = document.querySelector('canvas');
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
const shader = new clay.Shader(
|
|
clay.Shader.source('clay.compositor.vertex'),
|
|
clay.Shader.source('clay.compositor.output')
|
|
);
|
|
const planeGeo = new clay.geometry.Plane();
|
|
function createRect(texture, x, y, width, height) {
|
|
const mat = new clay.Material({ shader });
|
|
mat.set('texture', texture);
|
|
const mesh = new clay.Mesh({
|
|
geometry: planeGeo, material: mat,
|
|
culling: false
|
|
});
|
|
const sx = width / canvas.width;
|
|
const sy = height / canvas.height;
|
|
mesh.position.set(
|
|
x / canvas.width * 2.0 - 1.0 + sx,
|
|
1.0 - y / canvas.height * 2.0 - sy,
|
|
0
|
|
);
|
|
mesh.scale.set(
|
|
sx,
|
|
-sy,
|
|
1
|
|
);
|
|
|
|
return mesh;
|
|
}
|
|
|
|
const renderer = new clay.Renderer({ canvas });
|
|
const scene = new clay.Scene();
|
|
const camera = new clay.camera.Orthographic();
|
|
|
|
let x = 0;
|
|
let y = 10;
|
|
let size = 128;
|
|
let marginX = 50;
|
|
let marginY = 50;
|
|
[
|
|
['test.png', 'Reference(PNG)'],
|
|
['test-pvr.ktx', 'pvrtc'],
|
|
['test-etc.ktx', 'etc1'],
|
|
['test-s3tc.ktx', 's3tc']
|
|
].forEach(obj => {
|
|
const isReference = obj[0].match(/png$/);
|
|
const url = 'assets/textures/compressed/' + obj[0];
|
|
const localX = x;
|
|
const localY = y;
|
|
x += size + marginX;
|
|
if (x + size > canvas.width || isReference) {
|
|
x = 0;
|
|
y += size + marginY;
|
|
}
|
|
function create(tex) {
|
|
const textCanvas = document.createElement('canvas');
|
|
const ctx = textCanvas.getContext('2d');
|
|
ctx.font = '30px sans-serif';
|
|
let width = ctx.measureText(obj[1]).width;
|
|
textCanvas.width = width;
|
|
textCanvas.height = 40;
|
|
ctx.fillStyle = '#fff';
|
|
ctx.textAlign = 'left';
|
|
ctx.textBaseline = 'top';
|
|
ctx.font = '30px sans-serif';
|
|
ctx.fillText(obj[1], 0, 0);
|
|
|
|
const textMesh = createRect(new clay.Texture2D({
|
|
image: textCanvas,
|
|
flipY: false
|
|
}), localX, localY, textCanvas.width, textCanvas.height);
|
|
|
|
const mesh = createRect(tex, localX, localY + textCanvas.height, size, size);
|
|
scene.add(textMesh);
|
|
scene.add(mesh);
|
|
}
|
|
if (isReference) {
|
|
const tex = new clay.Texture2D({
|
|
minFilter: clay.Texture.LINEAR,
|
|
magFilter: clay.Texture.LINEAR,
|
|
useMipmap: false,
|
|
flipY: false
|
|
});
|
|
tex.load(url);
|
|
tex.success(() => {
|
|
create(tex);
|
|
});
|
|
}
|
|
else {
|
|
fetch(url).then(res => res.arrayBuffer())
|
|
.then(ab => {
|
|
const res = clay.util.ktx.parse(ab);
|
|
create(new clay.Texture2D({
|
|
pixels: res.pixels,
|
|
width: res.width,
|
|
height: res.height,
|
|
format: res.format,
|
|
minFilter: clay.Texture.LINEAR,
|
|
magFilter: clay.Texture.LINEAR,
|
|
useMipmap: false
|
|
}));
|
|
});
|
|
}
|
|
});
|
|
function update() {
|
|
renderer.render(scene, camera);
|
|
requestAnimationFrame(update);
|
|
}
|
|
update();
|
|
</script>
|
|
</body>
|
|
</html> |