diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index ddde146..ad30729 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -159,19 +159,27 @@ Object.assign(this.extensions, { drawBuffers: gl.getExtension('WEBGL_draw_buffers'), depthTexture: gl.getExtension('WEBKIT_WEBGL_depth_texture'), - floatTexture: gl.getExtension('OES_texture_float'), loseContext: gl.getExtension('WEBGL_lose_context'), vertexArrayObject: gl.getExtension('OES_vertex_array_object') || gl.getExtension('MOZ_OES_vertex_array_object') || gl.getExtension('WEBKIT_OES_vertex_array_object'), anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), uint32ElementIndex: gl.getExtension('OES_element_index_uint'), + // Floats and half-floats + floatTexture: gl.getExtension('OES_texture_float'), + floatTextureLinear: gl.getExtension('OES_texture_float_linear'), + textureHalfFloat: gl.getExtension('OES_texture_half_float'), + textureHalfFloatLinear: gl.getExtension('OES_texture_half_float_linear'), }); } else if (this.webGLVersion === 2) { Object.assign(this.extensions, { anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), + // Floats and half-floats + colorBufferFloat: gl.getExtension('EXT_color_buffer_float'), + textureHalfFloat: gl.getExtension('OES_texture_float_linear'), + textureHalfFloatLinear: gl.getExtension('OES_texture_half_float_linear'), }); } } diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index ddde146..ad30729 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -159,19 +159,27 @@ Object.assign(this.extensions, { drawBuffers: gl.getExtension('WEBGL_draw_buffers'), depthTexture: gl.getExtension('WEBKIT_WEBGL_depth_texture'), - floatTexture: gl.getExtension('OES_texture_float'), loseContext: gl.getExtension('WEBGL_lose_context'), vertexArrayObject: gl.getExtension('OES_vertex_array_object') || gl.getExtension('MOZ_OES_vertex_array_object') || gl.getExtension('WEBKIT_OES_vertex_array_object'), anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), uint32ElementIndex: gl.getExtension('OES_element_index_uint'), + // Floats and half-floats + floatTexture: gl.getExtension('OES_texture_float'), + floatTextureLinear: gl.getExtension('OES_texture_float_linear'), + textureHalfFloat: gl.getExtension('OES_texture_half_float'), + textureHalfFloatLinear: gl.getExtension('OES_texture_half_float_linear'), }); } else if (this.webGLVersion === 2) { Object.assign(this.extensions, { anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), + // Floats and half-floats + colorBufferFloat: gl.getExtension('EXT_color_buffer_float'), + textureHalfFloat: gl.getExtension('OES_texture_float_linear'), + textureHalfFloatLinear: gl.getExtension('OES_texture_half_float_linear'), }); } } diff --git a/packages/core/src/textures/GLTexture.js b/packages/core/src/textures/GLTexture.js index 0168fe1..827394d 100644 --- a/packages/core/src/textures/GLTexture.js +++ b/packages/core/src/textures/GLTexture.js @@ -48,5 +48,17 @@ * @member {number} */ this.wrapMode = 33071; + + /** + * Type copied from baseTexture + * @member {number} + */ + this.type = 6408; + + /** + * Type copied from baseTexture + * @member {number} + */ + this.internalFormat = 5121; } } diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index ddde146..ad30729 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -159,19 +159,27 @@ Object.assign(this.extensions, { drawBuffers: gl.getExtension('WEBGL_draw_buffers'), depthTexture: gl.getExtension('WEBKIT_WEBGL_depth_texture'), - floatTexture: gl.getExtension('OES_texture_float'), loseContext: gl.getExtension('WEBGL_lose_context'), vertexArrayObject: gl.getExtension('OES_vertex_array_object') || gl.getExtension('MOZ_OES_vertex_array_object') || gl.getExtension('WEBKIT_OES_vertex_array_object'), anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), uint32ElementIndex: gl.getExtension('OES_element_index_uint'), + // Floats and half-floats + floatTexture: gl.getExtension('OES_texture_float'), + floatTextureLinear: gl.getExtension('OES_texture_float_linear'), + textureHalfFloat: gl.getExtension('OES_texture_half_float'), + textureHalfFloatLinear: gl.getExtension('OES_texture_half_float_linear'), }); } else if (this.webGLVersion === 2) { Object.assign(this.extensions, { anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), + // Floats and half-floats + colorBufferFloat: gl.getExtension('EXT_color_buffer_float'), + textureHalfFloat: gl.getExtension('OES_texture_float_linear'), + textureHalfFloatLinear: gl.getExtension('OES_texture_half_float_linear'), }); } } diff --git a/packages/core/src/textures/GLTexture.js b/packages/core/src/textures/GLTexture.js index 0168fe1..827394d 100644 --- a/packages/core/src/textures/GLTexture.js +++ b/packages/core/src/textures/GLTexture.js @@ -48,5 +48,17 @@ * @member {number} */ this.wrapMode = 33071; + + /** + * Type copied from baseTexture + * @member {number} + */ + this.type = 6408; + + /** + * Type copied from baseTexture + * @member {number} + */ + this.internalFormat = 5121; } } diff --git a/packages/core/src/textures/TextureSystem.js b/packages/core/src/textures/TextureSystem.js index edf279a..87a7079 100644 --- a/packages/core/src/textures/TextureSystem.js +++ b/packages/core/src/textures/TextureSystem.js @@ -2,7 +2,7 @@ import BaseTexture from './BaseTexture'; import GLTexture from './GLTexture'; import { removeItems } from '@pixi/utils'; -import { MIPMAP_MODES, WRAP_MODES, SCALE_MODES } from '@pixi/constants'; +import { MIPMAP_MODES, WRAP_MODES, SCALE_MODES, TYPES } from '@pixi/constants'; /** * System plugin to the renderer to manage textures. @@ -232,6 +232,34 @@ return glTexture; } + initTextureType(texture, glTexture) + { + glTexture.internalFormat = texture.format; + glTexture.type = texture.type; + if (this.webGLVersion !== 2) + { + return; + } + const gl = this.renderer.gl; + + if (texture.type === gl.FLOAT + && texture.format === gl.RGBA) + { + glTexture.internalFormat = gl.RGBA32F; + } + // that's WebGL1 HALF_FLOAT_OES + // we have to convert it to WebGL HALF_FLOAT + if (texture.type === TYPES.HALF_FLOAT) + { + glTexture.type = gl.HALF_FLOAT; + } + if (glTexture.type === gl.HALF_FLOAT + && texture.format === gl.RGBA) + { + glTexture.internalFormat = gl.RGBA16F; + } + } + /** * Update a texture * @@ -243,6 +271,8 @@ const glTexture = texture._glTextures[this.CONTEXT_UID]; const renderer = this.renderer; + this.initTextureType(texture, glTexture); + if (texture.resource && texture.resource.upload(renderer, texture, glTexture)) { // texture is uploaded, dont do anything! @@ -262,12 +292,12 @@ glTexture.height = height; gl.texImage2D(texture.target, 0, - texture.format, + glTexture.internalFormat, width, height, 0, texture.format, - texture.type, + glTexture.type, null); } } diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index ddde146..ad30729 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -159,19 +159,27 @@ Object.assign(this.extensions, { drawBuffers: gl.getExtension('WEBGL_draw_buffers'), depthTexture: gl.getExtension('WEBKIT_WEBGL_depth_texture'), - floatTexture: gl.getExtension('OES_texture_float'), loseContext: gl.getExtension('WEBGL_lose_context'), vertexArrayObject: gl.getExtension('OES_vertex_array_object') || gl.getExtension('MOZ_OES_vertex_array_object') || gl.getExtension('WEBKIT_OES_vertex_array_object'), anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), uint32ElementIndex: gl.getExtension('OES_element_index_uint'), + // Floats and half-floats + floatTexture: gl.getExtension('OES_texture_float'), + floatTextureLinear: gl.getExtension('OES_texture_float_linear'), + textureHalfFloat: gl.getExtension('OES_texture_half_float'), + textureHalfFloatLinear: gl.getExtension('OES_texture_half_float_linear'), }); } else if (this.webGLVersion === 2) { Object.assign(this.extensions, { anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), + // Floats and half-floats + colorBufferFloat: gl.getExtension('EXT_color_buffer_float'), + textureHalfFloat: gl.getExtension('OES_texture_float_linear'), + textureHalfFloatLinear: gl.getExtension('OES_texture_half_float_linear'), }); } } diff --git a/packages/core/src/textures/GLTexture.js b/packages/core/src/textures/GLTexture.js index 0168fe1..827394d 100644 --- a/packages/core/src/textures/GLTexture.js +++ b/packages/core/src/textures/GLTexture.js @@ -48,5 +48,17 @@ * @member {number} */ this.wrapMode = 33071; + + /** + * Type copied from baseTexture + * @member {number} + */ + this.type = 6408; + + /** + * Type copied from baseTexture + * @member {number} + */ + this.internalFormat = 5121; } } diff --git a/packages/core/src/textures/TextureSystem.js b/packages/core/src/textures/TextureSystem.js index edf279a..87a7079 100644 --- a/packages/core/src/textures/TextureSystem.js +++ b/packages/core/src/textures/TextureSystem.js @@ -2,7 +2,7 @@ import BaseTexture from './BaseTexture'; import GLTexture from './GLTexture'; import { removeItems } from '@pixi/utils'; -import { MIPMAP_MODES, WRAP_MODES, SCALE_MODES } from '@pixi/constants'; +import { MIPMAP_MODES, WRAP_MODES, SCALE_MODES, TYPES } from '@pixi/constants'; /** * System plugin to the renderer to manage textures. @@ -232,6 +232,34 @@ return glTexture; } + initTextureType(texture, glTexture) + { + glTexture.internalFormat = texture.format; + glTexture.type = texture.type; + if (this.webGLVersion !== 2) + { + return; + } + const gl = this.renderer.gl; + + if (texture.type === gl.FLOAT + && texture.format === gl.RGBA) + { + glTexture.internalFormat = gl.RGBA32F; + } + // that's WebGL1 HALF_FLOAT_OES + // we have to convert it to WebGL HALF_FLOAT + if (texture.type === TYPES.HALF_FLOAT) + { + glTexture.type = gl.HALF_FLOAT; + } + if (glTexture.type === gl.HALF_FLOAT + && texture.format === gl.RGBA) + { + glTexture.internalFormat = gl.RGBA16F; + } + } + /** * Update a texture * @@ -243,6 +271,8 @@ const glTexture = texture._glTextures[this.CONTEXT_UID]; const renderer = this.renderer; + this.initTextureType(texture, glTexture); + if (texture.resource && texture.resource.upload(renderer, texture, glTexture)) { // texture is uploaded, dont do anything! @@ -262,12 +292,12 @@ glTexture.height = height; gl.texImage2D(texture.target, 0, - texture.format, + glTexture.internalFormat, width, height, 0, texture.format, - texture.type, + glTexture.type, null); } } diff --git a/packages/core/src/textures/resources/BufferResource.js b/packages/core/src/textures/resources/BufferResource.js index 8e1f053..0695e97 100644 --- a/packages/core/src/textures/resources/BufferResource.js +++ b/packages/core/src/textures/resources/BufferResource.js @@ -70,26 +70,15 @@ glTexture.width = baseTexture.width; glTexture.height = baseTexture.height; - let internalFormat = baseTexture.format; - - // guess sized format by type and format - // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D - if (renderer.context.webGLVersion === 2 - && baseTexture.type === renderer.gl.FLOAT - && baseTexture.format === renderer.gl.RGBA) - { - internalFormat = renderer.gl.RGBA32F; - } - gl.texImage2D( baseTexture.target, 0, - internalFormat, + glTexture.internalFormat, baseTexture.width, baseTexture.height, 0, baseTexture.format, - baseTexture.type, + glTexture.type, this.data ); }