(Uniforms) Example of rendering multiple times to the same texture does not work

[4DLaCode]

Even if it is slow.. I tried to actually get it working. From Vulkan I know that there are use cases where one want to render multiple times to the same texture. But even with more experimentation I didn't get it working. The shown example produces an error that the texture we are rendering to, has been already destroyed. And yes I found a stack overflow article about it that when the texture is submitted it gets destroyed. But within a frame the getCurrentTexture() method should return a new instance pointing to the same image.

Since I know Vulkan a bit tried to created a second renderPassDescriptor with loadOp = "load" so that the next submit would not overwrite the previous rendered triangle. Then I see that when I resize the window, a triangle at a previous location is sometimes visible... but the end result is that one triangle is drawn at the right side but nothing else...

Code from tutorial:
`// BAD! Slow!
for (let x = -1; x < 1; x += 0.1) {
uniformValues.set([x, 0], kOffsetOffset);
device.queue.writeBuffer(uniformBuffer, 0, uniformValues);

  const encoder = device.createCommandEncoder();
  const pass = encoder.beginRenderPass(renderPassDescriptor);
  pass.setPipeline(pipeline);
  pass.setBindGroup(0, bindGroup);
  pass.draw(3);
  pass.end();

  // Finish encoding and submit the commands
  const commandBuffer = encoder.finish();
  device.queue.submit([commandBuffer]);
}`

And here is my last test:

`async function Render()
{
const aspect = canvas.width / canvas.height;
uniformValues.set([0.5 / aspect, 0.5], scaleOffset);

    // BAD! Slow version we record and submit a command buffer for each triangle we draw.
    const isFirstPass = true;
    for (let x = -1;  x < 1; x += 0.1)
    {
        uniformValues.set([x, 0], offsetOffset);
        device.queue.writeBuffer(uniformBuffer, 0, uniformValues);

        const encoder = device.createCommandEncoder();

        if (isFirstPass)
        {
            renderPassDecriptor.colorAttachments[0].view = context.getCurrentTexture().createView();
        
            const pass = encoder.beginRenderPass(renderPassDecriptor);

            pass.setPipeline(pipeline);
            pass.setBindGroup(0, bindGroup);
            pass.draw(3);
            pass.end();
        }
        else
        {
            renderPassDecriptorNoClear.colorAttachments[0].view = context.getCurrentTexture().createView();

            const pass = encoder.beginRenderPass(renderPassDecriptorNoClear);

            pass.setPipeline(pipeline);
            pass.setBindGroup(0, bindGroup);
            pass.draw(3);
            pass.end();
        }

        device.queue.submit([ encoder.finish() ]);
        await device.queue.onSubmittedWorkDone();
    }
}`

[greggman]

I am not exactly sure what you're asking.

You're correct, to draw to the same texture without erasing what's there you use loadOp: 'load'

The canvas texture is always temporary. You call gpuCanvasContext.getCurrentTexture() and the texture it returns is only valid until the next JavaScript task (effectively the next frame).

So, if you want what as drawn before to appear again you have 2 options

1. Like a game, draw everything ever time.

   Let's say you're making Pong. You need to draw 2 paddles and a ball and the net (the line in the middle). Your code would look something like this

  function render() {
     updateBallPosition();
     updatePaddlePositions();

     const canvasTexture = context.getCurrentTexture()

     drawNet(canvasTexture);
     drawPaddles(canvasTexture);
     drawBall(canvasTexture);

     requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

Where you use canvasTexture in render passes (of course it's best to use one as few render passes as possible so if you can draw all 4 things in one pass that's great.

If you want to do something like photoshop, where you draw into a texture and keep drawing on top of it, then you need to make your own texture. You draw to that texture, and then draw that texture to the canvas.

Considering that texture you create to be like a "document" in photoshop. It can be any size yo want, and when you draw it you decide which portion to display and what size to display it.

In that case it would be more like this

  const documentTexture = device.createTexture({...});

  function onPointerMove(event) {
     const pos = convertPointerCoordinateToDocumentCoordinate(event);
     drawBrushToTexture(documentTexture);

     // now draw texture to canvas
     const canvasTexture = context.getCurrentTexture()

     drawDocumentTexture(documentTexture, canvasTexture);
  }
}

Note: it would probably be best to instead of drawing the canvas in the mouse event itself, just queue a requestAnimationFrame (if you have not already queued one) to draw the texture to a canvas. That way, if you get lots of pointer events in the same frame, you don't waste time trying to update the canvas multiple times in a frame.

example: https://jsgist.org/?src=75fea750283c11851e9e5f45e73c8134

also a version with multi-sampling

https://jsgist.org/?src=9f4a130a369418b039316a97603b7ca7