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

Новости Отредактировано

8К открытий8К показов

На 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-преобразования.

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

Для начала использования нужно скачать минифицированную версию скрипта и 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 2

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

8К открытий8К показов

Также рекомендуем

Какой state management вы используете в больших React-приложениях?

Всем привет! Какой стэйт менеджмент вы используете в больших React-приложениях?

🔥 Функцию перевода видео с Яндекс.Браузера портировали на Google Chrome и Safari

Функция перевода видео из Яндекс.Браузера теперь доступна на Google Chrome и Safari благодаря бесплатному расширению voice-over-translation с открытым исходным кодом на GitHub

Стилизация участков текста с помощью CSS Custom Highlight API

В этой статье я расскажу, как с помощью CSS Custom Highlight API можно стилизовать выделенные диапазоны текста, а также разберу теорию на практическом примере.

Почему разработка игр на Python не умерла: Godot и другие библиотеки в геймдеве

Игры можно писать не только на плюсах и C#. Конечно, это будут не крупные проекты с мощным движком и огромным количеством героев и NPC. Рассказываем, как создаются игры на Python и какие есть геймдев-библиотеки.