zoukankan      html  css  js  c++  java
  • Three.js WebGL 绘制流程(一)

    Three.js 中3D 物体 都继承于 Object3D;

    而构造一个3D 物体 需要 提供两个对象 即Gemotry 几何体 和 Material 材质。

     

    Gemotry 中 vertices 决定定点的 列表, face 决定面的构成, faceVertexUv 决定 纹理坐标

    而Material 不同类型将会采用不同类型的shader 来绘制, 通过 设定Material 的某些材质来开启默认shader的一些属性:例如map 属性将会开启纹理功能

     

    WebGL 中任何的绘制都需要提供shader, Three 自身提供了一些shader 模板, 这些模板和 Three提供的材质类型 以及3D 对象的类型相关;

    例如一个Mesh 类型的3D 对象, 通过PlaneGemotry 和 MeshBasicMaterial 来构造, 则 会采用编号为basic的shader

     

    在WebGlRender 这个文件中汇集了绘制的基本逻辑, 而 在ShaderUtil 文件中集中了shader 模板。

     

    一个场景的构成:

    Scene  Camera Object

    Scene 中一个数组存储了所有Object , 同时其通过继承 Object3D , 将整个场景也构成了一棵树。

    所有任何3d对象在加入到场景中时, 都会将入到最终的Scene对象的 内部数组中。

    在WebGLRender 中将会对Scene的这个数组进行遍历用于初始化 Shader 和 GPU 中的vertexBuffer texture.

     

    WebGL Render 中的Render函数, 接受 scene 和 camera 作为参数。

    首先初始化scene中的所有3d对象的shader 和 buffer, 

     initWebGLObjects

    场景初次初始化WebglObject:

         构建场景的webglObjects, webglObjectsImmediate webglSprites webglFlares

         对场景中所有新添加的物体 进行webgl的初始话 addObject  清空场景的新添加的object

        对于场景中 删除掉的物体, 进行webgl的清理 removeObject 清空场景删除的物体

        更新场景中所有的webglObject   updateObject

     

    更新场景中的世界矩阵:

    进行一系列照相机的处理(需要细化)

    设定绘制的目标, 默认是屏幕, 也可以是其它的framebuffer

     

    绘制所有webgl Object 包括由shader buffer texture 等 构成的一个对象

    绘制场景的排序物体, 涉及到 混合效果的物体

    绘制场景的立即物体  调用renderObjects  renderObjectsImmediate

     

    需要了解Three 的 webglObjects, webglObjectsImmediate webglSprites webglFlares 几种对象, 以及 sortedList 中的对象的 分别是什么。

     

    To be continued:

          照相机的处理

          Three的几种webgl对象

           renderObjects renderObjectsImmediate 函数 

     

     

     

     

  • 相关阅读:
    技术杂谈
    常用的shell命令
    Linux网络篇
    SELECT INTO 和 INSERT INTO SELECT 两种表复制语句
    asp.net远程调用WebService的两种方法
    使用C#和Java发送邮件(转载)
    转载:在64位的环境中使用VS建立Web项目进行Oracle连接需要注意WebDev是32位的
    也谈Asp.net 中的身份验证(转载)
    (转)32位win7用尽4g内存的几种解决方式
    64位WIN7下plsql报 ORA-12154:TNS:无法解析指定的连接标志符 错误的解决方法
  • 原文地址:https://www.cnblogs.com/liyonghelpme/p/4273794.html
Copyright © 2011-2022 走看看