Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WebGPURenderer: Support KTX Compressed texture in the WebGL Backend #27463

Merged
merged 7 commits into from
Dec 31, 2023
Merged

WebGPURenderer: Support KTX Compressed texture in the WebGL Backend #27463

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
29722f1
wip
RenaudRohlinger Dec 28, 2023
bb8482f
cleanup webgl backend
RenaudRohlinger Dec 28, 2023
b6be5e1
cleanup and add silentError
RenaudRohlinger Dec 29, 2023
07411ac
cleanup WebGLTextureUtils
RenaudRohlinger Dec 29, 2023
c785565
move textures to textureutils
RenaudRohlinger Dec 29, 2023
86e26d5
Merge remote-tracking branch 'upstream/dev' into webgl-ktxsupport
RenaudRohlinger Dec 29, 2023
fc18b35
remove handling error in hasFeatre
RenaudRohlinger Dec 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions examples/jsm/loaders/KTX2Loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,11 +126,11 @@ class KTX2Loader extends Loader {

this.workerConfig = {
astcSupported: renderer.hasFeature( 'texture-compression-astc' ),
etc1Supported: false,
etc1Supported: renderer.hasFeature( 'texture-compression-etc1' ),
etc2Supported: renderer.hasFeature( 'texture-compression-etc2' ),
dxtSupported: renderer.hasFeature( 'texture-compression-bc' ),
bptcSupported: false,
pvrtcSupported: false
bptcSupported: renderer.hasFeature( 'texture-compression-bptc' ),
pvrtcSupported: renderer.hasFeature( 'texture-compression-pvrtc' )
Mugen87 marked this conversation as resolved.
Show resolved Hide resolved
};

} else {
Expand Down
174 changes: 31 additions & 143 deletions examples/jsm/renderers/webgl/WebGLBackend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import WebGLUtils from './utils/WebGLUtils.js';
import WebGLTextureUtils from './utils/WebGLTextureUtils.js';
import WebGLExtensions from './utils/WebGLExtensions.js';
import WebGLCapabilities from './utils/WebGLCapabilities.js';

import { GLFeatureName } from './utils/WebGLConstants.js';
//

class WebGLBackend extends Backend {
Expand All @@ -22,9 +22,9 @@ class WebGLBackend extends Backend {

}

async init( renderer ) {
init( renderer ) {

await super.init( renderer );
super.init( renderer );

//

Expand All @@ -40,7 +40,6 @@ class WebGLBackend extends Backend {
this.textureUtils = new WebGLTextureUtils( this );
this.state = new WebGLState( this );
this.utils = new WebGLUtils( this );
this.defaultTextures = {};

this.extensions.get( 'EXT_color_buffer_float' );
this._currentContext = null;
Expand Down Expand Up @@ -439,7 +438,7 @@ class WebGLBackend extends Backend {

}

needsRenderUpdate( renderObject ) {
needsRenderUpdate( /*renderObject*/ ) {

return false;

Expand All @@ -453,173 +452,50 @@ class WebGLBackend extends Backend {

// textures

createSampler( /*texture*/ ) {

//console.warn( 'Abstract class.' );

}

createDefaultTexture( texture ) {

const { gl, textureUtils, defaultTextures } = this;

const glTextureType = textureUtils.getGLTextureType( texture );

let textureGPU = defaultTextures[ glTextureType ];

if ( textureGPU === undefined ) {

textureGPU = gl.createTexture();

gl.bindTexture( glTextureType, textureGPU );
gl.texParameteri( glTextureType, gl.TEXTURE_MIN_FILTER, gl.NEAREST );
gl.texParameteri( glTextureType, gl.TEXTURE_MAG_FILTER, gl.NEAREST );

//gl.texImage2D( target + i, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data );

defaultTextures[ glTextureType ] = textureGPU;

}

this.set( texture, {
textureGPU,
glTextureType,
isDefault: true
} );
this.textureUtils.createDefaultTexture( texture );

}

createTexture( texture, options ) {

const { gl, utils, textureUtils } = this;
const { levels, width, height, depth } = options;

const glFormat = utils.convert( texture.format, texture.colorSpace );
const glType = utils.convert( texture.type );
const glInternalFormat = textureUtils.getInternalFormat( texture.internalFormat, glFormat, glType, texture.colorSpace, texture.isVideoTexture );

const textureGPU = gl.createTexture();
const glTextureType = textureUtils.getGLTextureType( texture );

gl.bindTexture( glTextureType, textureGPU );

gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, texture.flipY );
gl.pixelStorei( gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultiplyAlpha );
gl.pixelStorei( gl.UNPACK_ALIGNMENT, texture.unpackAlignment );
gl.pixelStorei( gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE );

textureUtils.setTextureParameters( glTextureType, texture );

gl.bindTexture( glTextureType, textureGPU );

if ( texture.isDataArrayTexture ) {

gl.texStorage3D( gl.TEXTURE_2D_ARRAY, levels, glInternalFormat, width, height, depth );

} else if ( ! texture.isVideoTexture ) {

gl.texStorage2D( glTextureType, levels, glInternalFormat, width, height );

}

this.set( texture, {
textureGPU,
glTextureType,
glFormat,
glType,
glInternalFormat
} );
this.textureUtils.createTexture( texture, options );

}

updateTexture( texture, options ) {

const { gl } = this;
const { width, height } = options;
const { textureGPU, glTextureType, glFormat, glType, glInternalFormat } = this.get( texture );

const getImage = ( source ) => {

if ( source.isDataTexture ) {

return source.image.data;

} else if ( source instanceof ImageBitmap || source instanceof OffscreenCanvas || source instanceof HTMLImageElement || source instanceof HTMLCanvasElement ) {

return source;

}

return source.data;

};

gl.bindTexture( glTextureType, textureGPU );

if ( texture.isCubeTexture ) {

const images = options.images;

for ( let i = 0; i < 6; i ++ ) {

const image = getImage( images[ i ] );

gl.texSubImage2D( gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, 0, 0, width, height, glFormat, glType, image );

}

} else if ( texture.isDataArrayTexture ) {

const image = options.image;

gl.texSubImage3D( gl.TEXTURE_2D_ARRAY, 0, 0, 0, 0, image.width, image.height, image.depth, glFormat, glType, image.data );

} else if ( texture.isVideoTexture ) {

texture.update();

gl.texImage2D( glTextureType, 0, glInternalFormat, glFormat, glType, options.image );


} else {

const image = getImage( options.image );

gl.texSubImage2D( glTextureType, 0, 0, 0, width, height, glFormat, glType, image );

}
this.textureUtils.updateTexture( texture, options );

}

generateMipmaps( texture ) {

const { gl } = this;
const { textureGPU, glTextureType } = this.get( texture );

gl.bindTexture( glTextureType, textureGPU );
gl.generateMipmap( glTextureType );
this.textureUtils.generateMipmaps( texture );

}

destroyTexture( texture ) {

const { gl } = this;
const { textureGPU } = this.get( texture );

gl.deleteTexture( textureGPU );

this.delete( texture );
this.textureUtils.destroyTexture( texture );

}

destroySampler() {}

copyTextureToBuffer( texture, x, y, width, height ) {

return this.textureUtils.copyTextureToBuffer( texture, x, y, width, height );

}

createSampler( /*texture*/ ) {

//console.warn( 'Abstract class.' );

}

destroySampler() {}

// node builder

createNodeBuilder( object, renderer, scene = null ) {
Expand Down Expand Up @@ -886,12 +762,24 @@ class WebGLBackend extends Backend {

}

hasFeature( /*name*/ ) {
hasFeature( name ) {

const keysMatching = Object.keys( GLFeatureName ).filter( key => GLFeatureName[ key ] === name );

const extensions = this.extensions;

for ( let i = 0; i < keysMatching.length; i ++ ) {


return true;
if ( extensions.has( keysMatching[ i ] ) ) return true;

}

return false;

}


getMaxAnisotropy() {

return this.capabilities.getMaxAnisotropy();
Expand Down
11 changes: 11 additions & 0 deletions examples/jsm/renderers/webgl/utils/WebGLConstants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export const GLFeatureName = {

'WEBGL_compressed_texture_astc': 'texture-compression-astc',
'WEBGL_compressed_texture_etc': 'texture-compression-etc2',
'WEBGL_compressed_texture_etc1': 'texture-compression-etc1',
'WEBGL_compressed_texture_pvrtc': 'texture-compression-pvrtc',
'WEBKIT_WEBGL_compressed_texture_pvrtc': 'texture-compression-pvrtc',
'WEBGL_compressed_texture_s3tc': 'texture-compression-bc',
'EXT_texture_compression_bptc': 'texture-compression-bptc',

};