Введение

Этот фреймворк ориентирован на будущие тренды веб-интерфейсов, предоставляет модули решения типовых задач, использует концепцию DomToWebGL и сочетает с нашими принципами "рендера по требованию", что позволяет удовлетворять потребностям массового 3D рендера, обеспечивая идеальное соотношение производительности и качества изображения. Фреймворк внедряет технологию "слоевого управления материалами", позволяющую легко настраивать материалы. Проходит глубокий анализ основных принципов рендера материалов и проводит вторую разработку, корректирует детализацию материала и согласованность между слоями материалов, все это является смелым исследованием будущих веб-визуальных опытов.

Установка

Рекомендуется использовать установку через npm, так как она лучше всего работает вместе с пакетом сборщика Webpack.

npm i dream-fields --save

Начало работы

Для выполнения базового примера можно импортировать зависимость dream-fields. В этом примере используется FBO отладчик для наблюдения за каждым этапом процесса рендера, используется оптимизация антиалиасинга, чтобы достичь баланса производительности и качества изображения. Просмотреть онлайн демонстрацию

import * as THREE from 'three'
import * as DF from 'dream-fields'
import SMAA from 'dream-fields/Utils/SMAA'
import { createMaterialByLayers } from 'dream-fields/core/Tool'
``````typescript
export class APP {
    constructor() {
        this.resources = new DF.Resources();
        this.controller = new DF.Controller({
            canvas: document.querySelector('#canvas'),
            // pixelRatio: window.devicePixelRatio, //todo Обычные настройки, лучшее качество, но низкая производительность
            pixelRatio: Math.max(1.0, window.devicePixelRatio * 0.8), //todo Ограничение отношения пикселей для снижения вычислений и повышения производительности
            control: true,
            debugFBO: true
        });
        this.controller.work = true; //todo Общий разрешающий рендер, обычно выполняется после завершения загрузки ресурсов
        // todo Инициализация высокопроизводительной системы антиалиасинга, ограничение отношения пикселей повышает производительность, но приводит к появлению зазубрин, антиалиасинг помогает компенсировать этот эффект
        this.smaa = new SMAA({
            renderer: this.controller.renderer,
        });
        this.smaa.resize(this.controller.resolution);
        // todo Настройка постобработки рендера, здесь применяется антиалиасинг к окончательному изображению
        this.controller.postProcessingPipeline = () => {
            this.smaa.render(this.controller.branchRenderingMergeTarget);
        };
        // todo Настройка отладки FBO, просмотр каждого этапа рендера
        this.controller.setFBODebug(this.controller.branchRenderingMergeTarget, 'Пространственное объединение');
        this.controller.setFBODebug(this.smaa.renderTargets.rt1, 'Извлечение границ');
        this.controller.setFBODebug(this.smaa.renderTargets.rt2, 'Вес границ');
    }
}
```// todo Инициализация рендера пространства, можно выбрать нужное пространство для рендера, в конечном итоге объединяются результаты рендера всех пространств, чтобы избежать лишних рендеров и снизить нагрузку на GPU```js
let space = new DF.Space({
    name: 'space',
    depth: 10
})

let geo = new THREE.BoxBufferGeometry(1, 1, 1); // todo Инициализация геометрии

let mat = createMaterialByLayers({ // todo Инициализация материала по слоям
    layers: [
        {
            fi: 0,
            data: {
                category: 'phong',
                specular: {
                    r: 0.2,
                    g: 0.2,
                    b: 0.2
                },
                shininess: 10,
                type: 'light',
                alpha: 1,
                visible: true,
                mode: 0
            },
            id: 'l1'
        },
        {
            fi: 1,
            data: {
                type: 'color',
                alpha: 1,
                visible: true,
                mode: 0,
                color: {
                    r: 0.6789478155339804,
                    g: 0.9999999999999999,
                    b: 0.41413834951456313
                }
            },
            id: 'l2'
        }
    ],
    name: 'Мой материал'
});

// todo Объединяем геометрию и материал, затем добавляем в пространство
let box = new THREE.Mesh(geo, mat);
space.scene.add(box);

// todo Добавление источника света
let light = new THREE.DirectionalLight(0xffffff, 0.7);
light.position.set(10, 10, 10);
space.scene.add(light);

space.scene.add(new THREE.AmbientLight(0xffffff, 0.6));

// todo Установка рендера пространства, когда пространство имеет разрешение на рендеринг, выполняется этот рендеринг
space.renderSpace = () => {
};

Как использовать `DOMMesh` для создания спецэффектов


Давайте напишем немного простого HTML:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Тест DOMMesh</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body,
        html {
            width: 100%;
            height: 100%;
        }
        #canvas {
            top: 0;
            z-index: -1;
            position: fixed;
            width: 100%;
            height: 100%;
            overflow: hidden;
            touch-action: none;
        }
        .item {
            width: 200px;
            height: 200px;
        }
        #meshElement1 {
            position: absolute;
            margin: auto;
            left: -25%;
            right: -25%;
            top: -25%;
            bottom: -25%;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="meshElement1" class="item">
    <div class="item-inner"></div>
</div>
<script src="./index.js" type="module"></script>
</body>
</html>
```Затем напишите немного скрипта:

```js
import * as DF from 'dream-fields';
import { DOMMesh } from 'dream-fields/core/DOMMesh';

