Создан движок для 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-файла, а затем подключить их к своему проекту:

			<script src="js/voxel.js"></script>
<link rel='stylesheet' href="css/voxel.css"></link>

И создать простейшую сцену, например, такую:

			<script>

    var scene, world, editor;

    init();

    function init() {
    scene = new voxelcss.Scene();
    
    scene.attach(document.body);
    var lightSource = new voxelcss.LightSource(300, 300, 300, 750, 0.3, 1);
    scene.addLightSource(lightSource);

    world = new voxelcss.World(scene);
    editor = new voxelcss.Editor(world);
    editor.enableAutoSave();

    editor.load();
    if(world.getVoxels().length === 0)
      editor.add(new voxelcss.Voxel(0, 0, 0, 100, {
        mesh: voxelcss.Meshes.grass
      }));
    }

</script>

И если всё сделано правильно, то получится вот такой результат:

Создан движок для 3D-рендеринга в браузере, основанный на CSS 1

Подробности можно найти в документации.

7481