Three.js

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),
то же и там же, но на русском языке.

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

Исходники

Polyfills.js на github.com


WebGLRenderer

WebGLProgram

Constructor for the GLSL program sent to vertex and fragment shaders, including default uniforms and attributes.

Встроенные униформы и атрибуты Built-in uniforms and attributes

Vertex shader (unconditional):
// = 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
uniform mat3 normalMatrix;

// = camera position in world space
uniform vec3 cameraPosition;

// default vertex attributes provided by Geometry and BufferGeometry
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
attribute vec2 uv2;
Note that you can therefore calculate the position of a vertex in the vertex shader by: 
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
or alternatively 
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );

Vertex shader (conditional):

#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

Fragment shader:

uniform mat4 viewMatrix;
uniform vec3 cameraPosition;

Конструктор

WebGLProgram( renderer, [page:Object code, [page:Material material, [page:Object parameters )
Параметры смотрите в описании WebGLRenderer.

Свойства


id
code
usedTimes
program
[property:WebGLShader vertexShader
[property:WebGLShader fragmentShader

Методы


getUniforms()
Returns a name-value mapping of all active uniform locations.

getAttributes()
Returns a name-value mapping of all active vertex attribute locations.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

WebGLShader

A lower level function to compile either a vertex or fragment shader.

Пример

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 );

Функция

[page:WebGLShader objects([page:WebGLContext gl, [page:WebGLEnum type, [page:String source)
gl -- текущий контекст WebGL
type -- тип WebGL, либо gl.VERTEX_SHADER, либо gl.FRAGMENT_SHADER
source -- исходный код для шейдера
This will compile an individual shader, but won't link it to be a complete [page:WebGLProgram]. Note: this is a function so the new operator should not be used.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

WebGLState



Методы


[method:null enable( [page:integer id, [page:boolean boolean )
TODO 
[method:null disable]( [page:integer id], [page:boolean boolean] )
TODO 
[method:null setDepthTest]( [page:boolean depthTest] )
depthTest -- The boolean to decide if depth of a fragment needs to be tested against the depth buffer.
This sets, based on depthTest, whether or not the depth data needs to be tested against the depth buffer. 
[method:null setDepthWrite]( [page:boolean depthWrite] )
depthWrite -- The boolean to decide if depth of a fragment needs to be kept.
This sets, based on depthWrite, whether or not the depth data needs to be written in the depth buffer. 
[method:null setBlending]( [page:number blending], [page:number blendEquation], [page:number blendSrc], [page:number blendDst] )
blending -- A number indicating the blending mode. Possible value are THREE.NoBlending, THREE.NormalBlending, THREE.AdditiveBlending, THREE.SubtractiveBlending, THREE.MultiplyBlending or THREE.CustomBlending
blendEquation -- When blending is THREE.CustomBlending, then you can set the blendEquation. Possible values are THREE.AddEquation, THREE.SubtractEquation or THREE.ReverseSubtractEquation.
blendSrc -- When blending is THREE.CustomBlending, then you can set the blendSrc. Possible values are THREE.ZeroFactor, THREE.OneFactor,THREE.SrcColorFactor, THREE.OneMinusSrcColorFactor, THREE.SrcAlphaFactor, THREE.OneMinusSrcAlphaFactor, THREE.DstAlphaFactor, THREE.OneMinusDstAlphaFactor, THREE.DstColorFactor,THREE.OneMinusDstColorFactor or THREE.SrcAlphaSaturateFactor
blendDst -- When blending is THREE.CustomBlending, then you can set the blendDst. Possible values are THREE.ZeroFactor, THREE.OneFactor,THREE.SrcColorFactor, THREE.OneMinusSrcColorFactor, THREE.SrcAlphaFactor, THREE.OneMinusSrcAlphaFactor, THREE.DstAlphaFactor, THREE.OneMinusDstAlphaFactor, THREE.DstColorFactor,THREE.OneMinusDstColorFactor or THREE.SrcAlphaSaturateFactor
This method sets the correct blending.

Исходники

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

Плагины WebGLRenderer

LensFlarePlugin

The Webglrenderer plugin class that allows lensflares to be rendered in the WebglRenderer. Этот плагин автоматически загружен в Webglrenderer.

Конструктор

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

Методы


.render( scene, camera, viewportWidth, viewportHeight )
scene -- The scene to render.
camera -- The camera to render.
viewportWidth -- ширина окна просмотра The width of the viewport.
viewportHeight -- высота окна просмотра The height of the viewport.
Renders the lensflares defined in the scene. This gets automatically called as post render function to draw the lensflares.

Исходники

LensFlarePlugin.js на github.com


SpritePlugin

The Webglrenderer plugin class that allows Sprites to be rendered in the WebglRenderer. This plugin is automatically loaded in the Webglrenderer.

Конструктор

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

Методы


.render( scene, camera )
scene -- The scene to render.
camera -- The camera to render.
Renders the sprites defined in the scene. This gets automatically called as post-render function to draw the lensflares.

Исходники

SpritePlugin.js на github.com



previous page start