Three.js

WebGLRenderer( parameters )

Допустимы следующие параметры:

• canvas — холст, на который визуализатор выводит результаты своей работы. Он соответствует свойству domElement, указанному ниже. Если он не был передан здесь, то будет создан новый элемент canvas.
• context — этот параметр можно использовать для присоединения визуализатора (рендерера) к существующему RenderingContext. Значением по умолчанию является null. Вот статья о RenderingContext на русском языке.
• precision — точность шейдера. Может быть highp (похоже сокращ. от англ. слов high precision - высокая точность), mediump (от слов medium precision - средняя точность) или lowp (от слов low precision - низкая точность). Значением по умолчанию является highp, если поддерживается устройством. Смотрите примечания "Things to Avoid" в статье WebGL best practices. На русском языке это будет раздел "Чего следует избегать" в статье Лучшие практики WebGL.
• alpha — параметр определяет, будет ли холст (canvas) содержать буфер альфа-канала (канал прозрачности) или нет. Значением по умолчанию является false.
• premultipliedAlpha — будет ли визуализатор (рендерер) предполагать, что цвета whether the renderer will assume that colors have premultiplied alpha. Значением по умолчанию является true.
  Примечание переводчика: предварительное перемножение альфа-канала (premultiplied alpha) - вариант вычисления растрового изображения или альфа-смешивания, в котором предполагается, что RGB значения цвета уже умножены на значения альфа-канала, для снижения вычислений во время альфа-смешивания; применяется операция смешивания: dst = dst * ( 1 - alpha ) + src; допускающая соединение альфа-смешивание с дополнительными эффектами смешивания. A variation of a bitmap image or alpha blending calculation in which the RGB color values are assumed to be already multiplied by an alpha channel, to reduce computations during Alpha blending; uses the blend operation: dst = dst * ( 1 - alpha ) + src; capable of mixing alpha blending with additive blending effects
• antialias — параметр определяет, будет ли выполняться сглаживание (antialiasing). Значением по умолчанию является false.
• stencil — будет ли в буфере рисования находиться буфер трафарета не меньше 8 бит. Значением по умолчанию является true.
  Примечание переводчика: вот перевод начала вышеприведенной статьи о буфере трафарета. ... читать далее

  Буфер трафарета - это особый буфер, в дополнение к буферам цвета и глубины (z-буферизация), установленный на современном графическом оборудовании. Буфер попиксельный и работает с целочисленными значениями, обычно с глубиной один байт на пиксель. Буфер трафарета и буфер глубины зачастую используют одну и ту же область в оперативной памяти видеокарты.
  
  В простейшем случае буфер трафарета используется для ограничения области отрисовки (шаблонизации). Более широкое применение буфера трафарета позволяет использовать тесную связь между буфером глубины и буфером трафарета в передаче конвейером.
  
  Простая комбинация проверки глубины и модификаторов трафарета делает возможным огромное количество эффектов (таких как such as stencil shadow volumes, Two-Sided Stencil, compositing, decaling, dissolves, fades, swipes, silhouettes, рисование контуров или выделение пересечений в соединениях простых геометрических элементов) хотя зачастую они требуют несколько проходов отрисовки и поэтому представляют большую нагрузку для видеокарты.
  
  Наиболее типичным применением является добавление теней в 3D приложениях. Также используется для двумерных отражений.
  
  Другие методы визуализации, такие как портальная передача, используют буфер трафарета по-другому; например, можно использовать поиск области экрана, скрытой порталом, и повторно отобразить эти пиксели правильно. Other rendering techniques, such as portal rendering, use the stencil buffer in other ways; for example, it can be used to find the area of the screen obscured by a portal and re-render those pixels correctly.
  
  Буфер трафарета и его модификаторы доступны в API компьютерной графики вроде OpenGL и Direct3D.
• preserveDrawingBuffer — whether to preserve the buffers until manually cleared or overwritten. Значением по умолчанию является false.
• depth — whether the drawing buffer has a depth buffer of at least 16 bits. Значением по умолчанию является true.
• logarithmicDepthBuffer — параметр определяет, будет ли использоваться логарифмический буфер глубины. Его использование может понадобиться, если имеются очень большие различия в масштабе при работе в одной сцене. Значением по умолчанию является false. Смотрите пример camera / logarithmicdepthbuffer.

