Создан движок для 3D-рендеринга в браузере, основанный на CSS
Комментарии
В закладки
7481
На GitHub появился проект с открытым исходным кодом, который реализует движок для рендеринга вокселей (по сути, трёхмерных пикселей) на CSS напрямую в браузере.
Создатели пишут, что преследуют цель создания легковесной библиотеки с очень простой реализацией. Действительно, примеры выглядят вполне красиво, и при этом кодируются относительно несложно:
var scene = new voxelcss.Scene();
scene.rotate(-Math.PI / 8, Math.PI / 4, 0);
scene.attach(document.body);
var world = new voxelcss.World(scene);
var editor = new voxelcss.Editor(world);
editor.enableAutoSave();
if (editor.isSaved()) {
editor.load();
} else {
editor.add(new voxelcss.Voxel(0, 0, 0, 100, {
mesh: voxelcss.Meshes.grass
}));
}
При этом, так как это CSS, то не нужны никакие трассировки для отслеживания курсора мыши, тогда как в традиционных методах необходимо проецировать 2D-координаты курсора в 3D-мир сцены.
var voxel = new voxelcss.Voxel(0, 0, 0, 100);
voxel.addEventListener('VoxelClick', VoxelWasClicked);
voxel.addEventListener('TopClick', TopWasClicked);
voxel.addEventListener('FrontClick', FrontWasClicked);
Также благодаря CSS автоматически поддерживаются все типы изображений, GPU-ускорение и CSS3-преобразования.
Для начала использования нужно скачать минифицированную версию скрипта и CSS-файла, а затем подключить их к своему проекту: