文档章节

three.js (四)离散层次细节level of details

李勇2
 李勇2
发布于 2015/03/02 09:38
字数 632
阅读 159
收藏 0
点赞 0
评论 0

LOD 处理比较大的外部地面场景中比较有用, 一般用于绘制地形。 首先通过可视体的切割删除不用的地形块,接着通过LOD 对照相机不同距离的地形块进行层次细节调整。

这里采用最简单的LOD 方法。

首先地形有n*n 的块构成, 这些块共同构成一个大平面;

首先根据每个块到照相机的距离 计算细节层次, 

例如假设由5*5 个块构成地形, 每个块1*1大小, 有4个细节层次, 

当块距离照相机 小于2 层次 0

距离小于4  层次 1

小于6 层次 2

其它层次 3

首先构造一个Object3D 作为整个地面的代表。

myGame.Earth = function(){
    THREE.Object3D.call(this);
    this.curPatches = [];
    this.patches = [];
    this.width = 5;
    this.height = 5;
    this.patch_width = 1;
    this.patch_height = 1;
    for(var i = 0; i < this.height; i++)
    {
        for(var j = 0; j < this.width; j++)
        {
            this.patches.push(1);//distance ---> detail 0 1*1
        }
    }
};


myGame.Earth.prototype = new THREE.Object3D();


var earth = new myGame.Earth();

earth中的每一个块是 一个Mesh 对象,底层的几何体是一个PlaneGeometry

curPatches 用于存放当前组成earth的块, 当细节层次需要改变的时候这些块将被丢弃,而重新构造新的块。

patches用于存储当前块的细节层次。


关键的setDetails 函数用于调节块的细节, 首先计算所有块到照相机的距离 得到细节层次; 接着删除旧的所有平面, 接着再构建新的块加入到场景中。 


myGame.Earth.prototype.setDetails = function(camera){
    var diff = new THREE.Vector3();
    var standard = this.patch_width;
    var pos = new THREE.Vector3();
    for(var i = 0; i < this.height; i++)
    {
        for(var j = 0; j < this.width; j++)
        {
            pos.set(-this.width/2*this.patch_width+j*this.patch_width+this.patch_width/2, 
                    0, 
                    -this.height/2*this.patch_height+i*this.patch_height+this.patch_height/2); 

            var dist = diff.sub(camera.position, pos).length();
            if(dist < 2*standard)
                this.patches[i*this.width+j] = 0;
            else if(dist < 4*standard)
                this.patches[i*this.width+j] = 1;
            else if(dist < 6*standard)
                this.patches[i*this.width+j] = 2;
            else
                this.patches[i*this.width+j] = 3;
        }
    }
    for(var i = 0; i < this.curPatches.length; i++)
    {
        this.remove(this.curPatches[i]);
    }
    var mat = new THREE.MeshBasicMaterial({color:0xff0000, wireframe:true});
    for(var i = 0; i < this.patches.length; i++)
    {
        var pl;
        var detail = this.patches[i];
        console.log(detail);
        if(detail == 0)
            pl = new THREE.PlaneGeometry(this.patch_width, this.patch_height, 10, 10);
        else if(detail == 1)
            pl = new THREE.PlaneGeometry(this.patch_width, this.patch_height, 5, 5);
        else if(detail == 2)
            pl = new THREE.PlaneGeometry(this.patch_width, this.patch_height, 2, 2);
        else
            pl = new THREE.PlaneGeometry(this.patch_width, this.patch_height, 1, 1);
        var obj = new THREE.Mesh(pl, mat);
        obj.position.set(-this.width/2*this.patch_width+i%this.width*this.patch_width+this.patch_width/2, 
                        -this.height/2*this.patch_height+ (this.height-~~(i/this.width))*this.patch_height+this.patch_height/2,
                        0);
        this.curPatches.push(obj);
        this.add(obj);
    }
};


在每帧更新的时候, 通过检测照相机新旧位置的距离差, 如果足够大 则更新整个场景的块。

function animate()
{
    requestAnimationFrame(animate);
    controls.update(clock.getDelta());
    var vec = new THREE.Vector3();
    var dist = vec.sub(camera.position, camera.oldPosition).length();
    if(dist > earth.patch_width)
    {
        camera.oldPosition.copy(camera.position);
        earth.setDetails(camera);
    }
    render();
}



本文转载自:http://blog.csdn.net/liyong748/article/details/7964956

共有 人打赏支持
李勇2

李勇2

粉丝 45
博文 188
码字总数 62209
作品 0
广州
程序员
three.js (四)离散层次细节level of details

LOD 处理比较大的外部地面场景中比较有用, 一般用于绘制地形。 首先通过可视体的切割删除不用的地形块,接着通过LOD 对照相机不同距离的地形块进行层次细节调整。 这里采用最简单的LOD 方法...

李勇2
2012/09/18
0
0
[译文] 如何高效渲染庞大的地形 - Rendering large terrains

翻译:RyuZhihao123 时间:2017/5/16(大三下学期) 原文链接:Render large terrains - pheelicks Rendering large terrains Today we’ll look at how to efficiently render a large terr......

Mahabharata_
2017/05/17
0
0
three.js简介 —— 3D框架

threejs 随着HTML5的普及,网页的表现能力越来越强大,浏览器提供了WebGL接口,可以通过调用对应API进行3D图形的绘制,Three.js在这些基础接口之上又做了一层封装。 原文链接 特点 Three.js...

