修改README

Example/Optimizations/FrustumCullingTest.html

@@ -25,6 +25,8 @@
     import MoreMath from "../../src/Core/Math3d/MoreMath.js";
     import Stats from "./../stats.min.js";
     import Camera from "../../src/Core/Scene/Camera.js";
+    import Vec4Vars from "../../src/Core/WebGL/Vars/Vec4Vars.js";
+    import FloatVars from "../../src/Core/WebGL/Vars/FloatVars.js";
     let scene = new Scene({cavnas:document.getElementById('canvas')});
     let testCamera = new Camera(scene, {id:'testCamera'});
     testCamera.lookAt(new Vector3(25, 0, 25), new Vector3(0, 0, 0), new Vector3(0, 1, 0));
@@ -33,7 +35,10 @@
     let materialDef = MaterialDef.load("../../src/Core/Assets/MaterialDef/BasicLightingDef");
     console.log("materialDef:",materialDef);
     let basicLightingMat = new Material(scene, {id:"basicLightingMat", materialDef});
-    basicLightingMat.selectTechnology('BlinnPhongLight2');
+    basicLightingMat.setParam('diffuseColor', new Vec4Vars().valueFromXYZW(0.5, 0.5, 0.5, 1.0));
+    basicLightingMat.setParam('specularColor', new Vec4Vars().valueFromXYZW(1.0, 1.0, 1.0, 1.0));
+    basicLightingMat.setParam('ambientColor', new Vec4Vars().valueFromXYZW(0.2, 0.2, 0.2, 1.0));
+    basicLightingMat.setParam('shininess', new FloatVars().valueOf(32.0));
 
     let wireFrustum = new Geometry(scene, {id:'wireFrustum'});
     // 根据当前相机创建测试用的视锥体

README.en.md

@@ -1,22 +1,126 @@
 # TEORT_WebGL
 
 #### Description
-对主流渲染技术的一些整理，包含基于com的架构设计，基于场景图的架构设计，改进的batch处理，各种剔除技术，光照，阴影，MTR，渲染队列划分等。
+This is my attempt at WebGL called TEORT series project. For fun, this project is mainly a renderer designed by some new ideas that I recently researched. Currently, the renderer is still in its infancy, but it contains some visible results. Initially the project was hosted on gite as a private project, now I also update it to github.
 
 #### Software Architecture
