How to use the webgl-operate.Texture2D function in webgl-operate

this._uFrame = this._program.uniform('u_frame');
        this._uRand = this._program.uniform('u_rand');
        this._uEye = this._program.uniform('u_eye');
        this._uViewport = this._program.uniform('u_viewport');

        this._program.bind();
        gl.uniform1i(this._program.uniform('u_hsphere'), 0);
        gl.uniform1i(this._program.uniform('u_lights'), 1);
        this._program.unbind();


        this._ndcTriangle.initialize(aVertex);


        // CREATE HEMISPHERE PATH SAMPLES and LIGHT AREA SAMPLES
        this._hsphereImage = new Texture2D(this._context, 'hsphereImage');
        this._lightsImage = new Texture2D(this._context, 'lightsImage');

        const points = this.pointsOnSphere(32 * 32);
        const samplerSize = Math.floor(Math.sqrt(points.length)); // shader expects 32
        const spherePoints = new Float32Array(samplerSize * samplerSize * 3);
        for (let i = 0; i < samplerSize * samplerSize; ++i) {
            spherePoints[3 * i + 0] = points[i][0];
            spherePoints[3 * i + 1] = points[i][1];
            spherePoints[3 * i + 2] = points[i][2];
        }

        // CREATE LIGHT AREA SAMPLES
        const lights = this.pointsInLight(light0, light1, 32 * 32);
        const lights2 = new Float32Array(lights.length * 3);
        let i2 = 0;
        for (const light of lights) {

protected generateSphere1Node(parent: SceneNode): SceneNode {
        const gl = this._context.gl;

        /* Create node and transform */
        const node = parent.addNode(new SceneNode('mesh'));
        const translate = mat4.fromTranslation(mat4.create(), vec3.fromValues(0.0, 0.0, 0.0));
        const scale = mat4.fromScaling(mat4.create(), vec3.fromValues(0.4, 0.4, 0.4));
        const transformMatrix = mat4.multiply(mat4.create(), translate, scale);

        const transform = new TransformComponent(transformMatrix);
        node.addComponent(transform);

        /* Create and load texture. */
        const texture = new Texture2D(this._context, 'Texture');
        texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        texture.fetch('./data/concrete_floor_02_diff_1k.webp', false).then(() => {
            this.invalidate(true);
        });

        /* Create material */
        const material = new SceneExampleMaterial(this._context, 'ExampleMaterial1');
        material.texture = texture;
        material.textured = true;

        /* Create geometry. */
        const geometry = new GeosphereGeometry(
            this._context,
            'mesh',
            1.0,
            true);

protected generateSphere1Node(parent: SceneNode): SceneNode {
        const gl = this._context.gl;

        /* Create node and transform */
        const node = parent.addNode(new SceneNode('mesh'));
        const translate = mat4.fromTranslation(mat4.create(), vec3.fromValues(0.0, 0.0, 0.0));
        const scale = mat4.fromScaling(mat4.create(), vec3.fromValues(0.4, 0.4, 0.4));
        const transformMatrix = mat4.multiply(mat4.create(), translate, scale);

        const transform = new TransformComponent(transformMatrix);
        node.addComponent(transform);

        /* Create and load texture. */
        const texture = new Texture2D(this._context, 'Texture');
        texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        texture.fetch('./data/concrete_floor_02_diff_1k.webp', false).then(() => {
            this.invalidate(true);
        });

        /* Create material */
        const material = new SceneExampleMaterial(this._context, 'ExampleMaterial1');
        material.texture = texture;
        material.textured = true;

        /* Create geometry. */
        const geometry = new GeosphereGeometry(
            this._context,
            'mesh',
            1.0,
            true);

this._hsphereImage.filter(gl.NEAREST, gl.NEAREST);
        this._lightsImage.wrap(gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE);
        this._lightsImage.filter(gl.NEAREST, gl.NEAREST);


        // scene textures for webgl1
        if (this._context.isWebGL1) {
            this._program.bind();
            gl.uniform1i(this._program.uniform('u_vertices'), 2);
            gl.uniform1i(this._program.uniform('u_indices'), 3);
            gl.uniform1i(this._program.uniform('u_colors'), 4);
            this._program.unbind();

            this._verticesImage = new Texture2D(this._context, 'verticesImage');
            this._indicesImage = new Texture2D(this._context, 'indicesImage');
            this._colorsImage = new Texture2D(this._context, 'colorsImage');

            this._indicesImage.initialize(indices.length / 4, 1, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE);
            this._indicesImage.data(indices);

            if (context.supportsTextureFloat) {
                this._verticesImage.initialize(vertices.length / 3, 1, gl.RGB, gl.RGB, gl.FLOAT);
                this._verticesImage.data(vertices);
                this._colorsImage.initialize(colors.length / 3, 1, gl.RGB, gl.RGB, gl.FLOAT);
                this._colorsImage.data(colors);
            } else {
                // no floats => encode float in 3 bytes
                this._verticesImage.initialize(vertices.length / 3 * 3, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
                this._verticesImage.data(this.encodeFloatArrayAndScale(vertices));
                this._colorsImage.initialize(colors.length / 3 * 3, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
                this._colorsImage.data(this.encodeFloatArray(colors));
            }

protected onInitialize(context: Context, callback: Invalidate,
        mouseEventProvider: MouseEventProvider,
        /* keyEventProvider: KeyEventProvider, */
        /* touchEventProvider: TouchEventProvider */): boolean {

        this._defaultFBO = new DefaultFramebuffer(context, 'DefaultFBO');
        this._defaultFBO.initialize();
        this._defaultFBO.bind();

        const gl = context.gl;
        const gl2facade = context.gl2facade;

        this._colorRenderTexture = new Texture2D(this._context, 'ColorRenderTexture');
        this._depthRenderbuffer = new Renderbuffer(this._context, 'DepthRenderbuffer');

        this._intermediateFBO = new Framebuffer(this._context, 'IntermediateFBO');
        this._blit = new BlitPass(this._context);
        this._blit.initialize();
        this._blit.readBuffer = gl2facade.COLOR_ATTACHMENT0;
        this._blit.drawBuffer = gl.BACK;
        this._blit.target = this._defaultFBO;
        this._blit.framebuffer = this._intermediateFBO;

        const frameSize = this._frameSize[0] > 0 && this._frameSize[1] > 0 ?
            [this._frameSize[0] * this._ssaaFactor, this._frameSize[1] * this._ssaaFactor] : [1, 1];
        this._colorRenderTexture.initialize(frameSize[0], frameSize[1],
            this._context.isWebGL2 ? gl.RGBA8 : gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE);
        this._depthRenderbuffer.initialize(frameSize[0], frameSize[1], gl.DEPTH_COMPONENT16);
        this._intermediateFBO.initialize([[gl2facade.COLOR_ATTACHMENT0, this._colorRenderTexture]

this._albedoTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        this._albedoTexture.wrap(gl.REPEAT, gl.REPEAT);
        this._albedoTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
        this._albedoTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
        this._promises.push(
            this._albedoTexture.fetch('./data/imagebasedlighting/Metal_001_basecolor.png', false));

        this._roughnessTexture = new Texture2D(context, 'RoughnessTexture');
        this._roughnessTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        this._roughnessTexture.wrap(gl.REPEAT, gl.REPEAT);
        this._roughnessTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
        this._roughnessTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
        this._promises.push(
            this._roughnessTexture.fetch('./data/imagebasedlighting/Metal_001_roughness.png', false));

        this._metallicTexture = new Texture2D(context, 'MetallicTexture');
        this._metallicTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        this._metallicTexture.wrap(gl.REPEAT, gl.REPEAT);
        this._metallicTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
        this._metallicTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
        this._promises.push(
            this._metallicTexture.fetch('./data/imagebasedlighting/Metal_001_metallic.png', false));

        this._normalTexture = new Texture2D(context, 'NormalTexture');
        this._normalTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        this._normalTexture.wrap(gl.REPEAT, gl.REPEAT);
        this._normalTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
        this._normalTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
        this._promises.push(
            this._normalTexture.fetch('./data/imagebasedlighting/Metal_001_normal.png', false));

        this._brdfLUT = new Texture2D(context, 'BRDFLookUpTable');

this._program.initialize([vert, frag], false);

        this._program.attribute('a_vertex', this._cuboid.vertexLocation);
        this._program.attribute('a_texCoord', this._cuboid.uvCoordLocation);
        this._program.link();
        this._program.bind();


        this._uViewProjection = this._program.uniform('u_viewProjection');
        const identity = mat4.identity(mat4.create());
        gl.uniformMatrix4fv(this._program.uniform('u_model'), gl.FALSE, identity);
        gl.uniform1i(this._program.uniform('u_texture'), 0);
        gl.uniform1i(this._program.uniform('u_textured'), false);


        this._texture = new Texture2D(context, 'Texture');
        this._texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        this._texture.wrap(gl.REPEAT, gl.REPEAT);
        this._texture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
        this._texture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);

        this._texture.fetch('./data/blue_painted_planks_diff_1k_modified.webp', false).then(() => {
            const gl = context.gl;

            this._program.bind();
            gl.uniform1i(this._program.uniform('u_textured'), true);

            this.invalidate(true);
        });


        this._camera = new Camera();

const identity = mat4.identity(mat4.create());
        gl.uniformMatrix4fv(this._program.uniform('u_model'), gl.FALSE, identity);
        gl.uniform1i(this._program.uniform('u_albedoTexture'), 0);
        gl.uniform1i(this._program.uniform('u_roughnessTexture'), 1);
        gl.uniform1i(this._program.uniform('u_metallicTexture'), 2);
        gl.uniform1i(this._program.uniform('u_normalTexture'), 3);
        gl.uniform1i(this._program.uniform('u_cubemap'), 4);
        gl.uniform1i(this._program.uniform('u_brdfLUT'), 5);

        gl.uniform1i(this._program.uniform('u_textured'), false);

        /**
         * Textures taken from https://3dtextures.me/2018/11/19/metal-001/ and modified
         */
        this._albedoTexture = new Texture2D(context, 'AlbedoTexture');
        this._albedoTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        this._albedoTexture.wrap(gl.REPEAT, gl.REPEAT);
        this._albedoTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
        this._albedoTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
        this._promises.push(
            this._albedoTexture.fetch('./data/imagebasedlighting/Metal_001_basecolor.png', false));

        this._roughnessTexture = new Texture2D(context, 'RoughnessTexture');
        this._roughnessTexture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        this._roughnessTexture.wrap(gl.REPEAT, gl.REPEAT);
        this._roughnessTexture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
        this._roughnessTexture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);
        this._promises.push(
            this._roughnessTexture.fetch('./data/imagebasedlighting/Metal_001_roughness.png', false));

        this._metallicTexture = new Texture2D(context, 'MetallicTexture');

this._program.initialize([vert, frag], false);

        this._program.attribute('a_vertex', this._cuboid.vertexLocation);
        this._program.attribute('a_texCoord', this._cuboid.uvCoordLocation);
        this._program.link();
        this._program.bind();


        this._uViewProjection = this._program.uniform('u_viewProjection');
        const identity = mat4.identity(mat4.create());
        gl.uniformMatrix4fv(this._program.uniform('u_model'), gl.FALSE, identity);
        gl.uniform1i(this._program.uniform('u_texture'), 0);
        gl.uniform1i(this._program.uniform('u_textured'), false);


        this._texture = new Texture2D(context, 'Texture');
        this._texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        this._texture.wrap(gl.REPEAT, gl.REPEAT);
        this._texture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR);
        this._texture.maxAnisotropy(Texture2D.MAX_ANISOTROPY);

        this._texture.fetch('./data/blue_painted_planks_diff_1k_modified.webp', false).then(() => {
            const gl = context.gl;

            this._program.bind();
            gl.uniform1i(this._program.uniform('u_textured'), true);

            this.invalidate(true);
        });

        this._camera = new Camera();
        this._camera.center = vec3.fromValues(0.0, 0.0, 0.0);