ThreeJS源码学习5WebGLRenderer

代码1300多行，就不贴了，逐行分析。。。

canvas判断

在开头，主要是一些内置属性的定义，还有一小段canvas创建判断，如下，如果没有主动创建画布，则内部创建补上。

_canvas = parameters.canvas !== undefined ? parameters.canvas : createCanvasElement()

获取像素比

通过getTargetPixelRatio方法获取设置的像素比

function getTargetPixelRatio() {
            return _currentRenderTarget === null ? _pixelRatio : 1;
        }

获取上下文

通过getContext方法获取webgl的上下文，这里调用方法时通过浏览器支持情况自动选择是webgl2、webgl或者experimental-webgl（更早版本）

//定义
function getContext(contextNames, contextAttributes) {
            for (var i = 0; i < contextNames.length; i++) {
                var contextName = contextNames[i];

                var context = _canvas.getContext(contextName, contextAttributes);

                if (context !== null) return context;
            }

            return null;
        }
//调用
var contextNames = ['webgl2', 'webgl', 'experimental-webgl'];

                if (_this.isWebGL1Renderer === true) {
                    contextNames.shift();
                }

                _gl = getContext(contextNames, contextAttributes);

initGLContext

别看它只有五十行左右，但是调用了非常多的外部定义函数，所以专门拿来说一说，细节的部分后面再补，因为目前项目不太需要对此部分过分深入，大致作用就是获取上下文之后进行一些初始化，比如初始化当前浏览器支持的最高精度，对大buffer数等信息。
细节上：WebGLExtensions 是判断extension 是否存在; WebGLCapabilities 是获取当前 WebGL 系统的一些属性，如：支持的最大精度、是否是 WebGL 2.0 以及所支持的最大贴图大小等。而下面的 WebGLUtils 中只有一个 convert 方法，该方法主要是 将自定义的类型转换成 WebGL 内置的类型。
紧随其后的就是 WebGLState，” 通过这个 state，我们可以设置视口大小、设置混合、设置材质、绑定纹理等。

function initGLContext() {
			extensions = new WebGLExtensions(_gl);
			capabilities = new WebGLCapabilities(_gl, extensions, parameters);

			if (capabilities.isWebGL2 === false) {
				extensions.get('WEBGL_depth_texture');
				extensions.get('OES_texture_float');
				extensions.get('OES_texture_half_float');
				extensions.get('OES_texture_half_float_linear');
				extensions.get('OES_standard_derivatives');
				extensions.get('OES_element_index_uint');
				extensions.get('OES_vertex_array_object');
				extensions.get('ANGLE_instanced_arrays');
			}

			extensions.get('OES_texture_float_linear');
			utils = new WebGLUtils(_gl, extensions, capabilities);
			state = new WebGLState(_gl, extensions, capabilities);
			state.scissor(_currentScissor.copy(_scissor).multiplyScalar(_pixelRatio).floor());
			state.viewport(_currentViewport.copy(_viewport).multiplyScalar(_pixelRatio).floor());
			info = new WebGLInfo(_gl);
			properties = new WebGLProperties();
			textures = new WebGLTextures(_gl, extensions, state, properties, capabilities, utils, info);
			cubemaps = new WebGLCubeMaps(_this);
			attributes = new WebGLAttributes(_gl, capabilities);
			bindingStates = new WebGLBindingStates(_gl, extensions, attributes, capabilities);
			geometries = new WebGLGeometries(_gl, attributes, info, bindingStates);
			objects = new WebGLObjects(_gl, geometries, attributes, info);
			morphtargets = new WebGLMorphtargets(_gl);
			clipping = new WebGLClipping(properties);
			programCache = new WebGLPrograms(_this, cubemaps, extensions, capabilities, bindingStates, clipping);
			materials = new WebGLMaterials(properties);
			renderLists = new WebGLRenderLists(properties);
			renderStates = new WebGLRenderStates(extensions, capabilities);
			background = new WebGLBackground(_this, cubemaps, state, objects, _premultipliedAlpha);
			bufferRenderer = new WebGLBufferRenderer(_gl, extensions, info, capabilities);
			indexedBufferRenderer = new WebGLIndexedBufferRenderer(_gl, extensions, info, capabilities);
			info.programs = programCache.programs;
			_this.capabilities = capabilities;
			_this.extensions = extensions;
			_this.properties = properties;
			_this.renderLists = renderLists;
			_this.state = state;
			_this.info = info;
		}

WebXR

这是一组支持将渲染3D场景用来呈现虚拟世界（ VR）或将图形图像添加到现实世界（AR）的标准

var xr = new WebXRManager(_this, _gl);

ShadowMap

这里获取深度图估计就是生成阴影用的，内部还用了WebglRenderTarget。