- Copies pixels from the current WebGLFramebuffer into a 2D texture. Enables - access to - [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/copyTexImage2D WebGLRenderingContext.copyTexImage2D]. -
-
Copies the pixels of a texture in the bounds '[page:Box3 srcRegion]' in the destination texture starting from the given position.
2D Texture, 3D Textures, or a mix of the two can be used as source and destination texture arguments for copying between layers of 3d textures.
- The `depthTexture` and `texture` property of render targets are supported as well.
+ The `depthTexture` and `texture` property of render targets are supported as well. If `srcTexture` is `null` then data is copied from the canvas frame buffer.
When using render target textures as `srcTexture` and `dstTexture`, you must make sure both render targets are initialized e.g. via [page:.initRenderTarget]().
- This class can only be used in combination with - [page:WebGLRenderer.copyFramebufferToTexture](). -
- -
-const pixelRatio = window.devicePixelRatio;
-const textureSize = 128 * pixelRatio;
-
-// instantiate a framebuffer texture
-const frameTexture = new FramebufferTexture( textureSize, textureSize );
-
-// calculate start position for copying part of the frame data
-const vector = new Vector2();
-vector.x = ( window.innerWidth * pixelRatio / 2 ) - ( textureSize / 2 );
-vector.y = ( window.innerHeight * pixelRatio / 2 ) - ( textureSize / 2 );
-
-// render the scene
-renderer.clear();
-renderer.render( scene, camera );
-
-// copy part of the rendered frame into the framebuffer texture
-renderer.copyFramebufferToTexture( frameTexture, vector );
-
-
- [example:webgl_framebuffer_texture]
- -
- [page:Number width] -- The width of the texture.
-
- [page:Number height] -- The height of the texture.
-
See the base [page:Texture Texture] class for common properties.
- -Whether to generate mipmaps for the [name]. Default value is `false`.
- -Read-only flag to check if a given object is of type [name].
- -
- How the texture is sampled when a texel covers more than one pixel. The
- default is [page:Textures THREE.NearestFilter], which uses the value of
- the closest texel.
-
-
- See [page:Textures texture constants] for details.
-
- How the texture is sampled when a texel covers less than one pixel. The
- default is [page:Textures THREE.NearestFilter], which uses the value of
- the closest texel.
-
-
- See [page:Textures texture constants] for details.
-
True by default. This is required so that the canvas data is loaded.
- -See the base [page:Texture Texture] class for common methods.
- -- [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] -
- - diff --git a/docs/api/it/textures/FramebufferTexture.html b/docs/api/it/textures/FramebufferTexture.html deleted file mode 100644 index 390bb5a6df839b..00000000000000 --- a/docs/api/it/textures/FramebufferTexture.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - -- Questa classe può solo essere utilizzata in combinazione con [page:WebGLRenderer.copyFramebufferToTexture](). -
- -
- [page:Number width] -- La larghezza della texture.
-
- [page:Number height] -- L'altezza della texture.
-
- Vedi la classe base [page:Texture Texture] per le proprietà comuni. -
- -- Flag di sola lettura per verificare se l'oggetto dato è di tipo [name]. -
- -- True da impostazione predefinita. Ciò è necessario affinché i dati del canvas vengano caricati. -
- -- Vedi la classe base [page:Texture Texture] per i metodi comuni. -
- - -- [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] -
- - diff --git a/docs/api/zh/textures/FramebufferTexture.html b/docs/api/zh/textures/FramebufferTexture.html deleted file mode 100644 index af0ed51068b867..00000000000000 --- a/docs/api/zh/textures/FramebufferTexture.html +++ /dev/null @@ -1,93 +0,0 @@ - - - - -- 这个类只能与 [page:WebGLRenderer.copyFramebufferToTexture]() 结合使用。 -
- -
- const pixelRatio = window.devicePixelRatio;
- const textureSize = 128 * pixelRatio;
-
- // instantiate a framebuffer texture
- const frameTexture = new FramebufferTexture( textureSize, textureSize );
-
- // calculate start position for copying part of the frame data
- const vector = new Vector2();
- vector.x = ( window.innerWidth * pixelRatio / 2 ) - ( textureSize / 2 );
- vector.y = ( window.innerHeight * pixelRatio / 2 ) - ( textureSize / 2 );
-
- // render the scene
- renderer.clear();
- renderer.render( scene, camera );
-
- // copy part of the rendered frame into the framebuffer texture
- renderer.copyFramebufferToTexture( frameTexture, vector );
-
-
- [example:webgl_framebuffer_texture]
- -
- [page:Number width] -- 纹理的宽度
-
- [page:Number height] -- 纹理的高度
-
-
共有属性请参见其基类 [page:Texture Texture]
- -是否为 [name] 生成 mipmaps ，默认为`false`
- -只读，检查给定对象是否为 [name] 类型
- -
- 纹理元素覆盖多个像素时如何对纹理进行采样。默认值为 [page:Textures THREE.NearestFilter] ，它使用最接近的纹理元素。
-
-
- 更多细节详见 [page:Textures texture constants]
-
- 纹理元素覆盖少于一个像素时如何对纹理进行采样。默认值为 [page:Textures THREE.NearestFilter] ，它使用最近的纹理元素。
-
-
- 更多细节详见 [page:Textures texture constants]
-
默认为 `true` ，这是加载 canvas 数据所必需的
- -共有方法请参见其基类 [page:Texture Texture]
- - -- [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] -
- - diff --git a/examples/webgl_framebuffer_texture.html b/examples/webgl_framebuffer_texture.html index e7f97e98e33cc7..cb40a29b9a5a32 100644 --- a/examples/webgl_framebuffer_texture.html +++ b/examples/webgl_framebuffer_texture.html @@ -61,7 +61,7 @@ const dpr = window.devicePixelRatio; const textureSize = 128 * dpr; - const vector = new THREE.Vector2(); + const box = new THREE.Box2(); const color = new THREE.Color(); init(); @@ -103,7 +103,8 @@ // - texture = new THREE.FramebufferTexture( textureSize, textureSize ); + texture = new THREE.DataTexture( new Uint8Array( textureSize * textureSize * 4 ), textureSize, textureSize ); + texture.needsUpdate = true; // @@ -178,11 +179,13 @@ renderer.render( scene, camera ); // calculate start position for copying data + const x = window.innerWidth * dpr / 2 - textureSize / 2; + const y = window.innerHeight * dpr / 2 - textureSize / 2; - vector.x = ( window.innerWidth * dpr / 2 ) - ( textureSize / 2 ); - vector.y = ( window.innerHeight * dpr / 2 ) - ( textureSize / 2 ); + box.min.set( x, y ); + box.max.set( x + textureSize, y + textureSize ); + renderer.copyTextureToTexture( null, texture, box ); - renderer.copyFramebufferToTexture( texture, vector ); renderer.clearDepth(); renderer.render( sceneOrtho, cameraOrtho ); diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js index 5c25de2cde1fb5..8680d4c7b7d631 100644 --- a/src/renderers/WebGLRenderer.js +++ b/src/renderers/WebGLRenderer.js @@ -54,6 +54,7 @@ import { WebGLMaterials } from './webgl/WebGLMaterials.js'; import { WebGLUniformsGroups } from './webgl/WebGLUniformsGroups.js'; import { createCanvasElement, probeAsync, toNormalizedProjectionMatrix, toReversedProjectionMatrix, warnOnce } from '../utils.js'; import { ColorManagement } from '../math/ColorManagement.js'; +import { Box2 } from '../math/Box2.js'; class WebGLRenderer { @@ -2548,18 +2549,16 @@ class WebGLRenderer { } - const levelScale = Math.pow( 2, - level ); - const width = Math.floor( texture.image.width * levelScale ); - const height = Math.floor( texture.image.height * levelScale ); - - const x = position !== null ? position.x : 0; - const y = position !== null ? position.y : 0; - - textures.setTexture2D( texture, 0 ); + // @deprecated, r170 + warnOnce( 'WebGLRenderer: copyFramebufferToTexture function has been deprecated. Use copyTextureToTexture instead.' ); - _gl.copyTexSubImage2D( _gl.TEXTURE_2D, level, 0, 0, x, y, width, height ); + const box = new Box2(); + box.min.copy( position ); + box.max.copy( position ); + box.max.x += texture.image.width; + box.max.y += texture.image.height; - state.unbindTexture(); + this.copyTextureToTexture( null, texture, box, undefined, 0, level ); }; @@ -2568,7 +2567,7 @@ class WebGLRenderer { this.copyTextureToTexture = function ( srcTexture, dstTexture, srcRegion = null, dstPosition = null, srcLevel = 0, dstLevel = null ) { // support previous signature with dstPosition first - if ( srcTexture.isTexture !== true ) { + if ( srcTexture && srcTexture.isTexture !== true ) { // @deprecated, r165 warnOnce( 'WebGLRenderer: copyTextureToTexture function signature has changed.' ); @@ -2599,10 +2598,29 @@ class WebGLRenderer { } + // set up the src texture + let isSrc3D = false; + const isDst3D = dstTexture.isDataArrayTexture || dstTexture.isData3DTexture; + // gather the necessary dimensions to copy let width, height, depth, minX, minY, minZ; let dstX, dstY, dstZ; - const image = srcTexture.isCompressedTexture ? srcTexture.mipmaps[ dstLevel ] : srcTexture.image; + let image, imageWidth, imageHeight; + if ( srcTexture !== null ) { + + image = srcTexture.isCompressedTexture ? srcTexture.mipmaps[ dstLevel ] : srcTexture.image; + imageWidth = image.width; + imageHeight = image.height; + isSrc3D = srcTexture.isDataArrayTexture || srcTexture.isData3DTexture; + + } else { + + image = null; + imageWidth = _width; + imageHeight = _height; + + } + if ( srcRegion !== null ) { width = srcRegion.max.x - srcRegion.min.x; @@ -2615,13 +2633,13 @@ class WebGLRenderer { } else { const levelScale = Math.pow( 2, - srcLevel ); - width = Math.floor( image.width * levelScale ); - height = Math.floor( image.height * levelScale ); - if ( srcTexture.isDataArrayTexture ) { + width = Math.floor( imageWidth * levelScale ); + height = Math.floor( imageHeight * levelScale ); + if ( srcTexture && srcTexture.isDataArrayTexture ) { depth = image.depth; - } else if ( srcTexture.isData3DTexture ) { + } else if ( srcTexture && srcTexture.isData3DTexture ) { depth = Math.floor( image.depth * levelScale ); @@ -2683,17 +2701,23 @@ class WebGLRenderer { const currentUnpackSkipPixels = _gl.getParameter( _gl.UNPACK_SKIP_PIXELS ); const currentUnpackSkipRows = _gl.getParameter( _gl.UNPACK_SKIP_ROWS ); const currentUnpackSkipImages = _gl.getParameter( _gl.UNPACK_SKIP_IMAGES ); - - _gl.pixelStorei( _gl.UNPACK_ROW_LENGTH, image.width ); - _gl.pixelStorei( _gl.UNPACK_IMAGE_HEIGHT, image.height ); + _gl.pixelStorei( _gl.UNPACK_ROW_LENGTH, imageWidth ); + _gl.pixelStorei( _gl.UNPACK_IMAGE_HEIGHT, imageHeight ); _gl.pixelStorei( _gl.UNPACK_SKIP_PIXELS, minX ); _gl.pixelStorei( _gl.UNPACK_SKIP_ROWS, minY ); _gl.pixelStorei( _gl.UNPACK_SKIP_IMAGES, minZ ); - // set up the src texture - const isSrc3D = srcTexture.isDataArrayTexture || srcTexture.isData3DTexture; - const isDst3D = dstTexture.isDataArrayTexture || dstTexture.isData3DTexture; - if ( srcTexture.isDepthTexture ) { + if ( srcTexture === null ) { + + const currentTarget = this.getRenderTarget(); + + this.setRenderTarget( null ); + textures.setTexture2D( dstTexture, 0 ); + _gl.copyTexSubImage2D( _gl.TEXTURE_2D, dstLevel, dstX, dstY, minX, minY, width, height ); + state.unbindTexture(); + this.setRenderTarget( currentTarget ); + + } else if ( srcTexture.isDepthTexture ) { const srcTextureProperties = properties.get( srcTexture ); const dstTextureProperties = properties.get( dstTexture ); diff --git a/src/textures/FramebufferTexture.js b/src/textures/FramebufferTexture.js index db87092f614e41..2785928adb724b 100644 --- a/src/textures/FramebufferTexture.js +++ b/src/textures/FramebufferTexture.js @@ -1,5 +1,6 @@ import { Texture } from './Texture.js'; import { NearestFilter } from '../constants.js'; +import { warnOnce } from '../utils.js'; class FramebufferTexture extends Texture { @@ -16,6 +17,9 @@ class FramebufferTexture extends Texture { this.needsUpdate = true; + // @deprecated r170 + warnOnce( 'FramebufferTexture: FramebufferTexture has been deprecated. Use any other texture with copyTextureToTexture, instead.' ); + } }