How to take a snapshot of the pixels of a renderer and then render it?

Questions
1

I want to implement render on demand. I can not use this method. because the frame is constantly being redrawn by the framework. so I have to give the framework something each frame. however, it would be inefficient to render the scene in each frame. I was wondering if there is a way to render it only once and then save the pixels, and then keep giving the framework the saved pixels or buffer.

This is the framework I am using.

onDraw(
    gl: WebGLRenderingContext,
    transformer: google.maps.CoordinateTransformer
  ): void {
    const { lat, lng, altitude } = this.anchor;

    this.camera.projectionMatrix.fromArray(
      transformer.fromLatLngAltitude(
        { lat, lng },
        altitude,
        this.rotation,
        this.scale
      )
    );
    if(!this.camera.projectionMatrix.equals(this.oldCameraMatrix)){
      this.oldCameraMatrix.copy(this.camera.projectionMatrix);
      this.canRender=true;
      console.warn("cameraprojectionmatrix changed");
    }
    else{
      this.canRender=false;
    }
    gl.disable(gl.SCISSOR_TEST);

    
    
    this.requestRedraw();
    if(this.canRender){
      //render if sth changed
      this.renderer.render(this.scene, this.camera); 
    
      this.canRender=false;
    }
    else{
        //I need help here.if nth changed i just want to render the previous frame
     }
    
      }
      
      this.renderer.resetState();
  }
2

From your code I would assume, that its not the framework that’s causing constant redraws.

With this line you are unconditionally asking for the next frame. I would skip that entirely. Just render once when your aplication finds this necessary.

In the place/function where you decide to set

this.canRender = true

issue an this.requestRedraw() function call, followed by a this.canRender = false each time your function finds a redraw necessary.

3

you mean sth like this?

onDraw(
    gl: WebGLRenderingContext,
    transformer: google.maps.CoordinateTransformer
  ): void {
    const { lat, lng, altitude } = this.anchor;

    this.camera.projectionMatrix.fromArray(
      transformer.fromLatLngAltitude(
        { lat, lng },
        altitude,
        this.rotation,
        this.scale
      )
    );
    if(!this.camera.projectionMatrix.equals(this.oldCameraMatrix)){
      this.oldCameraMatrix.copy(this.camera.projectionMatrix);
      this.canRender=true;
      console.warn("cameraprojectionmatrix changed");
    }
    else{
      this.canRender=false;
    }
    gl.disable(gl.SCISSOR_TEST);

    //this.requestredraw removed

    if(this.canRender){
      //render if sth changed
      this.renderer.render(this.scene, this.camera); 
    
      this.canRender=false;
    }
    else{
        //I need help here.if nth changed i just want to render the previous frame
     }
    
      }
      
      this.renderer.resetState();
  }

renderOndemand(){
    this.requestRedraw(); //makes the framework call onDraw()
    this.canRender=true;
  }

this doesnt work. the scene gets rendered only on a single frame and then disappears.