Copy a 3D PGraphics? (Processing.js)

edited March 2017 in JavaScript Mode

Rationale: The problem I'm trying to solve is I want to rotate a camera around to show different viewpoints on a complex 3D surface that is very time expensive to redraw. But it's not changing it's shape. Thus I'd like to draw it once then rotate the camera (or it) and then just generate images to show on the screen.

pattern:
t = createGraphics(size and stuff)
<fill it with a TRIANGLE_STRIP surface>
draw() {
  camera( changing parameters go here )
  image( t,  more_parameters)
}

What I expected was the image to show a rotating object as the camera is changed.

What happens: I just the very first image perpetually, then nothing changes.

If instead I put the creation and triangle_strip drawing into the draw loop so it is redrawn every time then I get what I expect to see but of course I'm having to recreate the 3D object every time.

Regression: My wild guess here is that calling Image is forcing some delayed lazy rendering of the graphics, and then subsequent calls do not re-render the image even if the graphics was rotated. Somehow this would seem like a lousy behaviour so I'm sort of doubting this theory. But I can't think of another one

I've tried using the following two commands to see based on the guess that I might be able to reset some lazy image creation flag to it wold recreate the image but these did not work-- get errors:

//t.Image.setLoaded(false);
//t.updatePixels() ;

So Maybe that guess is incorrect.

But if this sticky on-time rendering hypothesis. correct then maybe a solution would be to copy the graphics object before I display it so I can keep an unrendered copy.

if so then the problem becomes:

**Problem: ** how to duplicate a 3D PGraphics Object.

Note: this is 3D not 2D, so it's not the same as simply copying the pixels from one image to another.

Answers

  • Answer ✓

    Rationale: The problem I'm trying to solve is I want to rotate a camera around to show different viewpoints on a complex 3D surface that is very time expensive to redraw. But it's not changing it's shape. Thus I'd like to draw it once then rotate the camera (or it) and then just generate images to show on the screen.

    PShape is processing's easier to fathom vertex buffer object. define once, draw with a single call...

    https://processing.org/reference/PShape_beginShape_.html

  • edited March 2017

    Koogs, in the particular processing.js library I'm trying to use (the subset in Kahn Academy for an in-class assignment) it reports the createShape() is not a known command. nor is PShape. I suspect your answer would be very helpful otherwise if I didn't have that constraint. Perhaps I'm stuck. I was hoping there was someway to tell the PGraphics to update it's render instead.

  • [subject updated to mention processing.js]

  • edited March 2017 Answer ✓

    @cems --

    My wild guess here is that calling Image is forcing some delayed lazy rendering of the graphics

    This is not correct. Here is what happens based on your pseudo-code:

    // create a drawable canvas object separate from the drawable screen.
    // this is a 2D array of pixels.
    t = createGraphics(size and stuff)
    // use the 3D renderer to draw a particular view into the 2D array of pixels.
    // this only happens once because it is in setup.
    // it uses the default camera position because you haven't called camera() yet.
    <fill it with a TRIANGLE_STRIP surface>
    
    draw() {
      // change the angle from which future 3D renderings would be created.
      // this does nothing, because you don't do any more 3D rendering.
      camera( changing parameters go here )
      // copy the 2D array of pixels that you rendered in setup onto the screen.
      // this is just a bunch of pixels, like wallpaper. camera doesn't affect it.
      image( t,  more_parameters)
    }
    
  • thanks

Sign In or Register to comment.