.autoClear

Свойство определяет, будет ли визуализатор (рендерер) автоматически очищать свой выход перед визуализацией (рендерингом).

.autoClearColor

Свойство определяет, должен ли визуализатор (рендерер) очищать буфер цвета, если значение свойства autoClear установлено как true. Значением по умолчанию является true.

.autoClearDepth

Свойство определяет, должен ли визуализатор (рендерер) очищать буфер глубины, если значение свойства autoClear установлено как true. Значением по умолчанию является true.

.autoClearStencil

Свойство определяет, должен ли визуализатор (рендерер) очищать буфер трафарета, если значение свойства autoClear установлено как true. Значением по умолчанию является true.

.capabilities

Объект, содержащий сведения о возможностях текущего RenderingContext. Вот статья Википедии о RenderingContext на русском языке.

• .floatFragmentTextures : поддерживает ли контекст расширение OES_texture_float. По данным WebGLStats, по состоянию на февраль 2016 года, его поддерживают свыше 95% устройств of WebGL enabled devices support this.
• .floatVertexTextures : true if .floatFragmentTextures and .vertexTextures are both true.
• .getMaxAnisotropy() : смотрите ниже метод getMaxAnisotropy.
• .getMaxPrecision() : смотрите ниже метод getMaxPrecision.
• .logarithmicDepthBuffer : true if the .logarithmicDepthBuffer was set to true in the constructor and the context supports the EXT_frag_depth extension. According to WebGLStats, as of February 2016 around 66% of WebGL enabled devices support this.
• .maxAttributes : The value of gl.MAX_VERTEX_ATTRIBS.
• .maxCubemapSize : The value of gl.MAX_CUBE_MAP_TEXTURE_SIZE. Maximum height * width of cube map textures that a shader can use.
• .maxFragmentUniforms : The value of gl.MAX_FRAGMENT_UNIFORM_VECTORS. The number of uniforms that can be used by a fragment shader.
• .maxTextureSize : The value of gl.MAX_TEXTURE_SIZE. Maximum height * width of a texture that a shader use.
• .maxTextures : The value of gl.MAX_TEXTURE_IMAGE_UNITS. The maximum number of textures that can be used by a shader.
• .maxVaryings : The value of gl.MAX_VARYING_VECTORS. The number of varying vectors that can used by shaders.
• .maxVertexTextures : The value of gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS. The number of textures that can be used in a vertex shader.
• .maxVertexUniforms : The value of gl.MAX_VERTEX_UNIFORM_VECTORS. The maximum number of uniforms that can be used in a vertex shader.
• .precision : The shader precision currently being used by the renderer.
• .vertexTextures : true if .maxVertexTextures is greater than 0 (i.e. vertext textures can be used).

.clippingPlanes

User-defined clipping planes specified as THREE.Plane objects in world space. These planes apply globally. Points in space whose dot product with the plane is negative are cut away. Значением по умолчанию является [].

.context

The renderer obtains a RenderingContext context from its domElementdomElement by default, using HTMLCanvasElement.getContext().
You can create this manually, however it must correspond to the domElement in order to render to the screen.

.domElement

