Facemesh fullscreen camera render

🌵 Needle Engine
1

Is there a way to make the camera render on full screen instead of just in particular width like. I am trying not to have this grey area on the sides.

image
image410×515 49.6 KB

2

Hi Saad Baig,

To render the camera output in full screen without any grey areas on the sides, you can adjust the camera settings and the rendering size. Start by ensuring that the camera’s aspect ratio matches the window’s ratio. You can handle the resize event to update the camera and renderer sizes dynamically.

Here’s a pseudocode guideline to achieve this:

  1. Listen for the window resize event.
  2. Update the camera’s aspect ratio to window.innerWidth / window.innerHeight.
  3. Update the renderer’s size to window.innerWidth and window.innerHeight.
  4. Call camera.updateProjectionMatrix() after modifying the camera attributes.

Here’s the corresponding code snippet:

import { WebGLRenderer, PerspectiveCamera } from "three";

// Assuming these are defined somewhere in your code
const renderer = new WebGLRenderer();
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Function to update sizes
function updateSizes() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
}

// Initialize rendering
updateSizes(); // Call initially to set the sizes
window.addEventListener('resize', updateSizes); // Call on window resize

// Rendering loop
function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}
render();

Make sure you include this in your scene setup, and it should help eliminate the grey areas by matching the camera’s output to the full viewport dimensions.

For further information, you can refer to the Needle Engine API and the Three.js documentation on camera.

Let me know if you need additional help!

3 replies left
thread_BvA0lyQDAIb3B6OyjFXfcclr
Reply to this message to continue the conversation

3

Hi @saad_baig this is controlled by the camera in your scene (or more specifically by the aspect ratio of your user’s physical camera/webcam/mobile camera)

What you can do is to set the Background Color Alpha to 0 - it will then display your HTML website as a background (instead of the grey) and you can style it however you like (or display another content using your HTML)

This is in Unity on the Camera (I set it alpha to 0)
image

Another option would be to enforce a specific aspect ratio on your needle-engine element in e.g. src/styles/style.css (note that you might want to modify it further depending on your concrete project needs where/how to align the element)

image

4

I meant I don’t want solid or any other background. I want the camera render to be full on the window instead of the current aspect ratio.