can I create 3D objects in JS if I use my device's camera in the same project?

Question

This is my code start :

function setup() {    
  createCanvas(640, 480, WEBGL);    
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.position(0, 0);
  poseNet = ml5.poseNet(video);

  poseNet.on('pose', function(résult) {
    
    poses = results;     
  });
    
  video.hide();
}

When I create a Canvas to create 3D object like : createCanvas(640, 480, WEBGL) the displayed project changes shape and position.

My goal is to make a project where we see the video projected by the camera, with moving 3D objects.

Because you haven't shared your draw() function it is hard to understand what your desired result is. Given that you're having issue with the use WEBGL affecting size and position it seems likely that part of your issue is that when you use WEBGL the `(0, 0)` position is in the center of the window instead of the top left. You can fix that trivially with a call to `translate(-width / 2, -height / 2)`. If you post a minimal reproducible example as a runnable snippet that would be helpful. — Paul Wheeler, Aug 08 '21 at 06:11
https://stackoverflow.com/questions/67410651/how-do-i-include-a-runnable-p5-js-sketch-in-a-stackoverflow-question — Paul Wheeler, Aug 08 '21 at 06:12

score 0 · Answer 1 · answered Aug 09 '21 at 09:13

Yes, it is possible to use webcam video with a WEBGL p5.js renderer. Here is a trivial example:

function setup() {
  createCanvas(640, 480, WEBGL);
  noStroke();
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.position(0, 0);
  video.hide();
}

function draw() {
  background(0);

  // "Fix" the coordinate system
  translate(-width / 2, -height / 2);
  image(video, 0, 0, 640, 480);

  // Arbitrary demonstration of a 3d object drawn on top of the video
  directionalLight(255, 255, 255, width / 2 - mouseX, height / 2 - mouseY, -Math.min(width, height) / 2);

  fill('red');
  let x = frameCount % (width * 2);
  if (x > width) {
    x = width - (x - width);
  }
  let y = frameCount % (height * 2);
  if (y > height) {
    y = height - (y - height);
  }

  translate(x, y);
  sphere(20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Unfortunately this snippet doesn't completely work on StackOverflow because the iframe it runs in is restricted from accessing the webcam.

can I create 3D objects in JS if I use my device's camera in the same project?

1 Answers1