zoukankan      html  css  js  c++  java
  • 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 );
        
    
  • 相关阅读:
    转《编程之美——微软技术面试心得》勘误表
    第一次 学习使用 智能指针
    test _todel
    (转 todo阅读)Android 官方博客 Android应用程序的内存分析(翻译)
    msdn snmp trap 研究可否 重入 转《Multiple Trap Registrations》
    wpbars在博客园开博客了
    创业失败的10个教训总结
    winform 的一种登录方法。
    快速建立Subversion
    (转)SQL Server 按某一字段分组取最大(小)值所在行的数据
  • 原文地址:https://www.cnblogs.com/xiaxiangx/p/13776670.html
Copyright © 2011-2022 走看看