0

I am trying to learn how adapting things to different screen resolutions works in three.js.

Unfortunately, I have not found anywhere a good and understandable explanation about what the metod "renderer.setSize();" really does. I have revised the official documentation, but the details given are very brief.

I appreciate your help.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Jorge Llombart
  • 11
  • 2
  • Out of curiosity, what additional information would you like to have from [`Renderer.setSize()` in the documentation](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setSize)? – M - Jan 29 '21 at 00:23

1 Answers1

0

You can freely look at the source: WebGLRenderer

So, setSize mostly configures the canvas size attributes and style, then calls setViewport...

In setViewport we see it set a Vector4 with the width/height info. It also goes on to configure the viewport on the state, which takes us into WebGLState...

In the WebGLState.viewport function, it also sets Vector4 values, but it also calls:

gl.viewport( viewport.x, viewport.y, viewport.z, viewport.w );

This is important, because it configures the viewport for the GL context.

MDN: WebGLRenderingContext.viewport

TheJim01
  • 8,411
  • 1
  • 30
  • 54
  • thank you very much for your answer !. I really needed to know the sequence of steps that that method carries out in order to understand where it could fit best in my code. So I guess what it basically does is a sort of canvas.height = canvas.clientHeight*pixelRatio; etc, right?. (that is, it modifies the drawing buffer). Also, in what way does it modify the viewport, like, what parameters does it send to gl.viewport?. Thank you ! – Jorge Llombart Jan 29 '21 at 04:36
  • And what is the difference between the three.js "camera" and the viewport?. isn't modifying the camera the same as modifying the viewport and viceversa?. Thanks! – Jorge Llombart Jan 29 '21 at 04:55
  • @JorgeLlombart Again, I recommend you look at the code so see what is sent to GL. A "camera," to put it simply, is an convenience interface to manipulating the view matrix and projection matrix. Discussing how it does this is well beyond the scope of this question/answer, so I recommend you ask separate questions, and continue to research 3D graphics and the three.js code. – TheJim01 Jan 29 '21 at 16:32