123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567 |
- <!DOCTYPE html><html lang="ru"><head>
- <meta charset="utf-8">
- <title>Текстуры</title>
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <meta name="twitter:card" content="summary_large_image">
- <meta name="twitter:site" content="@threejs">
- <meta name="twitter:title" content="Three.js – Текстуры">
- <meta property="og:image" content="https://threejs.org/files/share.png">
- <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
- <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
- <link rel="stylesheet" href="../resources/lesson.css">
- <link rel="stylesheet" href="../resources/lang.css">
- <script type="importmap">
- {
- "imports": {
- "three": "../../build/three.module.js"
- }
- }
- </script>
- </head>
- <body>
- <div class="container">
- <div class="lesson-title">
- <h1>Текстуры</h1>
- </div>
- <div class="lesson">
- <div class="lesson-main">
- <p>Эта статья является частью серии статей о three.js.
- Первая статья - <a href="fundamentals.html">основы Three.js</a>.
- <a href="setup.html">Предыдущая статья</a> была о настройках окружения для этой статьи.
- Если вы их еще не читали, советую вам сделать это.</p>
- <p>Текстуры - это своего рода большая тема в Three.js, и я не уверен на 100%, на каком
- уровне их объяснить, но я постараюсь. По ним есть много тем, и многие из них взаимосвязаны,
- поэтому трудно объяснить все сразу. Вот краткое содержание этой статьи.</p>
- <ul>
- <li><a href="#hello">Hello Texture</a></li>
- <li><a href="#six">6 текстур, разные на каждой грани куба</a></li>
- <li><a href="#loading">Загрузка текстур</a></li>
- <ul>
- <li><a href="#easy">Легкий путь</a></li>
- <li><a href="#wait1">Ожидание загрузки текстуры</a></li>
- <li><a href="#waitmany">Ожидание загрузки нескольких текстур</a></li>
- <li><a href="#cors">Загрузка текстур из других доменов Cross-origin</a></li>
- </ul>
- <li><a href="#memory">Использование памяти</a></li>
- <li><a href="#format">JPG против PNG</a></li>
- <li><a href="#filtering-and-mips">Фильтрация и Mips</a></li>
- <li><a href="#uvmanipulation">Повторение, сдвиг, вращение, наложение</a></li>
- </ul>
- <h2 id="-a-name-hello-a-hello-texture"><a name="hello"></a> Hello Texture</h2>
- <p>Текстуры, <em>как правило</em> представляют собой изображения, которые чаще всего создаются в
- какой-либо сторонней программе, такой как Photoshop или GIMP. Например,
- давайте поместим это изображение на куб.</p>
- <div class="threejs_center">
- <img src="../examples/resources/images/wall.jpg" style="width: 600px;" class="border">
- </div>
- <p>Мы изменим один из наших первых примеров. Все, что нам нужно сделать, это создать <a href="/docs/#api/en/loaders/TextureLoader"><code class="notranslate" translate="no">TextureLoader</code></a>. Вызовите
- <a href="/docs/#api/en/loaders/TextureLoader#load"><code class="notranslate" translate="no">load</code></a> метод с URL-адресом изображения и установите для
- изображения и установите его возвращаемое значение для <code class="notranslate" translate="no">map</code> свойства материала, вместо установки <code class="notranslate" translate="no">color</code>.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const loader = new THREE.TextureLoader();
- +const texture = loader.load( 'resources/images/wall.jpg' );
- +texture.colorSpace = THREE.SRGBColorSpace;
- const material = new THREE.MeshBasicMaterial({
- - color: 0xFF8844,
- + map: texture,
- });
- </pre>
- <p>Обратите внимание, что мы используем <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a> поэтому не нужно никаких источников света.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/textured-cube.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/textured-cube.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
- </div>
- <p></p>
- <h2 id="-a-name-six-a-6-"><a name="six"></a> 6 текстур, разные для каждой грани куба</h2>
- <p>Как насчет 6 текстур, по одной на каждой грани куба?</p>
- <div class="threejs_center">
- <div>
- <img src="../examples/resources/images/flower-1.jpg" style="width: 100px;" class="border">
- <img src="../examples/resources/images/flower-2.jpg" style="width: 100px;" class="border">
- <img src="../examples/resources/images/flower-3.jpg" style="width: 100px;" class="border">
- </div>
- <div>
- <img src="../examples/resources/images/flower-4.jpg" style="width: 100px;" class="border">
- <img src="../examples/resources/images/flower-5.jpg" style="width: 100px;" class="border">
- <img src="../examples/resources/images/flower-6.jpg" style="width: 100px;" class="border">
- </div>
- </div>
- <p>Мы просто создадим 6 материалов и передаем их в виде массива при создании <a href="/docs/#api/en/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a></p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const loader = new THREE.TextureLoader();
- -const texture = loader.load( 'resources/images/wall.jpg' );
- -texture.colorSpace = THREE.SRGBColorSpace;
- -const material = new THREE.MeshBasicMaterial({
- - map: texture,
- -});
- +const materials = [
- + new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-1.jpg')}),
- + new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-2.jpg')}),
- + new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-3.jpg')}),
- + new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-4.jpg')}),
- + new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-5.jpg')}),
- + new THREE.MeshBasicMaterial({map: loadColorTexture('resources/images/flower-6.jpg')}),
- +];
- -const cube = new THREE.Mesh(geometry, material);
- +const cube = new THREE.Mesh(geometry, materials);
- +function loadColorTexture( path ) {
- + const texture = loader.load( path );
- + texture.colorSpace = THREE.SRGBColorSpace;
- + return texture;
- +}
- </pre>
- <p>Оно работает!</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/textured-cube-6-textures.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/textured-cube-6-textures.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
- </div>
- <p></p>
- <p>Однако следует отметить, что по умолчанию единственной геометрией, которая поддерживает
- несколько материалов, является <a href="/docs/#api/en/geometries/BoxGeometry"><code class="notranslate" translate="no">BoxGeometry</code></a> и <a href="/docs/#api/en/geometries/ConeGeometry"><code class="notranslate" translate="no">ConeGeometry</code></a>. В других случаях вам
- нужно будет создать или загрузить пользовательскую геометрию и/или изменить координаты
- текстуры. Гораздо более распространенным является использование
- <a href="https://ru.wikipedia.org/wiki/Текстурный_атлас">Текстурного атласа</a>
- когда вы хотите разрешить несколько изображений для одной геометрии.</p>
- <p>Что такое координаты текстуры? Это данные, добавленные к каждой вершине
- геометрического фрагмента, которые определяют, какая часть текстуры
- соответствует этой конкретной вершине. Мы рассмотрим их, когда
- начнем создавать собственную геометрию.</p>
- <h2 id="-a-name-loading-a-"><a name="loading"></a> Загрузка текстур</h2>
- <h3 id="-a-name-easy-a-"><a name="easy"></a> Легкий путь</h3>
- <p>Большая часть кода на этом сайте использует самый простой способ загрузки текстур.
- Мы создаем <a href="/docs/#api/en/loaders/TextureLoader"><code class="notranslate" translate="no">TextureLoader</code></a> и затем вызываем <a href="/docs/#api/en/loaders/TextureLoader#load"><code class="notranslate" translate="no">load</code></a> метод.
- Возвращающий объект <a href="/docs/#api/en/textures/Texture"><code class="notranslate" translate="no">Texture</code></a>.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const texture = loader.load('../resources/images/flower-1.jpg');
- </pre>
- <p>Важно отметить, что при использовании этого метода наша текстура будет прозрачной,
- пока изображение не будет загружено асинхронно с помощью three.js,
- после чего он обновит текстуру загруженным изображением.</p>
- <p>Это имеет большое преимущество в том, что нам не нужно ждать загрузки текстуры,
- и наша страница начнет отрисовку немедленно. Это, вероятно, хорошо для очень
- многих случаев использования, но если мы хотим, мы можем попросить three.js
- сообщить нам, когда текстура закончила загрузку.</p>
- <h3 id="-a-name-wait1-a-"><a name="wait1"></a> Ожидание загрузки текстуры</h3>
- <p>Чтобы дождаться загрузки текстуры, <code class="notranslate" translate="no">load</code> метод загрузчика текстуры принимает
- обратный вызов, который будет вызван после завершения загрузки текстуры.
- Возвращаясь к нашему верхнему примеру, мы можем дождаться загрузки текстуры,
- прежде чем создавать нашу <a href="/docs/#api/en/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a> и добавлять ее в сцену следующим образом.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const loader = new THREE.TextureLoader();
- loader.load('../resources/images/wall.jpg', (texture) => {
- const material = new THREE.MeshBasicMaterial({
- map: texture,
- });
- const cube = new THREE.Mesh(geometry, material);
- scene.add(cube);
- cubes.push(cube); // добавляем в наш список кубиков для вращения
- });
- </pre>
- <p>Если вы не очистите кеш вашего браузера и у вас не будет медленного соединения,
- вы вряд ли увидите разницу, но будьте уверены, что она ожидает загрузки текстуры.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/textured-cube-wait-for-texture.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/textured-cube-wait-for-texture.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
- </div>
- <p></p>
- <h3 id="-a-name-waitmany-a-"><a name="waitmany"></a> Ожидание загрузки нескольких текстур</h3>
- <p>Чтобы дождаться загрузки всех текстур, вы можете использовать <a href="/docs/#api/en/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a>.
- Создайте его и передайте его в <a href="/docs/#api/en/loaders/TextureLoader"><code class="notranslate" translate="no">TextureLoader</code></a>, а затем установите его <a href="/docs/#api/en/loaders/managers/LoadingManager#onLoad"><code class="notranslate" translate="no">onLoad</code></a>
- свойство для обратного вызова.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const loadManager = new THREE.LoadingManager();
- *const loader = new THREE.TextureLoader(loadManager);
- const materials = [
- new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-1.jpg')}),
- new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-2.jpg')}),
- new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-3.jpg')}),
- new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-4.jpg')}),
- new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-5.jpg')}),
- new THREE.MeshBasicMaterial({map: loader.load('../resources/images/flower-6.jpg')}),
- ];
- +loadManager.onLoad = () => {
- + const cube = new THREE.Mesh(geometry, materials);
- + scene.add(cube);
- + cubes.push(cube); // add to our list of cubes to rotate
- +};
- </pre>
- <p><a href="/docs/#api/en/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a> также имеет <a href="/docs/#api/en/loaders/managers/LoadingManager#onProgress"><code class="notranslate" translate="no">onProgress</code></a> свойство и его
- можно установить в другой функции обратного вызова, чтобы показать индикатор прогресса.</p>
- <p>Сначала мы добавим индикатор выполнения (progress bar) в HTML</p>
- <pre class="prettyprint showlinemods notranslate lang-html" translate="no"><body>
- <canvas id="c"></canvas>
- + <div id="loading">
- + <div class="progress"><div class="progressbar"></div></div>
- + </div>
- </body>
- </pre>
- <p>и CSS для этого</p>
- <pre class="prettyprint showlinemods notranslate lang-css" translate="no">#loading {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- #loading .progress {
- margin: 1.5em;
- border: 1px solid white;
- width: 50vw;
- }
- #loading .progressbar {
- margin: 2px;
- background: white;
- height: 1em;
- transform-origin: top left;
- transform: scaleX(0);
- }
- </pre>
- <p>Затем в коде мы обновим масштаб (scale) <code class="notranslate" translate="no">progressbar</code> в <code class="notranslate" translate="no">onProgress</code>.
- Он вызывается с URL-адресом последнего загруженного элемента, количества загруженных
- элементов и общего количества загруженных элементов.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const loadingElem = document.querySelector('#loading');
- +const progressBarElem = loadingElem.querySelector('.progressbar');
- loadManager.onLoad = () => {
- + loadingElem.style.display = 'none';
- const cube = new THREE.Mesh(geometry, materials);
- scene.add(cube);
- cubes.push(cube); // добавляем в наш список кубиков для вращения
- };
- +loadManager.onProgress = (urlOfLastItemLoaded, itemsLoaded, itemsTotal) => {
- + const progress = itemsLoaded / itemsTotal;
- + progressBarElem.style.transform = `scaleX(${progress})`;
- +};
- </pre>
- <p>Если вы не очистите свой кеш и у вас медленное соединение, вы можете не увидеть полосу загрузки.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/textured-cube-wait-for-all-textures.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/textured-cube-wait-for-all-textures.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
- </div>
- <p></p>
- <h2 id="-a-name-cors-a-cros"><a name="cors"></a> Загрузка текстур из других источников. CROS</h2>
- <p>Чтобы использовать изображения с других серверов, эти сервера должны отправлять правильные заголовки.
- Если этого не произойдет, вы не сможете использовать изображения в three.js и получите ошибку.
- Если вы запускаете сервер, предоставляющий изображения, убедитесь, что он
- <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/CORS"> отправляет правильные заголовки</a>.
- Если вы не управляете сервером, на котором размещены изображения, и он не отправляет заголовки разрешений,
- вы не сможете использовать изображения с этого сервера.</p>
- <p>Например <a href="https://imgur.com">imgur</a>, <a href="https://flickr.com">flickr</a> и
- <a href="https://github.com">github</a> - все заголовки отправки, позволяющие вам использовать изображения,
- размещенные на их серверах в three.js. Большинство других сайтов этого не делают.</p>
- <h2 id="-a-name-memory-a-"><a name="memory"></a> Использование памяти</h2>
- <p>Текстуры часто являются частью приложения three.js, которое использует больше всего памяти.
- Важно понимать, что <em>обычно</em>, текстуры занимают <code class="notranslate" translate="no">width * height * 4 * 1.33</code> байт в памяти. </p>
- <p>Обратите внимание, что никто не говорит о сжатии. Я могу сделать изображение в формате
- .jpg и установить его компрессию очень высокой. Например, допустим, я делал сцену из дома.
- Внутри дома есть стол, и я решил положить эту текстуру дерева на верхнюю поверхность стола.</p>
- <div class="threejs_center"><img class="border" src="../resources/images/compressed-but-large-wood-texture.jpg" align="center" style="width: 300px"></div>
- <p>Это изображение всего 157 Кб, поэтому оно будет загружаться относительно быстро, но на
- <a href="resources/images/compressed-but-large-wood-texture.jpg">самом деле оно имеет размер 3024 x 3761 пикселей</a>.
- Следуя приведенному выше уравнению, это</p>
- <pre class="prettyprint showlinemods notranslate notranslate" translate="no">3024 * 3761 * 4 * 1.33 = 60505764.5
- </pre><p>Это изображение займет <strong>60 Мб ПАМЯТИ!</strong> в three.js.
- Несколько таких текстур, и вам не хватит памяти.</p>
- <p>Я поднял этот вопрос, потому что важно знать, что использование текстур имеет скрытую стоимость.
- Для того чтобы three.js использовал текстуру, он должен передать ее в графический процессор,
- а графический процессор <em>обычно</em> требует, чтобы данные текстуры были несжатыми.</p>
- <p>Мораль этой истории: делайте ваши текстуры небольшими по размеру, а не просто
- маленькими по размеру файла. Небольшой размер файла = быстрая загрузка.
- Маленький в размер = занимает меньше памяти.
- Насколько маленькими вы должны сделать их?
- Настолько, насколько это возможно! И при этом выглядящими так хорошо, как вам нужно.</p>
- <h2 id="-a-name-format-a-jpg-png"><a name="format"></a> JPG против PNG</h2>
- <p>Это почти то же самое, что и обычный HTML, поскольку JPG-файлы имеют сжатие с потерями,
- PNG-файлы имеют сжатие без потерь, поэтому PNG-файлы обычно загружаются медленнее.
- Но PNG поддерживают прозрачность. PNG также, вероятно, является подходящим форматом
- для данных без реалистичных изображений, таких как карты нормалей, и других видов карт без реалистичных изображений,
- которые мы рассмотрим позже.</p>
- <p>Важно помнить, что JPG не использует меньше памяти, чем PNG в WebGL. Смотри выше.</p>
- <h2 id="-a-name-filtering-and-mips-a-mips"><a name="filtering-and-mips"></a> Фильтрация и Mips</h2>
- <p>Давайте применим эту текстуру 16x16</p>
- <div class="threejs_center"><img src="../resources/images/mip-low-res-enlarged.png" class="border" align="center"></div>
- <p>Это куб</p>
- <div class="spread"><div data-diagram="filterCube"></div></div>
- <p>Давайте нарисуем этот кубик действительно маленьким</p>
- <div class="spread"><div data-diagram="filterCubeSmall"></div></div>
- <p>Хммм, я думаю, это трудно увидеть. Давайте увеличим этот крошечный куб</p>
- <div class="spread"><div data-diagram="filterCubeSmallLowRes"></div></div>
- <p>Как GPU узнает, какие цвета нужно сделать для каждого пикселя, который он рисует для крошечного куба?
- Что если куб был настолько мал, что его размер составлял всего 1 или 2 пикселя?</p>
- <p>Вот что такое фильтрация.</p>
- <p>Если бы это был Photoshop, Photoshop усреднил бы почти все пиксели вместе,
- чтобы выяснить, какой цвет сделать эти 1 или 2 пикселя.
- Это было бы очень медленной операцией.
- Графические процессоры решают эту проблему с помощью mipmaps.</p>
- <p>Mips - это копии текстуры, каждая из которых в два раза меньше ширины и в два раза меньше, чем предыдущий мип,
- где пиксели были смешаны, чтобы сделать следующий меньший мип.
- Мипы создаются до тех пор, пока мы не доберемся до 1 х 1 пикселя.
- Поскольку изображение выше всех мипов в конечном итоге будет что-то вроде этого</p>
- <div class="threejs_center"><img src="../resources/images/mipmap-low-res-enlarged.png" class="nobg" align="center"></div>
- <p>Теперь, когда куб нарисован настолько маленьким, что его размер составляет всего 1 или 2 пикселя,
- графический процессор может использовать только наименьший или почти минимальный уровень мипа,
- чтобы решить, какой цвет создать крошечный куб.</p>
- <p>В three вы можете выбрать, что будет происходить, когда текстура рисуется больше,
- чем ее исходный размер, и что происходит, когда она рисуется меньше, чем ее исходный размер.</p>
- <p>Для установки фильтра, когда текстура рисуется больше исходного размера,
- вы устанавливаете <a href="/docs/#api/en/textures/Texture#magFilter"><code class="notranslate" translate="no">texture.magFilter</code></a> свойство либо на <code class="notranslate" translate="no">THREE.NearestFilter</code> либо на
- <code class="notranslate" translate="no">THREE.LinearFilter</code>. <code class="notranslate" translate="no">NearestFilter</code> просто выбрает один пиксель из оригинальной текстуры.
- С текстурой низкого разрешения это дает вам очень пиксельный вид как Minecraft.</p>
- <p><code class="notranslate" translate="no">LinearFilter</code> выбрает 4 пикселя из текстуры, которые находятся ближе всего к тому месту,
- где мы должны выбирать цвет, и смешает их в соответствующих пропорциях относительно того,
- как далеко фактическая точка находится от каждого из 4 пикселей.</p>
- <div class="spread">
- <div>
- <div data-diagram="filterCubeMagNearest" style="height: 250px;"></div>
- <div class="code">Nearest</div>
- </div>
- <div>
- <div data-diagram="filterCubeMagLinear" style="height: 250px;"></div>
- <div class="code">Linear</div>
- </div>
- </div>
- <p>Для настройки фильтра, когда текстура нарисована меньше исходного размера,
- вы устанавливаете для свойства <a href="/docs/#api/en/textures/Texture#minFilter"><code class="notranslate" translate="no">texture.minFilter</code></a> одно из 6 значений.</p>
- <ul>
- <li><p><code class="notranslate" translate="no">THREE.NearestFilter</code></p>
- <p> так же, как и выше. Выбирает ближайший пиксель в текстуре</p>
- </li>
- <li><p><code class="notranslate" translate="no">THREE.LinearFilter</code></p>
- <p> Как и выше, выбирает 4 пикселя из текстуры и смешает их</p>
- </li>
- <li><p><code class="notranslate" translate="no">THREE.NearestMipmapNearestFilter</code></p>
- <p> выбирает соответствующий mip, затем выбирает один пиксель.</p>
- </li>
- <li><p><code class="notranslate" translate="no">THREE.NearestMipmapLinearFilter</code></p>
- <p> выбирает 2 mips, выбирает один пиксель из каждого, смешает 2 пикселя.</p>
- </li>
- <li><p><code class="notranslate" translate="no">THREE.LinearMipmapNearestFilter</code></p>
- <p> выбирает подходящий mip, затем выбирает 4 пикселя и смешает их.</p>
- </li>
- <li><p><code class="notranslate" translate="no">THREE.LinearMipmapLinearFilter</code></p>
- <p>выбирает 2 mips, выбирает 4 пикселя от каждого и смешает все 8 в 1 пиксель.</p>
- </li>
- </ul>
- <p>Вот пример, показывающий все 6 настроек</p>
- <div class="spread">
- <div data-diagram="filterModes" style="
- height: 450px;
- position: relative;
- ">
- <div style="
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: flex-start;
- ">
- <div style="
- background: rgba(255,0,0,.8);
- color: white;
- padding: .5em;
- margin: 1em;
- font-size: small;
- border-radius: .5em;
- line-height: 1.2;
- user-select: none;">click to<br>change<br>texture</div>
- </div>
- <div class="filter-caption" style="left: 0.5em; top: 0.5em;">nearest</div>
- <div class="filter-caption" style="width: 100%; text-align: center; top: 0.5em;">linear</div>
- <div class="filter-caption" style="right: 0.5em; text-align: right; top: 0.5em;">nearest<br>mipmap<br>nearest</div>
- <div class="filter-caption" style="left: 0.5em; text-align: left; bottom: 0.5em;">nearest<br>mipmap<br>linear</div>
- <div class="filter-caption" style="width: 100%; text-align: center; bottom: 0.5em;">linear<br>mipmap<br>nearest</div>
- <div class="filter-caption" style="right: 0.5em; text-align: right; bottom: 0.5em;">linear<br>mipmap<br>linear</div>
- </div>
- </div>
- <p>Одна вещь, на которую нужно обратить внимание - это использование левого верхнего и верхнего среднего
- <code class="notranslate" translate="no">NearestFilter</code> и <code class="notranslate" translate="no">LinearFilter</code>
- не использует mips. Из-за этого они мерцают на расстоянии, потому что графический процессор выбирает
- пиксели из исходной текстуры. Слева выбран только один пиксель, а в середине 4 выбраны и смешаны,
- но этого недостаточно, чтобы придумать хороший представительный цвет. Другие 4 полоски лучше с нижним правым,
- <code class="notranslate" translate="no">LinearMipmapLinearFilter</code> лучший.</p>
- <p>Если вы нажмете на картинку выше, она переключится между текстурой, которую мы использовали выше,
- и текстурой, где каждый уровень мипа имеет свой цвет.</p>
- <div class="threejs_center">
- <div data-texture-diagram="differentColoredMips"></div>
- </div>
- <p>Это делает более понятным, что происходит.
- Вы можете видеть в верхнем левом и верхнем середине первый мип, используемый на всем пути.
- Справа вверху и внизу посередине видно, где используется другой мип.</p>
- <p>Возвращаясь к исходной текстуре, вы можете видеть, что нижний правый угол является самым плавным
- и с высочайшим качеством. Вы можете спросить, почему не всегда использовать этот режим.
- Самая очевидная причина - иногда вы хотите, чтобы вещи были пикселированы в стиле ретро
- или по какой-то другой причине. Следующая наиболее распространенная причина заключается в том,
- что чтение 8 пикселей и их смешивание медленнее, чем чтение 1 пикселя и смешивание.
- Хотя маловероятно, что для одной и той же текстуры будет видна разница в скорости по мере нашего
- углубления в эти статьи, в конечном итоге у нас будут материалы,
- которые используют 4 или 5 текстур одновременно. 4 текстуры * 8 пикселей на текстуру -
- это поиск 32 пикселей для каждого пикселя. Это может быть особенно важно учитывать на мобильных устройствах.</p>
- <h2 id="-a-name-uvmanipulation-a-"><a name="uvmanipulation"></a> Повторение, смещение, вращение, наложение текстуры</h2>
- <p>Текстуры имеют настройки для повторения, смещения и поворота текстуры.</p>
- <p>По умолчанию текстуры в three.js не повторяются. Чтобы установить, повторяется или нет текстура,
- есть 2 свойства: <a href="/docs/#api/en/textures/Texture#wrapS"><code class="notranslate" translate="no">wrapS</code></a> для горизонтального и
- и <a href="/docs/#api/en/textures/Texture#wrapT"><code class="notranslate" translate="no">wrapT</code></a> вертикального повторения.</p>
- <p>They can be set to one of:</p>
- <ul>
- <li><p><code class="notranslate" translate="no">THREE.ClampToEdgeWrapping</code></p>
- <p>Последний пиксель на каждом ребре повторяется всегда</p>
- </li>
- <li><p><code class="notranslate" translate="no">THREE.RepeatWrapping</code></p>
- <p> Текстура повторяется</p>
- </li>
- <li><p><code class="notranslate" translate="no">THREE.MirroredRepeatWrapping</code></p>
- <p> Текстура зеркально повторяется.</p>
- </li>
- </ul>
- <p>Например, чтобы включить повтор в обоих направлениях:</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">someTexture.wrapS = THREE.RepeatWrapping;
- someTexture.wrapT = THREE.RepeatWrapping;
- </pre>
- <p>Повторение устанавливается с помощью свойства [repeat].</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const timesToRepeatHorizontally = 4;
- const timesToRepeatVertically = 2;
- someTexture.repeat.set(timesToRepeatHorizontally, timesToRepeatVertically);
- </pre>
- <p>Смещение текстуры может быть сделано путем установки <code class="notranslate" translate="no">offset</code>.
- Текстуры смещены в единицах, где 1 единица = 1 размер текстуры.
- Другими словами, 0 = без смещения и 1 = смещение на одну полную величину текстуры. </p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const xOffset = .5; // cмещение на половину текстуры
- const yOffset = .25;
- someTexture.offset.set(xOffset, yOffset);`
- </pre>
- <p>Вращение текстуры может быть установлено через свойство <code class="notranslate" translate="no">rotation</code> в радианах, а также свойство
- <code class="notranslate" translate="no">center</code> для выбора центра вращения. По умолчанию используется значение 0,0, которое
- вращается из нижнего левого угла. Подобно смещению, эти единицы имеют размер текстуры,
- поэтому установка их <code class="notranslate" translate="no">.5, .5</code> будет вращаться вокруг центра текстуры.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">someTexture.center.set(.5, .5);
- someTexture.rotation = THREE.MathUtils.degToRad(45);
- </pre>
- <p>Давайте изменим верхний пример выше, чтобы играть с этими значениями</p>
- <p>Сначала мы сохраним ссылку на текстуру, чтобы мы могли манипулировать ею</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const texture = loader.load('../resources/images/wall.jpg');
- const material = new THREE.MeshBasicMaterial({
- - map: loader.load('../resources/images/wall.jpg');
- + map: texture,
- });
- </pre>
- <p>Затем мы снова будем использовать <a href="https://github.com/georgealways/lil-gui">lil-gui</a>
- для обеспечения простого интерфейса.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
- </pre>
- <p>Как мы делали в предыдущих примерах lil-gui, мы будем использовать простой класс,
- чтобы дать lil-gui объект, которым он может манипулировать в градусах,
- но установит свойство в радианах.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">class DegRadHelper {
- constructor(obj, prop) {
- this.obj = obj;
- this.prop = prop;
- }
- get value() {
- return THREE.MathUtils.radToDeg(this.obj[this.prop]);
- }
- set value(v) {
- this.obj[this.prop] = THREE.MathUtils.degToRad(v);
- }
- }
- </pre>
- <p>Нам также нужен класс, который будет конвертировать из строки, например, <code class="notranslate" translate="no">"123"</code>
- в число <code class="notranslate" translate="no">123</code>, так как для Three.js требуются числа для настроек перечисления,
- например, <code class="notranslate" translate="no">wrapS</code> и <code class="notranslate" translate="no">wrapT</code>, а lil-gui использует только строки для перечислений.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">class StringToNumberHelper {
- constructor(obj, prop) {
- this.obj = obj;
- this.prop = prop;
- }
- get value() {
- return this.obj[this.prop];
- }
- set value(v) {
- this.obj[this.prop] = parseFloat(v);
- }
- }
- </pre>
- <p>Используя эти классы, мы можем настроить простой графический интерфейс для настроек выше</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const wrapModes = {
- 'ClampToEdgeWrapping': THREE.ClampToEdgeWrapping,
- 'RepeatWrapping': THREE.RepeatWrapping,
- 'MirroredRepeatWrapping': THREE.MirroredRepeatWrapping,
- };
- function updateTexture() {
- texture.needsUpdate = true;
- }
- const gui = new GUI();
- gui.add(new StringToNumberHelper(texture, 'wrapS'), 'value', wrapModes)
- .name('texture.wrapS')
- .onChange(updateTexture);
- gui.add(new StringToNumberHelper(texture, 'wrapT'), 'value', wrapModes)
- .name('texture.wrapT')
- .onChange(updateTexture);
- gui.add(texture.repeat, 'x', 0, 5, .01).name('texture.repeat.x');
- gui.add(texture.repeat, 'y', 0, 5, .01).name('texture.repeat.y');
- gui.add(texture.offset, 'x', -2, 2, .01).name('texture.offset.x');
- gui.add(texture.offset, 'y', -2, 2, .01).name('texture.offset.y');
- gui.add(texture.center, 'x', -.5, 1.5, .01).name('texture.center.x');
- gui.add(texture.center, 'y', -.5, 1.5, .01).name('texture.center.y');
- gui.add(new DegRadHelper(texture, 'rotation'), 'value', -360, 360)
- .name('texture.rotation');
- </pre>
- <p>Последнее, что следует отметить в этом примере, это то, что если вы измените <code class="notranslate" translate="no">wrapS</code> или
- <code class="notranslate" translate="no">wrapT</code> на текстуре, вы также должны установить <a href="/docs/#api/en/textures/Texture#needsUpdate"><code class="notranslate" translate="no">texture.needsUpdate</code></a>
- так, чтобы Three.js знал, чтобы применить эти настройки. Другие настройки применяются автоматически.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/textured-cube-adjust.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/textured-cube-adjust.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
- </div>
- <p></p>
- <p>Это только один шаг в тему текстур. В какой-то момент мы рассмотрим текстурные координаты,
- а также 9 других типов текстур, которые можно применить к материалам.</p>
- <p>А пока давайте перейдем к <a href="lights.html">свету</a>.</p>
- <!--
- alpha
- ao
- env
- light
- specular
- bumpmap ?
- normalmap ?
- metalness
- roughness
- -->
- <p><script type="module" src="../resources/threejs-textures.js"></script></p>
- <link rel="stylesheet" href="../resources/threejs-textures.css">
- </div>
- </div>
- </div>
- <script src="../resources/prettify.js"></script>
- <script src="../resources/lesson.js"></script>
- </body></html>
|