documentation.help

Three.js

From three.js

previous page

Справочник разработчика

Полифиллы

«Полифилл» (англ. «polyfill» - poly - много, fill - наполнять, заполнять)
... читать далее
— это библиотека, которая добавляет в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными. Или, если говорить о современных браузерах, то они тоже не все идут «в ногу», всегда какие-то современные возможности реализуются сначала в одном, потом в другом. Так вот, первая часть слова говорит о привлечении любого числа технологий, то есть с поставленной задачей можно справиться не только посредством JavaScript, а вторая часть подразумевает заполнение той «дыры» браузера, в которой и должна находиться реализуемая таким образом технология.

Полифиллы позволяют исправлять ошибки в конкретном API или добавлять в веб-браузер функционал, который по умолчанию частично или полностью им не поддерживается. Полифиллы не создают лишних зависимостей и могут быть легко удалены, когда они больше не нужны.
Обычно полифилл состоит из двух частей:
Проверка, есть ли встроенная возможность.
Эмуляция, если её нет.
По мнению
во время работы над книгой «Введение в HTML5»')" onmouseout="hide()">автора термина, ассоциация с заделыванием трещин и дыр в стенах вполне подходит для визуализации того, как полифиллы в веб-программировании «ремонтируют» браузер.
В three.js включены полифиллы для следующих функций и констант. 

Number.EPSILON
Разница между единицей и наименьшим значением, большим единицы, которую можно представить в виде числа.
Справка MDN (Mozilla Developer Network - сеть разработчиков Mozilla),
то же и там же, но на русском языке.

Math.sign( x )
Если аргумент является положительным числом, отрицательным числом, положительным нулем или отрицательным нулем, функция возвратит соответственно 1, -1, 0 или -0. В противном случае возвращается значение NaN.
Справка MDN (Mozilla Developer Network - сеть разработчиков Mozilla),
то же и там же, но на русском языке.

Function.prototype.name( x )
Возвращает имя функции или (до внедрения ES6) пустую строку для безымянных функций.
Справка MDN (Mozilla Developer Network - сеть разработчиков Mozilla),
то же и там же, но на русском языке.

Object.assign( target, ...sources )
Метод Object.assign() используется для копирования значений всех имеющихся перечислимых свойств одного или нескольких исходных объектов в целевой объект (target). Метод возвратит целевой объект.
Справка MDN (Mozilla Developer Network - сеть разработчиков Mozilla),
то же и там же, но на русском языке.

Исходники

Polyfills.js на github.com


WebGLRenderer

WebGLProgram

Конструктор для программы GLSL, отправляемой в вершинные и фрагментарные шейдеры, вклюяая стандартные атрибуты и униформы.

Встроенные униформы и атрибуты

Вершинный шейдер (безусловный):
// = object.matrixWorld
uniform mat4 modelMatrix;

// = camera.matrixWorldInverse * object.matrixWorld
uniform mat4 modelViewMatrix;

// = camera.projectionMatrix
uniform mat4 projectionMatrix;

// = camera.matrixWorldInverse
uniform mat4 viewMatrix;

// = inverse transpose of modelViewMatrix (обратная перестановка modelViewMatrix)
uniform mat3 normalMatrix;

// = camera position in world space (положение камеры в мировом пространстве)
uniform vec3 cameraPosition;

// default vertex attributes provided by Geometry and BufferGeometry
// стандартные атрибуты вершин, предоставленные Geometry и BufferGeometry
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
attribute vec2 uv2;
Обратите внимание, что таким образом можно рассчитать положение вершины в вершинном шейдере посредством: 
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
или же 
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
Шейдер вершин (условный):
#ifdef USE_COLOR
  // vertex color attribute (атрибут цвета вершины)
	attribute vec3 color;
#endif

#ifdef USE_MORPHTARGETS

  attribute vec3 morphTarget0;
  attribute vec3 morphTarget1;
  attribute vec3 morphTarget2;
  attribute vec3 morphTarget3;

  #ifdef USE_MORPHNORMALS

    attribute vec3 morphNormal0;
    attribute vec3 morphNormal1;
    attribute vec3 morphNormal2;
    attribute vec3 morphNormal3;

  #else

    attribute vec3 morphTarget4;
    attribute vec3 morphTarget5;
    attribute vec3 morphTarget6;
    attribute vec3 morphTarget7;

  #endif
#endif
#ifdef USE_SKINNING
  attribute vec4 skinIndex;
  attribute vec4 skinWeight;
#endif
Шейдер фрагментов:
uniform mat4 viewMatrix;
uniform vec3 cameraPosition;

Конструктор

