three.js - What does renderer.setSize really do?

Question

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.

question from:https://stackoverflow.com/questions/65942483/what-does-renderer-setsize-really-do

Answer 1

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