+
+
+ В анимационной системе three.js вы можете анимировать различные свойства ваших моделей:
+ кости [page:SkinnedMesh skinned and rigged model], морфинговые цели, различные свойства материала (цвета,
+ непрозрачность, логические значения), видимость и преобразования. Анимированные свойства
+ могут быть плавными, исчез, затухал и деформировался. Весовые и временные масштабы
+ различных одновременных анимацию на одном и том же объекте, а также на разных объектах
+ можно менять независимо. Могут быть различные анимации на одном и на разных объектах
+ было синхронизировано.
+
+ Чтобы добиться всего этого в одной однородной системе, используется система анимации
+ three.js [link:https://github.com/mrdoob/three.js/issues/6881 has completely changed in 2015] (остерегайтесь устаревшей информации!), и теперь
+ он имеет архитектуру, аналогичную Unity/Unreal Engine 4. На этой странице представлен
+ краткий обзор основных компонентов системы и то, как они работают вместе.
+
+
+
+ Если вы успешно импортировали анимированный 3D-объект (неважно, есть ли у него кости или
+ цели морфинга или и то, и другое) — например, экспортируя их из Blender с помощью
+ [link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender exporter] и
+ загрузка его в сцену three.js с помощью [page:GLTFLoader] — одного из полей
+ вета должен быть массивом с именем "animations", содержащим [page:AnimationClip AnimationClips]
+ для этой модели (см. список возможных загрузчиков ниже).
+
+ Каждый `AnimationClip` обычно содержит данные для определенной активности объекта. Если
+ сетка — это персонаж, например, для цикла ходьбы может быть один AnimationClip, второй для
+ прыжка, третий для уклонения и так далее.
+
+
+
+ Внутри такого `AnimationClip` данные для каждого анимированного свойства хранятся в
+ отдельный [page:KeyframeTrack]. Предполагая, что объект персонажа имеет [page:Skeleton skeleton],
+ одна дорожка ключевого кадра может хранить данные об изменениях положения кости предплечья.
+ C течением времени разные отслеживают данные об изменении ротации одной и той же кости,
+ третьи положение дорожки, вращение или масштабирование другой кости и так далее. Должно
+ быть ясно, что AnimationClip может состоять из множества таких дорожек.
+
+ Предполагая, что модель имеет цели морфинга (например, один морф мишень показывает
+ дружелюбное лицо, а другая — сердитое лицо), каждая дорожка содержит информация о том,
+ как [page:Mesh.morphTargetInfluences influence] определенного морфа меняется цель во время исполнения клипа.
+
+
+ + Сохраненные данные составляют только основу для анимации — фактическое + воспроизведение контролируется [page:AnimationMixer]. Вы можете представить это не + только как плеер для анимации, но и как как симуляция аппаратного обеспечения, такого как + настоящий микшерная консоль, который может управлять несколькими анимациями + одновременно, смешивая и объединяя их. + +
+ ++ + `AnimationMixer` сам по себе имеет очень мало (общих) свойств и методов, потому что он + можно контролироваться с помощью [page:AnimationAction AnimationActions]. Настроив `AnimationAction` вы можете + пределить, когда определенное `AnimationClip` будет воспроизведено, поставлено на паузу + или остановлнено на одном из микшеров, и если часто клип придется повторять, будь то + должно выполняться с затуханием или масштабированием времени, а также некоторыми + дополнительными вещами, такими как кроссфейдинг или синхронизация. + +
+ ++ + Если вы хотите, чтобы группа объектов получила общее состояние анимации, вы можете + использовать [page:AnimationObjectGroup]. + +
+ ++ Обратите внимание, что не все форматы моделей включают анимацию (особенно OBJ), и что + только некоторые loaders three.js поддерживают последовательности [page:AnimationClip AnimationClip]. + Несколько Loaders, которые поддерживают этот тип анимации: +
+ ++ Обратите внимание, что 3ds max и Maya в настоящее время не могут экспортировать несколько + анимаций (то есть анимации, которые не являются на той же временной шкале) + непосредственно в один файл. +
+ +
+ let mesh;
+
+ // Создайте AnimationMixer и получите список экземпляров AnimationClip
+ const mixer = new THREE.AnimationMixer( mesh );
+ const clips = mesh.animations;
+
+ // Обновляйте mixer для каждого кадра
+ function update () {
+ mixer.update( deltaSeconds );
+ }
+
+ // Воспроизведение определенной анимации
+ const clip = THREE.AnimationClip.findByName( clips, 'dance' );
+ const action = mixer.clipAction( clip );
+ action.play();
+
+ // Воспроизведение всех анимаций
+ clips.forEach( function ( clip ) {
+ mixer.clipAction( clip ).play();
+ } );
+
+
+
+
diff --git a/docs/manual/ru/introduction/Color-management.html b/docs/manual/ru/introduction/Color-management.html
new file mode 100644
index 00000000000000..a1b70be1a3a36a
--- /dev/null
+++ b/docs/manual/ru/introduction/Color-management.html
@@ -0,0 +1,356 @@
+
+
+
+
+
+ + Каждое цветовое пространство представляет собой совокупность нескольких дизайнерских + решений, выбранных вместе для поддержки широкого диапазон цветов и + при этом удовлетворять технические ограничения, связанными с точностью и отображением + технологий. При создании 3D-ресурса или сборке 3D-ресурсов в сцену важно знать, что это за + свойства и как связаны свойства одного цветового пространства к другим цветовым + пространствам сцены. +
+ +
+ + Рассмотрим два очень распространенных цветовых пространства: [page:SRGBColorSpace] ("sRGB") и + [page:LinearSRGBColorSpace] ("Линейный-sRGB"). Оба используют одни и те же основные цвета и + точки белого, и, следовательно, они имеют одинаковую цветовую гамму. В обоих используется цветовая модель + RGB. Они отличаются только передаточными функциями — Linear-sRGB линейны по отношению к + физической интенсивности света. sRGB использует нелинейные функции передачи sRGB и + больше напоминает способ восприятия света человеческим глазом и чувствительности + обычных устройств отображения. +
+ ++ Эта разница важна. Расчеты освещения и другие операции рендеринга должны обычно + происходить в линейном цветовом пространстве. Однако линейные цвета менее эффективны + для хранения в буфере изображений или кадров и выглядят некорректно при просмотре + человеком-наблюдателем. В результате входные текстуры и окончательное визуализированное + изображение обычно будет использовать нелинейное цветовое пространство sRGB. +
+ +++ ++ ℹ️ ВНИМАНИЕ: Хотя некоторые современные дисплеи поддерживают более широкий цветовой охват, + например Display-P3, графические API веб-платформы во многом полагаются на sRGB. Приложения, + использующие three.js. Сегодня обычно используют только цветовые пространства sRGB и Linear- + sRGB. +
+
+ Линейные рабочие процессы — необходимые для современных методов рендеринга — обычно + включают в себя более одного цветового пространства, каждое из которых назначено на + определенную роль. Линейные и нелинейные цветовые пространства подходят для разных + ролей, как описано ниже. +
+ ++ Цвета, поставляемые в three.js — из палитр цветов, текстур, 3D-моделей и других источников + — каждый из них имеет связанное цветовое пространство. Т.е., у кого еще нет рабочего цвета + Linear-sRGB. Пространство должно быть преобразовано, а текстурам присвоено правильное + назначение texture.colorSpace. Определенные преобразования (для шестнадцатеричных + цветов и цветов CSS в sRGB) могут выполняться автоматически, если API + THREE.ColorManagement включается перед инициализацией цветов: +
+ +
+THREE.ColorManagement.enabled = true;
+
+
+ + THREE.ColorManagement включен по умолчанию. +
+ +++ ++ ⚠️ ВНИМАНИЕ: Многие форматы 3D-моделей работают неправильно или некорректно определяя + информацию о цветовом пространстве. Хотя three.js пытается справиться с большинством случаев, + возникают проблемы являющимися общими для старых форматов файлов. Для достижения наилучших + результатов используйте glTF 2.0 ( GLTFLoader ) и заранее протестируйте 3D-модели в онлайн-средствах + просмотра, чтобы убедиться в правильности самого ресурса. +
+
+ Рендеринг, интерполяция и многие другие операции должны выполняться в линейном + рабочем цветовом пространстве, в котором компоненты RGB пропорциональны + физическому освещению. В three.js рабочее цветовое пространство является Linear-sRGB. +
+ ++ Вывод на устройство отображения, изображения или видео может включать преобразование + из открытого домена рабочее цветовое пространство Linear-sRGB в другое цветовое + пространство. Преобразование определяется следующим образом ([page:WebGLRenderer.outputColorSpace]). + Когда используешь постобработку, требуется OutputPass. +
+ +++ ++ ⚠️ ВНИМАНИЕ: Цели рендеринга могут использовать либо sRGB, либо Linear-sRGB. sRGB делает лучшее + использование ограниченной точности. В закрытой области для sRGB часто достаточно 8 бит. Тогда как + для Linear-sRGB может потребоваться ≥12 бит (полуплавающее число).Если для ступеней водопровода требуется + линейный ввод данных в формате sRGB, дополнительные преобразования могут иметь небольшую стоимость + на производительность. +
+
+ Пользовательские материалы на основе [page:ShaderMaterial] и [page:RawShaderMaterial] должны + реализовывать собственное преобразование выходного цветового пространства. Для случаев + `ShaderMaterial`, добавив `colorspace_fragment` фрагмент шейдера во фрагментный шейдер + `main()` функции должно быть достаточно. +
+ ++ Методы чтения или изменения экземпляров [page:Color] предполагают, что данные уже находятся в + рабочем цветовом пространстве three.js, Linear-sRGB. RGB и HSL компоненты являются + прямыми представления данных, хранящихся экземпляром Color, и никогда не преобразуются + неявно. Цветовые данные могут быть явно преобразованы с помощью .convertLinearToSRGB() + или .convertSRGBToLinear(). +
+ +
+ // RGB компоненты (без изменений).
+ color.r = color.g = color.b = 0.5;
+ console.log( color.r ); // → 0.5
+
+ // Ручное преобразование.
+ color.r = 0.5;
+ color.convertSRGBToLinear();
+ console.log( color.r ); // → 0.214041140
+
+
+ + Если ColorManagement.enabled = true установлено (рекомендуется), то некоторые преобразования + производятся автоматически. Поскольку шестнадцатеричные цвета и цвета CSS обычно имеют + формат sRGB, [page:Color] методы автоматически преобразуют эти входные данные из sRGB в Linear- + sRGB в установщиках или конвертируют из Linear-sRGB в sRGB при возврате + шестнадцатеричного или CSS-вывода из геттеров. +
+ +
+ // Шестнадцатеричное преобразование.
+ color.setHex( 0x808080 );
+ console.log( color.r ); // → 0.214041140
+ console.log( color.getHex() ); // → 0x808080
+
+ // CSS преобразование.
+ color.setStyle( 'rgb( 0.5, 0.5, 0.5 )' );
+ console.log( color.r ); // → 0.214041140
+
+ // Переопределить преобразование с помощью аргумента 'colorSpace'.
+ color.setHex( 0x808080, LinearSRGBColorSpace );
+ console.log( color.r ); // → 0.5
+ console.log( color.getHex( LinearSRGBColorSpace ) ); // → 0x808080
+ console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC
+
+
+ + Если отдельный цвет или текстура настроены неправильно, они будут выглядеть темнее или + светлее, чем ожидалось. Если выходное цветовое пространство средства визуализации настроено + неправильно, вся сцена может отображаться темнее (например, отсутствует преобразование в + sRGB) или светлее (например, двойное преобразование в sRGB с постобработкой). В каждом + конкретном случае проблема может быть неоднородной, и простое увеличение/уменьшение освещенности + её не решит эту проблему. +
+ ++ Более тонкая проблема возникает, когда оба цветовых пространства, входные и выходные цветовые + пространства выбраны неправильно — общий уровень яркости может быть в порядке, но цвета могут измениться + неожиданно при разном освещении или затенении может показаться более размытым и менее + мягким, чем предполагалось. Эти две ошибки не являются правильными, и важно, чтобы + работающие цветовое пространство должно быть линейным ("относится к сцене"), а выходное + цветовое пространство быть нелинейным ("относится к дисплею"). +
+ ++ В этом руководстве представлен краткий обзор основных компонентов веб-приложения на VR + сделанного с three.js. +
+ ++ Сначала вам нужно подключить [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js] + в ваш проект. +
+ +
+import { VRButton } from 'three/addons/webxr/VRButton.js';
+
+
+ + *VRButton.createButton()* делает две важные вещи: создает кнопку, которая указывает + на VR совместимость. Кроме того, он инициирует сеанс VR, если + пользователь активирует кнопку. Единственное, что тебе нужно добавить следующую + строку кода в ваше приложение. +
+ +
+document.body.appendChild( VRButton.createButton( renderer ) );
+
+
+ + Далее вы должны указать свой экземпляр `WebGLRenderer`, чтобы включить рендеринг XR. +
+ +
+renderer.xr.enabled = true;
+
+
+ + Наконец, вам нужно настроить цикл анимации, поскольку мы не можем использовать наши + хорошо известную функцию *window.requestAnimationFrame()*. Для VR-проектов мы используем + [page:WebGLRenderer.setAnimationLoop setAnimationLoop]. Минимальный код выглядит следующим образом: +
+ +
+renderer.setAnimationLoop( function () {
+
+ renderer.render( scene, camera );
+
+} );
+
+
+
+ Взгляните на один из официальных примеров WebVR, чтобы увидеть этот рабочий процесс в действии.
+
+ [example:webxr_xr_ballshooter WebXR / XR / ballshooter]
+ [example:webxr_xr_cubes WebXR / XR / cubes]
+ [example:webxr_xr_dragging WebXR / XR / dragging]
+ [example:webxr_xr_paint WebXR / XR / paint]
+ [example:webxr_xr_sculpt WebXR / XR / sculpt]
+ [example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]
+ [example:webxr_vr_panorama WebXR / VR / panorama]
+ [example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]
+ [example:webxr_vr_sandbox WebXR / VR / sandbox]
+ [example:webxr_vr_video WebXR / VR / video]
+
+ Одним из важных аспектов повышения производительности и предотвращения утечек памяти в + вашем приложении является удаление неиспользуемых объектов библиотеки. Всякий раз, + когда вы создаете экземпляр типа *three.js*, вы выделяете определенный объем памяти. + Однако *three.js* создает для конкретных объектов такие как геометрия или материалы, + связанные с WebGL объекты, такие как буферы или программы шейдеров, необходимые для + рендеринга. Важно подчеркнуть, что эти объекты не освобождаются автоматически. Вместо + этого приложению приходится использовать специальный API для освобождения таких + ресурсов. В этом руководстве представлен краткий обзор того, как используется этот API и + какие объекты актуальны в этом контексте. +
+ ++ Геометрия обычно представляет информацию о вершинах, определенную как набор атрибутов. + *three.js* внутренне создает объект типа [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer] для каждого атрибута. Эти объекты + удаляются только в том случае, если вы вызываете [page:BufferGeometry.dispose](). Если геометрия в + вашем приложении устарела, выполните этот метод, чтобы освободить все связанные ресурсы. +
+ ++ Материал определяет, как визуализируются объекты. *three.js* использует информацию + определения материала для создания программы шейдера для рендеринга. Шейдерные + программы можно удалить только в том случае, если соответствующий материал удален. Из + соображений производительности *three.js* пытается повторно использовать существующие + шейдерные программы, если это возможно. Таким образом, шейдерная программа удаляется + только в том случае, если удалены все связанные с ней материалы. Утилизацию материала + можно указать с помощью выполнения [page:Material.dispose](). +
+ ++ Удаление материала не влияет на текстуры. Они обрабатываются отдельно, поскольку одна + текстура может использоваться несколькими материалами одновременно. Всякий раз, когда + вы создаете экземпляр [page:Texture], Three.js внутренне создает экземпляр [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture]. Подобно + буферам, этот объект можно удалить только вызовом [page:Texture.dispose](). +
+ ++ Если вы используете `ImageBitmap`, в качестве источника данных текстуры, вам необходимо + вызвать [link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap/close ImageBitmap.close]() на уровне приложения, чтобы избавиться от всех ресурсов + процессора. Автоматический вызов `ImageBitmap.close()` в [page:Texture.dispose]() невозможно, так + как растровое изображение становится непригодным для использования, и у движка нет + возможности узнать, используется ли растровое изображение где-либо ещё. +
+ ++ Объекты типа [page:WebGLRenderTarget] не только выделяют экземпляр [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture], но и + [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer]s и [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderbuffer WebGLRenderbuffer]s для реализации пользовательских направлений + рендеринга. Эти объекты освобождаются только путем выполнения [page:WebGLRenderTarget.dispose](). +
+ ++ В каталоге примеров есть и другие классы, такие как элементы управления или этапы + постобработки, которые предоставляют `dispose()` методы для удаления внутренних + прослушивателей событий или визуализировать цели. В общем, рекомендуется проверить API + или документацию класса и следить за `dispose()`. Если он есть, вам следует использовать его + при уборке. +
+ ++ Сообщество задавало этот вопрос много раз, поэтому важно прояснить этот вопрос. Дело в + том, что *three.js* не знает ни времени жизни, ни области действий созданных пользователем + объектов, таких как геометрия или материалы. Это ответственность приложения. Например, + даже если материал в настоящее время не используется для рендеринга, это может быть + необходимо для следующего кадра. Поэтому, если приложение решает, что определенный + объект может быть удален, оно должно уведомить об этом движок, вызвав соответствующий + `dispose()` метод. +
+ ++ Нет, вам нужно явно удалить геометрию и материал с помощью *dispose()*. Имейте в виду, что + геометрия и материалы могут быть общими для 3D-объектов, таких как сетки. +
+ ++ Да. Можно оценить [page:WebGLRenderer.info], специальное свойство средства рендеринга, + содержащее ряд статистической информации о памяти видеокарты и процесса рендеринга. + Помимо прочего, он сообщает вам, сколько текстур, геометрии и шейдерных программ + хранится внутри. Если вы заметили проблемы с производительностью в вашем приложении + рекомендуется отладить это свойство, чтобы легко выявить утечку памяти. +
+ ++ Внутренние ресурсы для текстуры выделяются только в том случае, если изображение + полностью загружено. Если вы разместите текстуру до загрузки изображения, ничего не + произойдет. Ресурсы не были выделены, поэтому очистка также не требуется. +
+ ++ Это зависит. Для геометрии, материалов, текстур, целей рендеринга и проходов постобработки + удаленные внутренние ресурсы могут быть созданы движком заново. Таким образом, ошибок + во время выполнения не произойдет, но вы можете заметить негативное влияние на + производительность текущего кадра, особенно когда необходимо скомпилировать программы + шейдеров. Элементы управления и средства визуализации являются исключением. + Экземпляры этих классов нельзя использовать после `dispose()`, когда он был вызван. В этом + случае вам придется создать новые экземпляры. +
+ ++ В общем, однозначных рекомендаций по этому поводу нет. Это сильно зависит от конкретного + варианта использования при вызове `dispose()` если это уместно. Важно это подчеркнуть не + всегда необходимо постоянно удалять объекты. Хорошим примером является игра, состоящая + из нескольких уровней. Хорошее место для утилизации объектов — это когда переключение + уровня приложения могло проходить через старую сцену и удалять все устаревшие материалы, + геометрии и текстуры. Как упоминалось в предыдущем разделе, это не выдать ошибку + времени выполнения, если вы удалите объект, который на самом деле все еще используется. + Самое худшее, что может случиться, — это падение производительности на один кадр. +
+ +
+ [example:webgl_test_memory WebGL / test / memory]
+ [example:webgl_test_memory2 WebGL / test / memory2]
+
Все объекты по умолчанию автоматически обновляют свои матрицы, если они были добавлены + в сцену с помощью +
+
+const object = new THREE.Object3D();
+scene.add( object );
+
+ или если они являются дочерними элементами другого объекта, добавленного в сцену:
+
+const object1 = new THREE.Object3D();
+const object2 = new THREE.Object3D();
+
+object1.add( object2 );
+scene.add( object1 ); //object1 и object2 автоматически обновят свои матрицы
+
+ Однако если вы знаете, что объект будет статическим, вы можете отключить это и обновить + матрицу преобразования вручную только при необходимости. +
+
+object.matrixAutoUpdate = false;
+object.updateMatrix();
+
+
+ + BufferGeometries хранит информацию (такую как позиции вершин, индексы граней, нормали, + цвета, UV и любые пользовательские атрибуты) в [page:BufferAttribute buffers] - то есть, + [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays]. + Это делает их в целом более быстрыми, чем стандартные геометрии, но более сложную + работу с ними. +
++ Что касается обновления BufferGeometries, самое важное, что нужно понять, это то, что + вы не можете изменить размер буферов (это очень затратно, по сути, эквивалентно созданию новой геометрии). + Однако вы можете обновить содержимое буферов. +
++ Это означает, что если вы знаете, что атрибут вашей BufferGeometry будет расти, скажем, количества вершин, + вы должны предварительно выделить буфер, достаточно большой для хранения любых новых вершин, которые могут быть созданы. + Конечно, это также означает, что для вашей буферной геометрии будет установлен максимальный размер - то есть + невозможно создать буферную геометрию, которая могла бы эффективно расширяться бесконечно. +
++ Мы будем использовать пример строки, которая расширяется во время рендеринга. Мы выделим пространство + в буфере для 500 вершин, но сначала нарисуйте только две, используя [page:BufferGeometry.drawRange]. +
+
+const MAX_POINTS = 500;
+
+// geometry
+const geometry = new THREE.BufferGeometry();
+
+// attributes
+const positions = new Float32Array( MAX_POINTS * 3 ); // 3 числа (x, y и z) на точку
+geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+
+// draw range
+const drawCount = 2; // нарисуйте только первые 2 точки
+geometry.setDrawRange( 0, drawCount );
+
+// material
+const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
+
+// line
+const line = new THREE.Line( geometry, material );
+scene.add( line );
+
+ + Далее мы случайным образом добавим точки к линии, используя такой шаблон: +
+
+const positionAttribute = line.geometry.getAttribute( 'position' );
+
+let x = 0, y = 0, z = 0;
+
+for ( let i = 0; i < positionAttribute.count; i ++ ) {
+
+ positionAttribute.setXYZ( i, x, y, z );
+
+ x += ( Math.random() - 0.5 ) * 30;
+ y += ( Math.random() - 0.5 ) * 30;
+ z += ( Math.random() - 0.5 ) * 30;
+
+}
+
+ + Если вы хотите изменить количество точек, отображаемых после первого рендеринга, сделайте следующее: +
+
+line.geometry.setDrawRange( 0, newValue );
+
+ + Если вы хотите изменить значения данных о положении после первого рендеринга, вам необходимо + установить needsUpdate флаг следующим образом: +
+
+positionAttribute.needsUpdate = true; // требуется после первого рендеринга
+
+
+ + Если вы измените значения данных о положении после первоначального рендеринга, вам может потребоваться пересчитать + ограничивающие объемы, чтобы другие функции движка, такие как отсечение усеченной пирамиды или помощники, работали правильно. +
+
+line.geometry.computeBoundingBox();
+line.geometry.computeBoundingSphere();
+
+
+ + [link:https://jsfiddle.net/t4m85pLr/1/ Here is a fiddle] показывающий анимированную строку, которую вы можете адаптировать к своему + варианту использования. +
+ +
+ [example:webgl_custom_attributes WebGL / custom / attributes]
+ [example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
+
Все значения униформы можно свободно менять (например, цвета, текстуры, непрозрачность и + т. д.), значения отправляются в шейдер каждый кадр. +
+Также параметры, связанные с GLstate, могут меняться в любое время (DepthTest, blending, + PolygonOffset и т.д.). +
+Следующие свойства нелегко изменить во время выполнения (после того, как материал + визуализируется хотя бы один раз): +
+Изменения в них требуют создания новой шейдерной программы. Вам нужно будет установить
+material.needsUpdate = true
+
+ Имейте в виду, что это может быть довольно медленно и вызывать рывки в частоте кадров + (особенно в Windows, поскольку компиляция шейдеров в DirectX происходит медленнее, чем в + OpenGL). +
+Для более плавного взаимодействия вы можете в некоторой степени имитировать изменения в + этих функциях, используя «фиктивные» значения, такие как освещение нулевой интенсивности, + белые текстуры или туман нулевой плотности. +
+Вы можете свободно менять материал, используемый для фрагментов геометрии, однако вы не + можете изменить способ разделения объекта на фрагменты (в соответствии с материалами + грани). +
+Если количество материалов/кусков небольшое, можно предварительно разделить объект + (например, волосы/лицо/тело/верхняя одежда/штаны для человека, перед/бока/верх/стекло/ + покрышка/салон для автомобиля). +
+Если число велико (например, каждое лицо потенциально может быть разным), рассмотрите + другое решение, например, использование атрибутов/текстур для создания различного вида + лица. +
+
+ [example:webgl_materials_car WebGL / materials / car]
+ [example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
+
Текстуры изображения, холста, видео и данных должны иметь следующий флаг, если они + изменяются:
+
+ texture.needsUpdate = true;
+
+ Цели рендеринга обновляются автоматически.
+ +
+ [example:webgl_materials_video WebGL / materials / video]
+ [example:webgl_rtt WebGL / rtt]
+
Положение камеры и цель обновляются автоматически. Если вам нужно изменить
++ тогда вам нужно будет пересчитать матрицу проекции: +
+
+camera.aspect = window.innerWidth / window.innerHeight;
+camera.updateProjectionMatrix();
+
+ + `InstancedMesh` это класс для удобного доступа к рендерингу экземпляров в `three.js`. + Некоторые функции библиотеки, такие как отсечение усеченного представления или + Приведение лучей основано на современных ограничивающих объемах (ограничивающей + сфере и ограничивающей рамке). Из-за того, как `InstancedMesh` работает, класс имеет свои + собственные [page:InstancedMesh.boundingBox boundingBox] и [page:InstancedMesh.boundingSphere boundingSphere], которые заменяют ограничивающие + объемы на уровне геометрии. +
++ Подобно геометрии, вам придется пересчитывать ограничивающую рамку и сферу всякий раз, + когда вы меняете базовые данные. В контексте `InstancedMesh`, что происходит, когда вы + преобразуете экземпляры с помощью [page:InstancedMesh.setMatrixAt setMatrixAt](). Вы можете использовать тот же шаблон, + что и для геометрии. +
+
+instancedMesh.computeBoundingBox();
+instancedMesh.computeBoundingSphere();
+
+
+ + `SkinnedMesh` следует тем же принципам, что и `InstancedMesh` в контексте ограничивающих + объемов. Это означает, что класс имеет свою собственную версию [page:SkinnedMesh.boundingBox boundingBox] и + [page:SkinnedMesh.boundingSphere boundingSphere] для корректного размещения анимированных сеток. При вызове + `computeBoundingBox()` и `computeBoundingSphere()`, класс вычисляет соответствующие + ограничивающие объемы на основе текущего трансформации костей (или, другими словами, + текущее состояние анимации). +
++ Многие приложения three.js отображают свои 3D-объекты непосредственно на экране. Однако + иногда вам нужно применить один или несколько графических эффектов, такие как глубина + резкости, цветение, зернистость пленки или различные типы сглаживания. Постобработка — + это широко используемый подход к реализации таких эффектов. Сначала сцена + визуализируется в целевой объект рендеринга, который представляет собой буфер в памяти + видеокарты. На следующем этапе один или несколько проходов постобработки применяют + фильтры и эффекты к буферу изображения, прежде чем оно в конечном итоге будет обработано + на экран. +
++ three.js предоставляет комплексное решение для постобработки через [page:EffectComposer] для + реализации такого рабочего процесса. +
+ ++ Первым шагом в этом процессе является импорт всех необходимых файлов из каталога + примеров. Руководство предполагает, что вы используете официальную [link:https://www.npmjs.com/package/three npm package] three.js. + Для нашей базовой демонстрации в этом руководстве нам нужны следующие файлы. +
+ +
+ import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+ import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+ import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
+ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+
+
+ + После успешного импорта всех файлов мы можем создать наш composer, + передав экземпляр [page:WebGLRenderer]. +
+ +
+ const composer = new EffectComposer( renderer );
+
+
+ + При использовании composer, необходимо изменить цикл анимации приложения. Вместо + вызова метода рендеринга [page:WebGLRenderer], мы теперь используем соответствующий аналог + [page:EffectComposer]. +
+ +
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ composer.render();
+
+ }
+
+
+ + Наш composer теперь готов, поэтому можно настроить цепочку проходов постобработки. Эти + проходы отвечают за создание окончательного визуального результата приложения. Они + обрабатываются в порядке их добавления/вставки. В нашем примере сначала выполняется + экземпляр `RenderPass`, затем экземпляр `GlitchPass` и наконец `OutputPass`. Последний + включенный проход в цепочке автоматически отображается на экране. Настройка пропусков + выглядит так: +
+ +
+ const renderPass = new RenderPass( scene, camera );
+ composer.addPass( renderPass );
+
+ const glitchPass = new GlitchPass();
+ composer.addPass( glitchPass );
+
+ const outputPass = new OutputPass();
+ composer.addPass( outputPass );
+
+
+ + `RenderPass` обычно размещается в начале цепочки, чтобы предоставить визуализированную + сцену в качестве входных данных для следующего шага постобработки. В нашем случае + `GlitchPass` собирается использовать эти данные изображения для применения эффекта диких + сбоев. `OutputPass` обычно является последним этапом в цепочке, которая выполняет + преобразование цветового пространства sRGB и отображение тонов. Посмотрите этот + [link:https://threejs.org/examples/webgl_postprocessing_glitch live example] чтобы увидеть его в действии. +
+ ++ Вы можете использовать широкий спектр предопределенных проходов постобработки, + предоставляемых движком. Они расположены в каталоге [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing]. +
+ ++ Иногда вам нужно написать собственный шейдер постобработки и включить его в цепочку + проходов постобработки. Для этого сценария вы можете использовать `ShaderPass`. После + импорта файла и вашего пользовательского шейдера вы можете использовать следующий код + для настройки прохода. +
+ +
+ import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+ import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
+
+ // позже в вашей процедуре инициализации
+
+ const luminosityPass = new ShaderPass( LuminosityShader );
+ composer.addPass( luminosityPass );
+
+
+ + В репозитории имеется файл [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader], который представляет собой хороший стартовый код + для вашего собственного шейдера. `CopyShader` просто копирует содержимое изображения из + [page:EffectComposer] буфера чтения в свой буфер записи без применения каких-либо эффектов. +
+ + + diff --git a/docs/manual/ru/introduction/Matrix-transformations.html b/docs/manual/ru/introduction/Matrix-transformations.html new file mode 100644 index 00000000000000..c89649bef80cb2 --- /dev/null +++ b/docs/manual/ru/introduction/Matrix-transformations.html @@ -0,0 +1,90 @@ + + + + ++ Three.js использует `matrices` для кодирования 3D-преобразований — перемещения + (положения), вращения и масштабирования. Каждый экземпляр [page:Object3D] имеет [page:Object3D.matrix matrix], В + которой хранятся положение, вращение и масштаб объекта. На этой странице описано, как + обновить преобразование объекта. +
+ ++ Существует два способа обновить преобразование объекта: +
+
+object.position.copy( start_position );
+object.quaternion.copy( quaternion );
+
+ По умолчанию `matrixAutoUpdate` свойство установлено true, и матрица будет автоматически
+ пересчитана. Если объект статический или вы хотите вручную контролировать время
+ пересчета, то лучшую производительность можно получить, установив свойство false:
+
+object.matrixAutoUpdate = false;
+
+ И после изменения каких-либо свойств обновите матрицу вручную:
+
+object.updateMatrix();
+
+
+object.matrix.setRotationFromQuaternion( quaternion );
+object.matrix.setPosition( start_position );
+object.matrixAutoUpdate = false;
+
+ Обратите внимание, что `matrixAutoUpdate` должен быть установлен на `false` в этом случае,
+ и вам следует убедиться, что вы не вызываете `updateMatrix`. Вызывая `updateMatrix` заблокируется
+ внесенная вручную изменения в матрицу, пересчитывая матрицу из `position`, `scale`, и так
+ далее.
+ + Объект [page:Object3D.matrix matrix] хранит преобразование объекта относительно объекта [page:Object3D.parent parent]; чтобы + получить преобразование объекта в мировые кооординаты, вы должны получить доступ к [page:Object3D.matrixWorld]. +
++ Когда изменяется преобразования родительского или дочернего объекта, вы можете запросить + обновление [page:Object3D.matrixWorld matrixWorld] дочернего объекта, вызвав [page:Object3D.updateMatrixWorld updateMatrixWorld](). +
++ Объект можно преобразовать с помощью [page:Object3D.applyMatrix4]. Примечание: На самом деле + этот метод основан на [page:Matrix4.decompose], и не все матрицы можно разложить таким образом. + Например, если объект имеет неравномерно масштабируемый родительский объект, то + мировая матрица объекта может быть неразложимой, и этот метод может оказаться + неприемлемым. +
+ ++ Three.js предоставляет два способа представления трехмерного вращения: [page:Euler Euler angles] и + [page:Quaternion Quaternions], а также методы преобразования между ними. Euler angles подвержены + проблеме, называемой "замком кардана", когда определенные конфигурации могут терять степень свободы (предотвращая вращение объекта вокруг одной оси). По этой причине + вращения объекта всегда хранится в памяти объекта [page:Object3D.quaternion quaternion]. +
++ Предыдущие версии библиотеки включали свойство `useQuaternion` объекта, которое, если + установлено значение false, это приведет к тому, что [page:Object3D.matrix matrix] будет рассчитываться под Euler + angles. Эта практика устарела — вместо этого вам следует использовать метод + [page:Object3D.setRotationFromEuler setRotationFromEuler], который обновит кватернион. +
+ + +