bestvist
2017/12/26
0
0
12个优化Unity/GearVR应用的小技巧

12个优化Unity/GearVR应用的小技巧 比起那些普通应用,VR应用所需的计算性能要求大了太多,让优化成为了一项重要工作。如果你的目标是类似 Gear VR 这种移动设备,那么要求会更高。 以下为一...

NickHomeSelf
2016/08/09
4
0
推荐系统遇上深度学习(五)--Deep&Cross Network模型理论和实践

推荐系统遇上深度学习系列: 推荐系统遇上深度学习(一)--FM模型理论和实践:https://www.jianshu.com/p/152ae633fb00 推荐系统遇上深度学习(二)--FFM模型理论和实践:https://www.jianshu.co...

石晓文
04/22
0
0
activiti--History 历史配置

activiti.cfg.xml配置文件,你能配置需要的历史归档的级别: <bean id="processEngine" class="org.activiti.spring.ProcessEngineFactoryBean"><property name="history" value="audit" />.......

cookqq
2013/09/24
0
0
数学期望、方差、标准差、协方差

数学期望 数学期望E(x)完全由随机变量X的概率分布所确定,若X服从某一分布,也称E(x)是这一分布的数学期望。 数学期望的定义是实验中每次可能的结果的概率乘以其结果的总和。 离散型随机...

微小菜
03/19
0
0
级联查询(Hierarchical Queries) 进阶应用:伪列LeveL

一、使用伪列Level显示表中节点的层次关系: Oracle9i对级联查询的支持不仅在于提供了像Start with...Connectby这样的子句供我们很方便地执行查询,而且还提供了一个伪列(Pseudocolumn):Leve...

雨中人X
2015/12/03
46
0
C# 类和接口

类不但有描绘,还实现了部分细节。而特殊的抽象类完全带抽象方法,就和接口完成同样功用。而且,无论接口还是类,都不是凭空去描绘出来的,而是根据具体类的特征抽象出来的。 继承是建立一个...

晨曦之光
2012/04/24
45
0
SegmentFault 技术周刊 Vol.35 - WebGL:打开网页看大片

WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一,它把 Web 带入了 3D 的时代。 初识 WebGL 先通过几个使用 WebGL 的网站来认识下 WebGL 的魅力吧~ 温馨提示:浏览以下网页需要浏览...

keke
2017/10/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Dubbo 源码解读 —— 可支持序列化及自定义扩展

一、概述 从源码中,我们可以看出来。目前,Dubbo 内部提供了 5 种序列化的方式,分别为 fastjson、Hessian2、Kryo、fst 及 Java原生支持的方式 。 针对不同的序列化方式,对比内容如下: 名...

Ryan-瑞恩
12分钟前
0
0
MySQL内存设置—— MySQL server has gone away

set global max_allowed_packet=268435456

一梦心草
21分钟前
0
0
推导式

列表、集合和字典推导式 列表推导式是Python最受喜爱的特性之一。它允许用户方便的从一个集合过滤元素,形成列表,在传递参数的过程中还可以修改元素。形式如下: [expr for val in collect...

火力全開
26分钟前
0
0
maven配置文件settings.xml详解

settings.xml有什么用? 如果在Eclipse中使用过Maven插件,想必会有这个经验:配置settings.xml文件的路径。 settings.xml文件是干什么的,为什么要配置它呢? 从settings.xml的文件名就可以...

浮躁的码农
31分钟前
0
0
MakeCode图形化编程语言学习笔记:micro:bit编程练习题[图]

MakeCode图形化编程语言学习笔记:micro:bit编程练习题[图]: 基础训练题: Q1:摇晃micro:bit编程板,随机出现7个小动物图标中的一个,并且前后相邻两次出现的小动物不重复。 注:七个小动物...

原创小博客
31分钟前
0
0
Redis 压力测试说明

Redis 压力测试说明 redis压力测试 2014-03-24 21:41:07| 分类: 默认分类 | 标签:redis |举报|字号 订阅 这几天对比测试mongodb、redis、pg的性能,主要是在消息队列、消息处理、用户经纬度...

舒文joven
32分钟前
0
0
拉姆达表达式 追加 条件判断 Expression>

public static class PredicateBuilder {   /// <summary>   /// 机关函数应用True时:单个AND有效,多个AND有效;单个OR无效,多个OR无效;混应时写在AND后的OR有效   /// </summary...

Lytf
44分钟前
0
0
【HAVENT原创】Spring Boot + Kafka 消息日志开发

最近因为部门需要将服务程序的各种日志发送给 Kafka 进行分析,所以写一个 Kafka 消息日志操作类,主要用来保存日志到 Kafka 以便查询。 一、pom.xml 增加配置 <!-- HH: 引入 kafka 模块 ...

HAVENT
45分钟前
0
0
7、Git命令解析

1、创建版本库 cd E:mkdir myRepositorypwdls -ah======git init 2、添加文件到仓库 添加git add readme.txt提交git commit -m "i wrote a readme file"【为什么Git添加...

丑陋的皮囊
45分钟前
0
0
ImageMagick批量压缩图片

#!/bin/shfor img in `find ./image -name "*.jpg"`; donewimg=`basename $img` convert -quality 75% $img ./ok/$newimg echo ./ok/$newimgdone...

dworry
45分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部