-Software architecture description
+1. Basic
+    1. Scene management
+        1. Based on the scene graph
+        2. Based on Component
+    2. Texture mapping
+        1. Support multi-channel uv
+        2. Support lightMap
+        3. Support mainstream texture mapping (normal mapping, inspection mapping, AO, etc., mainly related to materials, the design here is to support multi-channel uv, so that you can freely use the required mapping channels)
+    3. Optimization
+        1. By default, FrustumCulling is used for the scene (a quick solution, note that the object uses AABBBounding by default, you can also modify it to other BoundingVolume)
+        2. You can add OctCullingControl to the specified node, which will use Octree accelerated filtering on its node (all objects under the node) (will not conflict with the default FrustumCulling)
+        3. LodControl can be added to the object (usually a node inherited from Geometry), which will obtain "level of detail filtering". Note that the API for creating Lod data is not currently integrated (in theory, this should not be implemented on the web, so here I assume that the data is completed in the modeling phase)
+        4. Occlusion culling (software occlusion culling and hardware occlusion culling are currently deleted, I think this implementation is not good, so there is still room for improvement)
+        5. Instantiation rendering (it is expected to encapsulate instantiation rendering so that data instantiation can be facilitated. For animation, instantiation cannot currently be used)
+        6. Improved batch technology (it is expected to implement an improved batch technology to achieve hundreds of billions of geometric rendering on webGL and ensure its mobility and lighting at the same time)
+        7. Texture flow (originally planned this one, but save it to the next project and try again)
+    3. Some commonly used
+        1. FirstPersonController (for roaming)
+        2. Path (implement path animation)
+        3. Automatic calculation and repair of Tangents (so that it is needed for rendering)
+        4. There is no dependence on other math libraries, but a set of self-packaged (as independent as possible)
+    4. Supported external formats
+        1. Support GLTF model
+        2. Support OBJ model
+2. Multiple rendering paths (this part is not independently abstracted and packaged, and it is expected to join LightPrePass and Forward+)
+    1. Forward
+    2. Deferred
+3. Material definition
+    1. Compared with other WebGL renderers, provide a better interface for customizing material definitions so that users can define materials more conveniently
+    2. A Material definition can contain multiple technology blocks (Technology) in order to achieve technical support under different strategic requirements
+    3. A technology block (Technology) can contain multiple rendering blocks (SubPass), and each rendering block can specify the rendering path (RenderPath) it uses to achieve advanced and complex rendering needs
+    4. A rendering block (SubPass) can contain multiple rendering stages (Pass), and complex rendering usually requires multi-stage rendering
+    5. A rendering stage (Pass) can specify its rendering state to complete the rendering in the specified rendering state
+    6. A material definition can contain custom global variables. These global variables can be accessed throughout the renderer, so they can be shared and accessed between different materials
+4. Material
+    1. Built-in multiple material definitions to provide common material instance construction needs
+    2. BasicLightingDef, used to be compatible with the lighting needs of the old age
+    3. PrincipledLightingDef, used to create next-generation lighting needs
+4. Light
+    1. Support DirectionalLight, PointLight, SpotLight (Expected to join AreaLight)
+    2. Supports RefProbe (reflection probe) and GIProbe (light probe), but probe mixing is not currently implemented (actually I did it, but the effect is not good, so I don't use this solution)
+    3. Support SinglePass and MultiPass to complete multi-light source rendering
+    4. The light source management allows you to easily operate the light and access the light information in the shader (this requires an advanced part, you may need to check the definition method of MaterialDef)
+5. Shadows (currently not implemented)
+    1. Expected to achieve CSM and PSSM
+    2. PCF and other filtering methods are expected to be added
+    3. Expected to achieve PreShadow and PostShadow
+6. Animation
+    1. Support attribute animation, deformation animation and skeletal animation (hardware)
+    2. Multiple animation clips, multiple animation channels and animation mixing
+    3. Attachment binding, you can attach equipment or accessories to designated joints
+7. Terrain (to be implemented)
+    1. It is expected to join terrain management based on QuadTree and TerrainLod
+    2. It is expected to add terrain based on multiple data sources (heightmap, noise map, alphamap, sub-type data)
+    3. It is expected to add multi-channel mixing to create terrain in order to create a terrain texture that includes vegetation, roads, and rivers.
 
 #### Installation
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+1. At present, only ordinary js packages are packaged, which means you can only import the library through the script tag
+2. You can also clone the project, and then use webpack to package it as an amd or umd library
 
 #### Instructions
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+1. The following is a quick use case:
+    1. Since this is WebGL (meaning it runs on the Web), you need to provide a rendering device (usually Canvas):
+        ```html
+        <div style="width: 40%;height: 100%;position:fixed">
+                <canvas id="canvas" style="position:absolute;left: 0px;top: 0px;background-color: aliceblue" tabindex="0"></canvas>
+            </div>
+        ```
+    2. Then create a scene (Scene), add the scene to the renderer, and then start the renderer:
+        ```javascript
+        let scene = new Scene({cavnas:document.getElementById('canvas')});
+        let renderEngine = new RenderEngine();
+        renderEngine.addScene(scene);
+        renderEngine.launch();
+        ```
+    3. At this point, the canvas should be grayed out (the default clearColor is gray), you can now add a rendering instance to the scene, for the convenience of management, I added the following data (named rootNode as the root node, and then add a geometry, pay attention to the geometry):
+        ```javascript
+
+        // Create a geometry
+        let geometry = new Geometry(scene, {id:'testGeometry'});
+
+        // Create its mesh for this geometry
+        let mesh = new Mesh();
+        mesh.setData(Mesh.S_POSITIONS, [
+            -5, 5, 0,
+            -5, -5, 0,
+            5, 5, 0,
+            5, -5, 0
+        ]);
+        mesh.setData(Mesh.S_INDICES, [
+            0, 1, 2,
+            1, 2, 3
+        ]);
+        // bind geometry mesh
+        geometry.setMesh(mesh);
+        geometry.updateBound();
+
+        // Load a material definition
+        let materialDef = MaterialDef.load("./MyDef");
+        // Create a material
+        let mat = new Material(scene, {id:"colorMat", materialDef});
+        // Set the material used by the geometry
+        geometry.setMaterial(mat);
+
+        // Create a root node
+        let rootNode = new Node(scene, {id:'rootNode'});
+        // Add geometry as a child node of rootNode
+        rootNode.addChildren(geometry);
+        ```
+    4. You also need to add the rendering data to the scene, otherwise, these data are just created without participating in the rendering:
+        ```javascript
+        scene.addSceneNode(rootNode);
+        ```
+2. For more details, please check the wiki
+3. You can also refer to examples
 
 #### Contribution
 
@@ -26,11 +130,9 @@ Software architecture description
 4.  Create Pull Request
 
 
-#### Gitee Feature
+#### Contact me
 
-1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
-2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
-3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
-4.  The most valuable open source project [GVP](https://gitee.com/gvp)
-5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
-6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+If you have fun or want to talk to me about technology, you can contact me in the following ways:
+1. qq:1724624287
+2. email:[email protected]
+3. wechat:18402012144

README.md

@@ -1,24 +1,126 @@
 # TEORT_WebGL
 
 #### 介绍
-对主流渲染技术的一些整理，包含基于com的架构设计，基于场景图的架构设计，改进的batch处理，各种剔除技术，光照，阴影，MTR，渲染队列划分等。
-
-#### 软件架构
-WebGL,Com,GraphicsScene,ShadowMap,PhongLight,PBRLight,MTR,Occ,Octree,LOD,Batch,RenderList。
+这是我在名为TEORT系列项目的WebGL的一次尝试，出于好玩，该项目主要是我近期研究的一些新思路而设计而成的渲染器。目前，该渲染器还在初期阶段，但以包含一些可见成果。最初该项目作为私人项目托管在gite上，现在我同时将其更新到github上。
 
+#### 特性
+1.  基本
+    1.  场景管理
+        1.  基于场景图
+        2.  基于Component
+    2.  纹理映射
+        1.  支持多通道uv
+        2.  支持lightMap
+        3.  支持主流的纹理映射(法线映射，视察映射，AO等等，主要跟材质相关，这里的设计是支持多通道uv，以便可以自由使用所需要的映射通道)
+    3.  优化
+        1.  默认下,对场景使用FrustumCulling(一种快速的方案,注意,物体默认使用AABBBounding,你也可以修改为其他BoundingVolume)
+        2.  可以为指定的节点添加OctCullingControl,这将对其节点(该节点下的所有物体)使用Octree加速过滤(不会与默认的FrustumCulling冲突)
+        3.  可以为物体(通常是继承自Geometry的节点)添加LodControl,这将获得“细节层次过滤”,注意,目前未集成创建Lod数据的API(理论上,不应该在web上实现这个,所以这里我假设数据是建模阶段完成的)
+        4.  遮挡剔除(目前删掉了软件遮挡剔除和硬件遮挡剔除,我认为这实现不好,所以还有待改进这一步)
+        5.  实例化渲染(预计封装实例化渲染,以便可以方便进行数据实例化,对于动画,目前不能使用实例化)
+        6.  改进的batch技术(预计实现一种改进思路的batch技术,以便在webGL上实现上千亿几何渲染并同时保证其移动性和光照)
+        7.  纹理流(原本计划这一块,但是留到下一个项目再尝试)
+    3.  一些常用
+        1.  FirstPersonController(用于漫游)
+        2.  Path(实现路径动画)
+        3.  自动计算和修复Tangents(以便渲染需要)
+        4.  没有依赖其他数学库,而是自己封装的一套(尽可能独立)
+    4.  支持的外部格式
+        1.  支持GLTF模型
+        2.  支持OBJ模型
+2.  多渲染路径(这部分未独立抽象封装,预计加入LightPrePass和Forward+)
+    1.  Forward
+    2.  Deferred
+3.  Material定义
+    1.  对比其他WebGL渲染器,提供更良好自定义材质定义的接口,以便使用者可以更加方便的定义材质
+    2.  一个Material定义可以包含多个技术块(Technology),以便在实现在不同策略需求下的技术支持
+    3.  一个技术块(Technology)可以包含多个渲染块(SubPass),每个渲染块可以指定其所使用的渲染路径(RenderPath),以便实现高级复杂的渲染需要
+    4.  一个渲染块(SubPass)可以包含多个渲染阶段(Pass),复杂的渲染通常需要多阶段渲染
+    5.  一个渲染阶段(Pass)可以指定其渲染状态,以便在指定渲染状态下完成渲染
+    6.  一个材质定义可以包含自定义全局变量,这些全局变量在整个渲染器都可以被访问,所以可以在不同的Material之间共享并访问
+4.  Material
+    1.  内置了多个材质定义,以便提供常用的材质实例构建需要
+    2.  BasicLightingDef,用于兼容旧时代的光照需要
+    3.  PrincipledLightingDef,用于创建次世代的光照需要
+4.  光照
+    1.  支持DirectionalLight,PointLight,SpotLight(预计加入AreaLight)
+    2.  支持RefProbe(反射探头)和GIProbe(光探头),但目前未实现探针混合(实际上我实现过,不过效果不佳,所以不使用该方案)
+    3.  支持SinglePass和MultiPass完成多光源渲染
+    4.  对光源管理,使得你可以很方便的操作灯光,以及在着色器中访问灯光信息(这需要高级部分,你可能需要检查MaterialDef的定义方法)
+5.  阴影(目前未实现)
+    1.  预计实现CSM和PSSM
+    2.  预计加入PCF和其他过滤方式
+    3.  预计实现PreShadow和PostShadow
+6.  动画
+    1.  支持属性动画，形变动画和骨骼动画(硬件)
+    2.  多动画剪辑，多动画通道以及动画混合
+    3.  附件绑定，你可以将装备或附件附加到指定关节上
+7.  地形(待实现)
+    1.  预计加入基于QuadTree和TerrainLod的地形管理
+    2.  预计加入基于多数据来源(heightmap,噪声图,alphamap,分型数据)创建地形
+    3.  预计加入多通道混合创建地形,以便创建包含植被,道路,河流覆盖的地形纹理
 
 #### 安装教程
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+1.  目前,仅打包了普通的js包,意味着你只能通过script标签引入该库
+2.  你也可以clone该项目,然后使用webpack打包为amd或umd库
 
 #### 使用说明
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
+1.  以下是一个快速使用案例:
+    1.  由于这是WebGL(意味着在Web上面运行),你需要提供渲染设备(通常是Canvas):
+        ```html
+        <div style="width: 40%;height: 100%;position:fixed">
+                <canvas id="canvas" style="position:absolute;left: 0px;top: 0px;background-color: aliceblue" tabindex="0"></canvas>
+            </div>
+        ```
+    2.  然后创建一个场景(Scene),并将场景加入到渲染器中,然后启动渲染器:
+        ```javascript
+        let scene = new Scene({cavnas:document.getElementById('canvas')});
+        let renderEngine = new RenderEngine();
+        renderEngine.addScene(scene);
+        renderEngine.launch();
+        ```
+    3.  此时,canvas应该显示为灰色(默认clearColor为灰色),你现在可以添加渲染实例到场景中了,为了方便管理,我添加了如下的数据(其中名为rootNode作为根节点,然后添加一个geometry,注意需要为该geometry):
+        ```javascript
+
+        // 创建一个geometry
+        let geometry = new Geometry(scene, {id:'testGeometry'});
+
+        // 为该geometry创建其mesh
+        let mesh = new Mesh();
+        mesh.setData(Mesh.S_POSITIONS, [
+            -5, 5, 0,
+            -5, -5, 0,
+            5, 5, 0,
+            5, -5, 0
+        ]);
+        mesh.setData(Mesh.S_INDICES, [
+            0, 1, 2,
+            1, 2, 3
+        ]);
+        // 绑定geometry的mesh
+        geometry.setMesh(mesh);
+        geometry.updateBound();
+
+        // 加载一个材质定义
+        let materialDef = MaterialDef.load("./MyDef");
+        // 创建一个材质
+        let mat = new Material(scene, {id:"colorMat", materialDef});
+        // 设置geometry使用的材质
+        geometry.setMaterial(mat);
+
+        // 创建一个根节点
+        let rootNode = new Node(scene, {id:'rootNode'});
+        // 将geometry添加为rootNode的子节点
+        rootNode.addChildren(geometry);
+        ```
+    4.  你还需要将渲染数据加入到scene中,否则,这些数据仅仅只是创建而不参与渲染:
+        ```javascript
+        scene.addSceneNode(rootNode);
+        ```
+2.  关于更多细节,请检查wiki
+3.  还可以参考examples
 #### 参与贡献
 
 1.  Fork 本仓库
@@ -27,11 +129,10 @@ WebGL,Com,GraphicsScene,ShadowMap,PhongLight,PBRLight,MTR,Occ,Octree,LOD,Batch,R
 4.  新建 Pull Request
 
 
-#### 码云特技
+#### 联系我
+
+如果你有好玩的点或者想找我吐槽技术,可以通过如下方式与我联系:
+1.  qq:1724624287
+2.  email:[email protected]
+3.  wechat:18402012144
 
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  码云官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
-5.  码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)