WebGLProgram( renderer, code, 
material - материал')" onmouseout="hide()">material, parameters )
Параметры смотрите в описании WebGLRenderer.

Свойства


.id
.code
.usedTimes
.program

vertex shader - вершинный шейдер')" onmouseout="hide()">.vertexShader

fragment shader - шейдер фрагментов')" onmouseout="hide()">.fragmentShader

Методы


.getUniforms( )
Метод возвращает сопоставления имя-значение из всех активных мест, где расположены униформы.

.getAttributes( )
Метод возвращает сопоставления имя-значение из всех активных мест, где расположены атрибуты вершин.

Исходники

WebGLProgram.js на github.com


WebGLShader

Низкоуровневая функция для компиляции либо вершинного, либо фрагментарного шейдера.

Пример

var gl = renderer.context;

var glVertexShader = new THREE.WebGLShader( gl, gl.VERTEX_SHADER, vertexSourceCode );
var glFragmentShader = new THREE.WebGLShader( gl, gl.FRAGMENT_SHADER, fragmentSourceCode );

var program = gl.createProgram();

gl.attachShader( program, glVertexShader );
gl.attachShader( program, glFragmentShader );

gl.linkProgram( program );

Функция



objects - объекты')" onmouseout="hide()">objects( 
gl - сокращ. от англ. слов graphics library - графическая библиотека')" onmouseout="hide()">gl, 
type - тип')" onmouseout="hide()">type, source )
gl -- текущий контекст WebGL
type -- тип WebGL, либо gl.VERTEX_SHADER, либо gl.FRAGMENT_SHADER
source -- исходный код для шейдера
Функция скомпилирует (соберет) индивидуальный шейдер, но не увяжет (слинкует) его до полной WebGLProgram.
Примечание: Это функция, так что другие операторы использовать нельзя.

Исходники

WebGLShader.js на github.com


WebGLState



Методы


.enable( id, boolean )
TODO

.disable( id, boolean )
TODO

.setDepthTest( depthTest )
depthTest -- логическое значение для определения необходимости проверки глубины фрагмента по буферу глубины.
Метод устанавливает (на основе значения depthTest) необходимость проверки данных глубины по буферу глубины.

.setDepthWrite( depthWrite )
depthWrite -- логическое значение для определения необходимости сохранения глубины фрагмента.
Метод устанавливает (на основе значения depthWrite) необходимо ли записывать данные глубины в буфер глубины.

.setBlending( blending, blendEquation, blendSrc, blendDst )
blending -- число, показывающее режим смешивания. Возможными значениями являются THREE.NoBlending, THREE.NormalBlending, THREE.AdditiveBlending, THREE.SubtractiveBlending, THREE.MultiplyBlending или THREE.CustomBlending.
blendEquation -- при установке в качестве режима смешивания (аргумент blending) THREE.CustomBlending, появляется возможность выбора blendEquation - уравнения смешивания. Возможными значениями являются THREE.AddEquation, THREE.SubtractEquation или THREE.ReverseSubtractEquation.
blendSrc -- при установке в качестве режима смешивания (аргумент blending) THREE.CustomBlending, появляется возможность выбора blendSrc - исходников смешивания. Возможными значениями являются THREE.ZeroFactor, THREE.OneFactor, THREE.SrcColorFactor,
- исходный фактор цвета минус единица')" onmouseout="hide()">THREE.OneMinusSrcColorFactor,
исходный фактор прозрачности
(альфа-канала)')" onmouseout="hide()">THREE.SrcAlphaFactor,
исходный фактор прозрачности (альфа-канала)
минус единица')" onmouseout="hide()">THREE.OneMinusSrcAlphaFactor,
целевой фактор прозрачности (альфа-канала)')" onmouseout="hide()">THREE.DstAlphaFactor,
целевой фактор прозрачности (альфа-канала)
минус единица')" onmouseout="hide()">THREE.OneMinusDstAlphaFactor,
- целевой фактор цвета')" onmouseout="hide()">THREE.DstColorFactor,
- целевой фактор цвета минус единица')" onmouseout="hide()">THREE.OneMinusDstColorFactor или
- исходный фактор насыщения
прозрачности (альфа-канала)')" onmouseout="hide()">THREE.SrcAlphaSaturateFactor.
blendDst -- при установке в качестве режима смешивания (аргумент blending) THREE.CustomBlending, появляется возможность выбора blendDst - назначения смешивания. Возможными значениями являются THREE.ZeroFactor, THREE.OneFactor, THREE.SrcColorFactor,
- исходный фактор цвета минус единица')" onmouseout="hide()">THREE.OneMinusSrcColorFactor,
исходный фактор прозрачности
(альфа-канала)')" onmouseout="hide()">THREE.SrcAlphaFactor,
исходный фактор прозрачности (альфа-канала)
минус единица')" onmouseout="hide()">THREE.OneMinusSrcAlphaFactor,
целевой фактор прозрачности (альфа-канала)')" onmouseout="hide()">THREE.DstAlphaFactor,
целевой фактор прозрачности (альфа-канала)
минус единица')" onmouseout="hide()">THREE.OneMinusDstAlphaFactor,
- целевой фактор цвета')" onmouseout="hide()">THREE.DstColorFactor,
- целевой фактор цвета минус единица')" onmouseout="hide()">THREE.OneMinusDstColorFactor или
- исходный фактор насыщения
прозрачности (альфа-канала)')" onmouseout="hide()">THREE.SrcAlphaSaturateFactor.
Данный метод устанавливает правильное смешивание.

Исходники

WebGLState.js на github.com


Плагины WebGLRenderer

SpritePlugin

Класс подключаемого модуля (плагина) визуализатора WebGL, позволяющий отображать спрайты в WebGLRenderer'е. Данный плагин автоматически загружается в WebGLRenderer.

Конструктор

SpritePlugin()
Создает новый SpritePlugin.

Методы


.render( scene, camera )
scene -- сцена для визуализации (рендеринга).
camera -- камера для визуализации (рендеринга).
Метод отображает спрайты, определенные на сцене. Он вызывается автоматически как функция пост-рендеринга для рисования бликов от линз.

Исходники

SpritePlugin.js на github.com



previous page start