A [page:Canvas where the renderer draws its output.
Он автоматически создается визуализатором (рендерером) в конструкторе (если уже не предоставлен); нужно просто добавить его на страницу, вот так:

document.body.appendChild( renderer.domElement );

.extensions

Оболочка для метода extensions.get, используется для проверки поддержки различных расширений WebGL.

.gammaFactor

Гамма-коррекция, т.е. коррекция яркости или цветовых компонентов цифрового изображения или видео. Значение по умолчанию равно 2.

.gammaInput

Если свойство установлено, то предполагается, что все текстуры и цвета предварительно перемножены на значение gammaFactor. Значением по умолчанию является false.

.gammaOutput

Если свойство установлено то предполагается, что все текстуры и цвета должны выводиться предварительно перемноженными на значение gammaFactor. Значением по умолчанию является false.

.info

Объект с рядом статических сведений о памяти видеокарты и процессе визуализации. Полезно при отладке или просто из любопытства. Объект содержит следующие поля:

.localClippingEnabled

Свойство определяет, Defines whether the renderer respects object-level clipping planes. Значением по умолчанию является false.

.maxMorphNormals

Значение по умолчанию равно 4. Default is 4. The maximum number of MorphNormals allowed in a shader. Keep in mind that the standard materials only allow 4 MorphNormals.

.maxMorphTargets

Значение по умолчанию равно 8. Максимальное число целей морфинга (MorphTargets), допускаемых в шейдере. Имейте ввиду, что стандартные материалы допускают только 8 целей морфинга. Default is 8. The maximum number of MorphTargets allowed in a shader. Keep in mind that the standard materials only allow 8 MorphTargets.

.physicallyCorrectLights

Свойство определяет, использовать ли режим освещения, правильный с точки зрения физики. Значением по умолчанию является false. Смотрите пример lights / physical.

.properties

Used internally by the renderer to keep track of various sub object properties.

.renderLists

Used internally to handle ordering of scene object rendering.

.shadowMap

This contains the reference to the shadow map, if used. #

.shadowMap.enabled

If set, use shadow maps in the scene. Default is false. #

.shadowMap.type

Defines shadow map type (unfiltered, percentage close filtering, percentage close filtering with bilinear filtering in shader) Options are THREE.BasicShadowMap, THREE.PCFShadowMap (default), THREE.PCFSoftShadowMap. See WebGLRenderer constants for details. #

.shadowMap.renderReverseSided

Whether to render the opposite side as specified by the material into the shadow map. When disabled, an appropriate shadow.bias must be set on the light source for surfaces that can both cast and receive shadows at the same time to render correctly. Default is true. #

.shadowMap.renderSingleSided

Whether to treat materials specified as double-sided as if they were specified as front-sided when rendering the shadow map. When disabled, an appropriate shadow.bias must be set on the light source for surfaces that can both cast and receive shadows at the same time to render correctly. Default is true. #

.sortObjects

Defines whether the renderer should sort objects. Default is true. Note: Sorting is used to attempt to properly render objects that have some degree of transparency. By definition, sorting objects may not work in all cases. Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining each object's rendering order. #

.state

Объект содержит функции для установки разных свойств состояния WebGLRenderer.context.

.toneMapping

Значением по умолчанию является LinearToneMapping. Другие варианты смотрите в описании констант WebGLRenderer'а.

.toneMappingExposure

Exposure level of tone mapping. Значение по умолчанию равно 1.

.toneMappingWhitePoint

Tone mapping white point. Значение по умолчанию равно 1.

.allocTextureUnit

Метод пытается выделить блок текстуры для использования шейдером. При попытке выделения блоков текстуры больше, чем поддерживается GPU, будет предупреждение. В основном этот метод используется внутренне. Смотрите описание свойства capabilities.maxTextures.

.clear ( color, depth, stencil )

Tells the renderer to clear its color, depth or stencil drawing buffer(s). This method initializes the color buffer to the current clear color value. По умолчанию аргументы равны true.

.clearColor ( )

Метод очищает буфер цвета. Равнозначен вызову метода .clear( true, false, false ).

.clearDepth ( )

Метод очищает буфер глубины. Равнозначен вызову метода .clear( false, true, false ).

.clearStencil ( )

Метод очищает буфер трафарета. Равнозначен вызову метода .clear( false, false, true ).

.clearTarget ( renderTarget, color, depth, stencil )

Этот метод очищает целевой буфер визуализации. Чтобы сделать это, он активирует целевой буфер визуализации.

.compile ( scene, camera )

Compiles all materials in the scene with the camera. This is useful to precompile shaders before the first rendering.

.dispose ( )

Dispose of the current rendering context.

.extensions.get ( extensionName )

Метод используется для проверки поддержки разных расширений и, если таковая имеется, возвращает объект с подробной информацией о расширении. Он может проверять следующие расширения:

• WEBGL_depth_texture
• EXT_texture_filter_anisotropic
• WEBGL_compressed_texture_s3tc
• WEBGL_compressed_texture_pvrtc
• WEBGL_compressed_texture_etc1

.forceContextLoss ( )

Simulate loss of the WebGL context. This requires support for the WEBGL_lose_context extensions. According to WebGLStats, as of February 2016 90% of WebGL enabled devices support this.

.getClearAlpha ( )

Returns a float with the current clear alpha. Диапазон значений от 0 до 1.

.getClearColor ( )

Returns a THREE.Color instance with the current clear color.

.getContext ( )

Метод возвращает текущий контекст WebGL.

.getContextAttributes ( )

Returns an object that describes the attributes set on the WebGL context when it was created.

.getCurrentRenderTarget ( )

Returns the current RenderTarget, if any.

.getMaxAnisotropy ( )

This returns the anisotropy level of the textures.

.getDrawingBufferSize ( )

Returns an object containing the width and height of the renderer's drawing buffer, in pixels.

.getPixelRatio ( )

Returns current device pixel ratio used.

.getPrecision ( )

This gets the precision used by the shaders. It returns "highp","mediump" or "lowp".

.getSize ( )

Returns an object containing the width and height of the renderer's output canvas, in pixels.

.resetGLState ( )

Reset the GL state to default. Called internally if the WebGL context is lost.

.readRenderTargetPixels ( renderTarget, x, y, width, height, buffer )

Reads the pixel data from the renderTarget into the buffer you pass in. Buffer should be a Javascript Uint8Array instantiated with new Uint8Array( renderTargetWidth * renderTargetWidth * 4 ) to account for size and color information. This is a wrapper around gl.readPixels. See the interactive / cubes / gpu example.

.render ( scene, camera, renderTarget, forceClear )

Render a scene using a camera. The render is done to the renderTarget (if specified) or to the canvas as usual. If forceClear is true, the depth, stencil and color buffers will be cleared before rendering even if the renderer's autoClear property is false. Even with forceClear set to true you can prevent certain buffers being cleared by setting either the autoClearColor, autoClearStencil or autoClearDepth properties to false.

.renderBufferDirect ( camera, lights, fog, material, geometryGroup, object )

Render a buffer geometry group using the camera and with the specified material.

.renderBufferImmediate ( object, program, shading )

object - an instance of Object3D program - an instance of shaderProgram shading - an instance of Material Render an immediate buffer. Gets called by renderImmediateObject.

.setClearAlpha ( alpha )

Sets the clear alpha. Valid input is a float between 0.0 and 1.0.

.setClearColor ( color, alpha )

Sets the clear color and opacity.

.setFaceCulling ( cullFace, frontFace )

See WebGLRenderer constants for all possible values for cullFace and frontFace. Used for setting the gl.frontFace and gl.cullFace states in the GPU, thus enabling/disabling face culling when rendering. If cullFace is set to CullFaceNone, culling will be disabled.

.setPixelRatio ( value )

Sets device pixel ratio. This is usually used for HiDPI device to prevent bluring output canvas.

.setRenderTarget ( renderTarget )

renderTarget -- The renderTarget that needs to be activated (optional).
This method sets the active rendertarget. If the parameter is omitted the canvas is set as the active rendertarget.

.setScissor ( x, y, width, height )

Sets the scissor area from (x, y) to (x + width, y + height)

.setScissorTest ( boolean )

Enable or disable the scissor test. When this is enabled, only the pixels within the defined scissor area will be affected by further renderer actions.

.supportsVertexTextures( )

Возвращает логическое значение true, если контекст поддерживает текстуры вершин. Этот метод устарел Return a Boolean true if the context supports vertex textures. This has been deprecated in favour of capabilities.vertexTexures.

.setSize( width, height, updateStyle )

Изменяет размеры выходного холста (canvas) к (width, height) Resizes the output canvas to (width, height) with device pixel ratio taken into account, а также устанавливает область просмотра (viewport) в соответствии с этим размером, начиная с (0, 0). Установка параметра updateStyle как true добавляет adds explicit pixel units to the output canvas style.

.setTexture2D( texture, slot )

This method sets the correct texture to the correct slot for the WebGL shader. The slot number can be found as a value of the uniform of the sampler.

.setTextureCube( cubeTexture, slot )

Этот метод устанавливает правильную текстуру в правильный слот для шейдера WebGL. Номер слота можно найти как значение This method sets the correct texture to the correct slot for the WebGL shader. The slot number can be found as a value of the uniform of the sampler.

.setViewport( x, y, width, height )

Метод устанавливает область просмотра (viewport) визуализации от (x, y) до (x + width, y + height).

WebGLRenderer.js в этом справочнике
WebGLRenderer.js на github.com

WebGLRenderTarget( width, height, options )

Возможны следующие опции:

• wrapS - константа, значением по умолчанию является THREE.ClampToEdgeWrapping.
• wrapT - константа, значением по умолчанию является THREE.ClampToEdgeWrapping.
• magFilter - константа, значением по умолчанию является THREE.LinearFilter.
• minFilter - константа, значением по умолчанию является THREE.LinearFilter.
• format - константа, значением по умолчанию является THREE.RGBAFormat.
• type - константа, значением по умолчанию является THREE.UnsignedByteType.
• anisotropy — значением по умолчанию является 1. Смотрите описание свойства Texture.anisotropy.
• encoding - константа, значением по умолчанию является THREE.LinearEncoding.
• depthBuffer — логическое значение, по умолчанию равно true. Установите его как false, если буфер глубины не нужен.
• stencilBuffer — логическое значение, по умолчанию равно true. Установите его как false, если буфер трафарета не нужен.

.uuid

Уникальное число для данного экземпляра целевого буфера визуализации.

.width

Ширина целевого буфера визуализации.

.height

Высота целевого буфера визуализации.

.scissor

Прямоугольная область внутри окна просмотра целевого буфера визуализации. Фрагменты, находящиеся за пределами этой области, будут отбрасываться.

.scissorTest

Свойство показывает, активна или нет Indicates whether the scissor test is active or not.

.viewport

Область (окно) просмотра данного целевого буфера визуализации.

[property:Texture .texture

This texture instance holds the rendered pixels. Use it as input for further processing.

.depthBuffer

Свойство определяет, представлять ли буфер глубины. Значением по умолчанию является true.

.stencilBuffer

Свойство определяет, представлять ли буфер трафаретов. Значением по умолчанию является true.

depthTexture

Если это свойство установлено, глубина сцены будет отображаться по данной текстуре. Значением по умолчанию является null.

.setSize( width, height )

Устанавливает размеры данного целевого буфера визуализации.

.clone()

Создает копию данного целевого буфера визуализации.

.copy( source )

Перенимает настройки заданного (в параметре source) целевого буфера визуализации.

.dispose()

Метод отправляет Dispatches a dispose event.

WebGLRenderTarget.js в этом справочнике
WebGLRenderTarget.js на Гитхабе

WebGLRenderTargetCube( width, height, options )

Возможны следующие опции:

• wrapS - константа, значением по умолчанию является THREE.ClampToEdgeWrapping.
• wrapT - константа, значением по умолчанию является THREE.ClampToEdgeWrapping.
• magFilter - константа, значением по умолчанию является THREE.LinearFilter.
• minFilter - константа, значением по умолчанию является THREE.LinearFilter.
• format - константа, значением по умолчанию является THREE.RGBAFormat.
• type - константа, значением по умолчанию является THREE.UnsignedByteType.
• anisotropy — значением по умолчанию является 1. Смотрите описание свойства Texture.anisotropy.
• encoding - константа, значением по умолчанию является THREE.LinearEncoding.
• depthBuffer — логическое значение, по умолчанию равно true. Установите его как false, если буфер глубины не нужен.
• stencilBuffer — логическое значение, по умолчанию равно true. Установите его как false, если буфер трафарета не нужен.

.activeCubeFace

Свойство activeCubeFace соответствует стороне куба (PX 0, NX 1, PY 2, NY 3, PZ 4, NZ 5) and is used and set internally by the CubeCamera.

WebGLRenderTargetCube.js в этом справочнике
WebGLRenderTargetCube.js на Гитхабе

ShaderChunk.js в этом справочнике
ShaderChunk.js на github.com

ShaderLib.js в этом справочнике
ShaderLib.js на github.com

UniformsLib.js в этом справочнике
UniformsLib.js на github.com

UniformsUtils.js в этом справочнике
UniformsUtils.js на github.com