three.js学习5_渲染器

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 );