2

I've created a scene with two cameras and one renderer. each camera is looking at the scene from a different angle and I have the first camera rendering on the entire screen then the second camera I have rendering in a small view port laying on top of the first render. I was wondering if there is a way to have that second view port outlined so that each look separate

cal macconnachie
  • 35
  • 6

2 Answers2

4

Yes, you can outline an inset viewport by rendering a solid-colored rectangle slightly larger than the inset prior to rendering the inset.

// border
renderer.setScissorTest( true );
renderer.setScissor( x, y, width, height );
renderer.setClearColor( 0xffffff, 1 ); // border color
renderer.clearColor(); // clear color buffer

Then, render the inset. Just make sure the inset background is opaque.

three.js r.86

WestLangley
  • 102,557
  • 10
  • 276
  • 276
0

I guess you are using threejs viewport feature? As far as I know, by itself, it does not have such a feature.

But since it is rendered on to canvas... maybe you could draw an outline by yourself on canvas in desired coordinates, after each threejs render frame?

A basic example:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

(reference: https://www.w3schools.com/tags/canvas_rect.asp)

Scharnvirk
  • 339
  • 1
  • 7
  • Up-voting this because it's likely the simplest way to accomplish the desired effect without polluting the scene(s) and doing other rendering trickery. That said, you can't get a 2D context off a canvas which has already given a 3D context. You'd need to grab the image from the 3D canvas and draw it to a 2D canvas, _then_ draw the outline lines. – TheJim01 Jul 30 '17 at 22:35
  • Calling `getContext("2d")` returns `null`. – gpresland Nov 04 '19 at 18:21