export class APP {
    constructor() {
        this.domMesh = []; // массив для хранения объектов DOMMesh, который будет обновлен при каждом рендере
        this.uniforms = {  // расширенные свойства вершинного шейдера (основные свойства уже включены в фреймворк)
            time: {
                value: 0   // значение времени для участия в вычислениях графики
            }
        };
        this.controller = new DF.Controller({
            canvas: document.querySelector('#canvas'),
            pixelRatio: Math.max(1.0, window.devicePixelRatio * 0.8), // ограничение соотношения пикселей для снижения нагрузки на вычисления и повышения производительности
            control: true,
            debugFBO: true
        });
        this.controller.work = true;

        let space = new DF.Space({
            name: 'space',
            deep: 10
        });

        space.renderSpace = () => {
            this.controller.renderer.render(space.scene, this.controller.cameras.perspective);
        };

        space.animate = (time) => {
            // обновление значения времени в свойстве uniforms.time
            this.uniforms.time.value = space.time * 0.001;
            for (let i = 0; i < this.domMesh.length; i++) {
                this.domMesh[i].update(); // обновление базовых свойств каждого объекта DOMMesh
            }
        };

        this.controller.allowRender.add('space');
        this.controller.addSpace(space);

        let dom1 = document.querySelector('#meshElement1');

        if (dom1) {
            this.domMesh.push(
                new DOMMesh(dom1, {
                    // написание фрагментного шейдера
                    fragmentShader: /*glsl*/`
                        uniform float time;
                        varying vec2 vUv;
                        void main(void) {
                            vec3 c;
                            float l, z = time;
                    `
                })
            );
        }
    }
}
``````cpp
for (int i = 0; i < 3; i++) {
    vec2 uv, p = vUv;
    uv = p;
    p -= 0.5;
    z += 0.07;
    l = length(p);
    uv += p / l * (sin(z) + 1.) * abs(sin(l * 9. - z - z));
    c[i] =
}

## Пример (нажмите на изображение для просмотра)

[![Пример 1](https://images.gitee.com/uploads/images/2022/0424/115633_b5ba99ef_5351174.jpeg "1a.jpg")](https://vticn-almighty.github.io/demo/demo1)
```[
![Пример 2](https://images.gitee.com/uploads/images/2022/0424/115825_dc09d9aa_5351174.jpeg "2a.jpg")
](https://vticn-almighty.github.io/demo/demo2)

## Расширенные примеры (нажмите на изображение для просмотра)
### 1. Арктический поезд
Полностью анимированная страница с использованием методики точечной обработки данных (DOMMesh) и постобработки ошибок, а также отслеживания движения мыши для создания эффекта искажения цвета. Данные для точки получены с сайта Sketchfab, а технология основана на [краткой статье](https://medium.com/epicagency/behind-the-scenes-of-we-cargo-3999f5f559c). Важно отметить, что из-за большого размера используемых точечных данных, пожалуйста, будьте терпеливы при загрузке. Кроме того, вы можете ввести **#debug** в адресной строке браузера для активации режима отладки.

![Изображение для описания](preview/polar_train.png)

### 2. Голографический короб
Голографическое искусство, созданное с использованием технологии голографического проявления и рефракции через радужную пленку, а также объемного света. Это совместная работа с Lingo3D, представляет собой 3D-интерактивное цифровое произведение искусства, материалы для которого были взяты из интернета и основаны на множестве технических документов и научных работ. 

<a href="https://vticn-almighty.github.io/demo/holographicBox">
<img height="350" width="300" src="https://gitee.com/vticn/dream-fields/raw/master/preview/holographicBox.png"/>
</a>### 3. Выставка современного искусства
Создание сцены с использованием методики рендера по требованию. Когда пользователь подходит к цифровому произведению искусства, система выдает ему разрешение на рендеринг, которое позволяет объекту постоянно обновляться. При удалении пользователя от объекта разрешение на рендеринг отзывается, и объект остаётся в состоянии, в котором он был при выходе из зоны видимости, тем самым снижая нагрузку на GPU.
```Обратите внимание, что код внутри ```javascript``` не был переведён, так как это согласуется с правилами перевода. Можно ввести **#debug** после адресной строки веб-страницы для активации режима отладки тестирования. После полной загрузки страницы можно войти в режим управления, нажав мышью на любую область экрана. В этом режиме управления перемещение можно контролировать с помощью клавиш со стрелками. 

Обратите внимание! Для упрощения демонстрации поддержка управления с помощью клавиш W, A, S, D отсутствует.

[
![Введите описание изображения](preview/gallery.png)
](https://vticn-almighty.github.io/demo/gallery/)

### 4. Капсула
Создана с использованием материалов frosted glass + matcap. Можно щелкнуть по любой позиции в области видимости, чтобы включить или выключить капсулу. Также можно ввести **#debug** после адресной строки веб-страницы для активации режима отладки тестирования.

[
![Введите описание изображения](preview/capsule.png)
](https://vticn-almighty.github.io/demo/capsule/)

OSCHINA-MIRROR/vticn-dream-fields

Введение

Установка

Начало работы

Как использовать `DOMMesh` для создания спецэффектов

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/vticn-dream-fields .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Введение

Установка

Начало работы

Как использовать DOMMesh для создания спецэффектов

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/vticn-dream-fields

Как использовать `DOMMesh` для создания спецэффектов