Some help with rendering a 2D onject and a 3D object at the same time in P3D?

Processing Beginners
1

Hi. So I have a scene rendered, but I can’t seem to have the sea and the arwing ship model rendered at the same time?

The arwing model (on the right) is a 3D .obj model exported from Blender. The sea is a 2D PImage (on the left) transformed to be in the correct position and orientation.

However, if I render the Arwing (3D object) first, the sea doesn’t render and if I render the Sea first (2D PImage), the arwing doesn’t render.

The skybox in the background is also a 3D sphere created using the PShape function.

Here is my code:

//Imports the sound library to allow sounds to be played
//Imports Peasy, a library used to create interactive cameras.
import processing.sound.*;
import peasy.*;



//Creates a variable to store data for the sound played in the background as well as
//an interactive camera.
SoundFile music;
PeasyCam camera;



//Creates a variable that will load the object from the data folder in the setup void
//Creates a variable used to store the background image.
PShape rwing;
PShape backgroundOb;
PImage landscape;
PImage sea;



//This float will be used to determine the speed at which the model should spin.
float sY;
float sZ;



//Anything in this void runs before the screen is drawn for the first time
void setup()
{

  //P3D allows the code to create a 3D Environment
  size(1920,1080,P3D);
  
  
  
  //Loads the grid texture for the background
  landscape = loadImage("background.png");
  
  sea = loadImage("sea.png");
  
  
  //Sets the default rotation speed for the model
  sY = 0.7;
  sZ = 0;
  
  
  
  //Creating a new interactive camera and sets its maximum and minimum zoom levels.
  camera = new PeasyCam(this, 100);
  camera.setMinimumDistance(3200);
  camera.setMaximumDistance(5000);
  
  
  
  //This generates the sphere that is used for the background and textures it.
  backgroundOb = createShape(SPHERE, 5000);
  noTint();
  backgroundOb.setTexture(landscape);
  backgroundOb.setStroke(false);
  
  
  
  //Loads the music and ensures that it loops.
  music = new SoundFile(this, "music.wav");
  music.loop();
  
  
  
  //Loads the rwing model I made in Blender and stores it in variable "rwing"
  rwing = loadShape("starwingShipKEELE.obj");
}


//Performs anything in this once every frame.
void draw()
{

  //Renders the background skybox
  shape(backgroundOb);
  
   //Renders the sea
  scale(200);
  translate (0,8,0);
  rotateX(radians(90));
  image(sea, -35, -35);
  
  //Scales the Rwing ship correctly, then displays it.
  scale(-2000, -700, -400);
  shape(rwing, 0, 0, 2, 1);
  //Rotates the rwing by the spin value on each frame.
  rwing.rotateY(radians(sY));
  


}

image
image1842×776 76.4 KB

2

It’s hard to say without having the 3d models and images. I think one of the problems is that you have objects with various scales. You render sea at -35, -35 but is it because the texture is 70x70? Just like you create the skymap, maybe it’s better to use PShape instead with createShape(RECT) or createShape(QUAD) so you know the actual scale in the code. And in general, it would be better to agree on a “universal” scale. For example, 1 unit is 1 meter (or 1 millimeter, whatever you like) - so if the 3D model is 2 meters wide, the width should be scaled as 2 in Blender. Then you only do scale once at the top of draw to fit the 2 meter to fill the half of the screen, for example, and other objects should follow the same unit (skymap with 5000 meaning 5km wide, for example). Otherwise, if you have various scales in one sketch, it becomes harder to track what is going on after adding a few objects.

Also please note that according to the guideline you should post a functional code without lines that are not relevant to your code: in this case, the sound playback. It may be good to see your progress but with irrelevant code it’s harder to spot the problem.

3

I figured out that I can utilise pushMatrix and popMatrix whilst rendering the Arwing 3D model before rendering the sea and that fixes the issue

Also I’ll be sure to do that in future for including code!

1 Like
4

Also check out #9 25 life-saving tips for Processing | Amnon P5 - Experiments with Processing by Amnon Owed