THREE.WebGLRenderer
WebGL Render 用WebGL渲染出你精心制作的场景
介绍
在之前的介绍中, 已经介绍过场景, 相机, 光源, 有了这些后, 就可以形成一个可观的三维展示效果, 但是, 若想让它展示在网页上, 就需要渲染器渲染到网页上
那WebGL又是啥, 这里借用百度的一段解释
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等
在本文中, 主要描述WebGLRenderer的一些属性方法, 后续再写各大元素整合的博文.
构造函数的使用
| 参数 | 含义 | 默认值 |
|---|---|---|
| canvas | 一个供渲染器绘制其输出的canvas它和下面的domElement属性对应。 如果没有传这个参数，会创建一个新canvas | 无 |
| context | 可用于将渲染器附加到已有的渲染环境(RenderingContext)中 | null |
| precision | 着色器精度. 可以是 "highp", "mediump" 或者 "lowp". 如果设备支持，默认为"highp" . 点击here 查看"应该避免的事" | highp |
| alpha | canvas是否包含alpha (透明度) | false |
| premultipliedAlpha | renderer是否假设颜色有 premultiplied alpha | true |
| antialias | 是否执行抗锯齿(效果更好, 开销更大) | false |
| stencil | 绘图缓存是否有一个至少8位的模板缓存(stencil buffer)) | true |
| preserveDrawingBuffer | 是否保留缓直到手动清除或被覆盖 | false |
| powerPreference | 提示用户代理怎样的配置更适用于当前WebGL环境。 可能是"high-performance", "low-power" 或 "default" | default |
| failIfMajorPerformanceCaveat | 检测到低性能时渲染器创建是否失败。 | false |
| depth | 绘图缓存是否有一个至少6位的深度缓存(depth buffer) | true |
| logarithmicDepthBuffer | 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要使用 | false |
其中, 大部分是平时用不上的, 很多我也还没具体使用过, 经常使用的有alpha和antialias, alpha可以让3维图透明, antialias可以让3维图变得更加清晰, 同时会让渲染器的压力加大.
属性
| 属性名: 类型 | 含义 | 默认值 |
|---|---|---|
| autoClear : Boolean | 定义渲染器是否在渲染每一帧之前自动清除其输出 | |
| autoClearColor : Boolean | 如果autoClear为true, 定义renderer是否清除颜色缓存 | true |
| autoClearDepth : Boolean | 如果autoClear是true, 定义renderer是否清除深度缓存 | true |
| autoClearStencil : Boolean | 如果autoClear是true, 定义renderer是否清除模板缓存 | true |
| debug.checkShaderErrors : Boolean | 如果checkShaderErrors为true，定义是否检查材质着色器程序 编译和链接过程中的错误。 禁用此检查生产以获得性能增益可能很有用。 强烈建议在开发期间保持启用这些检查。 如果着色器没有编译和链接 - 它将无法工作，并且相关材料将不会呈现 | true |
| capabilities : Object | 一个包含当前渲染环境(RenderingContext)的功能细节的对象。 | |
| clippingPlanes : Array | 用户自定义的剪裁平面，在世界空间中被指定为THREE.Plane对象。 这些平面全局使用。空间中与该平面点积为负的点将被切掉 | [] |
| domElement : DOMElement | 一个canvas，渲染器在其上绘制输出。渲染器的构造函数会自动创建(如果没有传入canvas参数);你需要做的仅仅是像下面这样将它加页面里去: | |
| extensions : Object | extensions.get方法的包装, 用于检查是否支持各种WebGL扩展 | |
| gammaFactor : Float | 2 | |
| outputEncoding : number | 定义渲染器的输出编码。如果渲染目标已经被设置使用。setrendertarget然后渲染目标。纹理。编码将被使用 | THREE. LinearEncoding |
| info : Object | 一个对象，包含有关图形板内存和渲染过程的一系列统计信息。这些信息可用于调试或仅仅满足下好奇心 | |
| localClippingEnabled : Boolean | 定义渲染器是否考虑对象级剪切平面 | false |
| maxMorphTargets : Integer | 一个着色器中允许的最大MorphTargets数,切记标准材质只允许8个MorphTargets。 | 8 |
| maxMorphNormals : Integer | 色器中允许的最大MorphNormal数。 切记标准材质只允许4个MorphNormal。 | 4 |
| physicallyCorrectLights : Boolean | 是否使用物理上正确的光照模式 | false |
| properties : Object | 渲染器内部使用，以跟踪各种子对象属性。 | |
| renderLists : WebGLRenderLists | 在内部用于处理场景渲染对象的排序 | |
| shadowMap : WebGLShadowMap | 如果使用，它包含阴影贴图的引用。 | |
| shadowMap.enabled : Boolean | 如果设置开启，允许在场景中使用阴影贴图 | false |
| shadowMap.autoUpdate : Boolean | 启用场景中的阴影自动更新 | true |
| shadowMap.needsUpdate : Boolean | 当被设为true, 场景中的阴影贴图会在下次render调用时刷新(如果你已经禁用了阴影贴图的自动更新(shadowMap.autoUpdate = false), 那么想要在下一次渲染时更新阴影的话就需要将此值设为true) | false |
| shadowMap.type : Integer | 定义阴影贴图类型 (未过滤, 关闭部分过滤, 关闭部分双线性过滤) | |
| sortObjects : Boolean | 定义渲染器是否应对对象进行排序 | true |
| state : Object | 包含设置WebGLRenderer.context状态的各种属性的函数 | |
| toneMapping : Constant | NoToneMapping | |
| toneMappingExposure : Number | 色调映射的曝光级别 | 1 |
| xr : WebXRManager | 提供对渲染器的WebXR相关接口的访问。 |
capabilities : Object
一个包含当前渲染环境(RenderingContext)的功能细节的对象。
- floatFragmentTextures: 环境是否支持OES_texture_float扩展。 根据WebGLStats, 截至2016年2月，超过95％的支持WebGL的设备支持此功能
- floatVertexTextures: 如果floatFragmentTextures和vertexTextures都是true， 则此值为true
- getMaxAnisotropy(): 返回最大可用各向异性。
- getMaxPrecision(): 返回顶点着色器和片元着色器的最大可用精度。
- isWebGL2: true if the context in use is a WebGL2RenderingContext object.
- logarithmicDepthBuffer: 如果logarithmicDepthBuffer在构造器中被设为true且 环境支持EXT_frag_depth扩展，则此值为true 根据WebGLStats, 截至2016年2月， 约66%的支持WebGL的设备支持此功能
- maxAttributes: gl.MAX_VERTEX_ATTRIBS的值
- maxCubemapSize: gl.MAX_CUBE_MAP_TEXTURE_SIZE 的值，着色器可使用的立方体贴图纹理的最大宽度高度
- maxFragmentUniforms: gl.MAX_FRAGMENT_UNIFORM_VECTORS的值，片元着色器可使用的全局变量(uniforms)数量
- maxTextureSize: gl.MAX_TEXTURE_SIZE的值，着色器可使用纹理的最大宽度高度
- maxTextures: *gl.MAX_TEXTURE_IMAGE_UNITS的值，着色器可使用的纹理数量
- maxVaryings: gl.MAX_VARYING_VECTORS的值，着色器可使用矢量的数量
- maxVertexTextures: gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS的值，顶点着色器可使用的纹理数量。
- maxVertexUniforms: gl.MAX_VERTEX_UNIFORM_VECTORS的值，顶点着色器可使用的全局变量(uniforms)数量
- precision: 渲染器当前使用的着色器的精度
- vertexTextures: 如果 .maxVertexTextures : Integer大于0，此值为true (即可以使用顶点纹理)
info : Object
一个对象，包含有关图形板内存和渲染过程的一系列统计信息。这些信息可用于调试或仅仅满足下好奇心。改对象包含以下字段:
- memory:
- geometries
- textures
- render:
- calls
- triangles
- points
- lines
- frame
- programs
默认情况下，每次调用渲染时这些数据都会重置。 但当时用一个或多个镜像时，最好使用自定义模式重置它们：renderer.info.autoReset = false; renderer.info.reset();
常见代码
renderer = new THREE.WebGLRenderer({
antialias: true,
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );