mirror of
https://github.com/pissang/claygl.git
synced 2026-01-25 16:46:30 +00:00
138 lines
3.9 KiB
HTML
138 lines
3.9 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>
|