Babylongjs-高度图,天空盒,图片精灵及K帧动画
我们想把村庄建在山谷里。可以从网格创建山丘,但是还有另一种方法可以为地面网格添加垂直高度。这是使用高度图来实现的,该高度图使用灰色阴影来确定地面的高度。白色区域最高,黑色最低。这个简单的高度图:
中间有一个大的黑色区域来容纳村庄,白色区域创造了山丘,而灰色区域则是从山谷中出来的道路。
在这张图片中,相机被拉得更远,垂直高度被夸大了。
const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "url to height map", {width:150, height:150, subdivisions: 20, minHeight:0, maxHeight: 10});
选项的细分属性将地面分成 20 x 20 = 400 个部分。细分越多,高度计算的层次就越精细。minHeight 和 maxHeight 这两个属性分别确定黑色和白色区域的垂直高度,灰色区域相应地缩放。
但显然我们的地面不仅仅是只有高度变化,还应该有草地:
//Create Village ground
const groundMat = new BABYLON.StandardMaterial("groundMat");
groundMat.diffuseTexture = new BABYLON.Texture("url to ground texture");
groundMat.diffuseTexture.hasAlpha = true;const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:24, height:24});
ground.material = groundMat;//large ground
const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat");
largeGroundMat.diffuseTexture = new BABYLON.Texture("url to large ground texture");const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "url to heightmap", {width:150, height:150, subdivisions: 20, minHeight:0, maxHeight: 4});
largeGround.material = largeGroundMat;
//为了防止出现闪烁的情况
largeGround.position.y = -0.01;
天空盒:
我们可以通过将六个合适的图像应用于大型天空盒立方体的内部来模拟天空的外观。(图像比 3D 对象更容易、更快速地渲染,并且对于远距离的风景也一样好。)
Skybox 图像通常使用CubeTexture加载。CubeTexture 的构造函数接受一个基本 URL 并(默认情况下)附加“ _ px.jpg”、“ _ nx.jpg”、“ _ py.jpg”、“ _ ny.jpg”、“ _ pz.jpg”和“ _ nz.jpg”以加载立方体的 +x、-x、+y、-y、+z 和 -z 面。
即使天空盒不是反射贴图,也必须使用reflectionTexture应用立方体纹理。将坐标模式设置为 SKYBOX _ MODE 将直接在立方体上绘制纹理而不是模拟反射。
const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:150}, scene);
const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;//限制相机不能穿过地面
camera.upperBetaLimit = Math.PI / 2.2;
图片精灵:
我们将在我们的世界中种植几片树林,每片树林都有 500 棵树。为了保持渲染速度,我们将使用精灵。这些是始终面向相机的二维图像。图如下:
我们需要为精灵图集设置一个管理器:
const spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "url to tree image", 2000, {width: 512, height: 1024}, scene);//在一定范围内随机生成500棵树
for (let i = 0; i < 500; i++) {const tree = new BABYLON.Sprite("tree", spriteManagerTrees);tree.position.x = Math.random() * (-30);tree.position.z = Math.random() * 20 + 8;tree.position.y = 0.5;
}for (let i = 0; i < 500; i++) {const tree = new BABYLON.Sprite("tree", spriteManagerTrees);tree.position.x = Math.random() * (25) + 7;tree.position.z = Math.random() * -35 + 8;tree.position.y = 0.5;
}
参数是管理器的名称、图像的 url、精灵的最大数量、指定精灵宽度和高度的对象,在这种情况下它是图像的宽度和高度。
精灵动画
可以使用精灵贴图中的一组图像来制作动画。
上面的地图由相同大小的单元格框架组成,5 横 4 下。这次在管理器中给出的宽高就是一个单元格的宽高。
精灵的动画是通过给出要使用的第一个和最后一个单元格来设置的,无论它是否循环(真)以及单元格帧之间的时间:
const spriteManagerUFO = new BABYLON.SpriteManager("UFOManager","url to ufo image", 1, {width: 128, height: 76});const ufo = new BABYLON.Sprite("ufo", spriteManagerUFO);
ufo.playAnimation(0, 16, true, 125);
Babylongjs-高度图,天空盒,图片精灵及K帧动画相关推荐
- CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式. 又被解释为: CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图 图片合成技术 CSS Spri ...
- java如何运用多帧图片_【腾讯优测干货分享】使用多张图片做帧动画的性能优化...
使用多张图片做帧动画的性能优化 背景 QQ群的送礼物功能需要加载几十张图然后做帧动画,但是多张图片加载造成了非常大的性能开销,导致图片开始加载到真正播放动画的时间间隔比较长.所以需要研究一些优化方案提 ...
- Android逐帧动画——让图片动起来
Android逐帧动画--让图片动起来 前言:逐帧动画要求开发者把动画过程的每张静态图片都收集起来,然后由android来控制依次显示这些静态图片,然后利用人眼视觉暂留的原理,给用户造成"动 ...
- 微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法 小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
- YYKit播放图片动画(gif/帧动画/精灵图动画)
1.显示动画类型gif的图片 #import <YYImage.h> #import <YYAnimatedImageView.h> YYImage *gifImage = [ ...
- php详情页图片尺寸,拼多多主图轮播图详情页图片尺寸要求大全
1.拼多多商品轮播图: a. 尺寸宽度和高度都需要大于等于480px,正方形最好. b. 大小1M以内,不能超过1M. c. 数量限制在10张以内,等于10章. d. e. 主轮播图背景为纯白色(服饰 ...
- Unity Shader - ddx/ddy偏导函数测试,实现:锐化、高度图、Flat shading应用、高度生成法线
文章目录 ddx, ddy 说明 DirectX - ddx, ddy OpenGL - dFdx, dFdy 伪代码表示 可用它来做什么 简单的边缘突出应用 Shader 边缘突出-锐化-增加差值 ...
- 【转】游戏开发高度图有关资料与Balder中的相关支持
2019独角兽企业重金招聘Python工程师标准>>> 资料一:使用Managed DirectX创建三维地形 来源:GameRes网站 内容: 使用Height Map作为输入 首 ...
- 游戏开发高度图有关资料与Balder中的相关支持
资料一:使用Managed DirectX创建三维地形 来源:GameRes网站 内容: 使用Height Map作为输入 首先,什么是高度图(Height Map)呢?所谓高度图实际上就是一个2维数 ...
最新文章
- laravel数据迁移的时候遇到的字符串长度的问题
- 62岁程序员植入逻辑炸弹, 面临10年监禁和25万美元罚款
- define、const、typedef区别
- 用 Go 解析复杂 JSON 的思路
- 【英语学习】【Daily English】U08 Dating L02 What would you do if you were me?
- 【报告分享】2020中国商业智能化发展研究报告.pdf(附下载链接)
- layui button按钮点击导致页面重新刷新的解决方案
- 如何在Redhat7.4安装CDH6.2
- Lesson 6: CronTrigger
- 区块链中国专利申请状况及技术分析
- 论文阅读:CVPR2021 | Involution: Inverting the Inherence of Convolution for Visual Recognition
- MapReduce项目案例3——温度统计
- 伯克利摘得最佳论文 | ACL2022奖项公布
- LOJ10064黑暗城堡
- amigo幸运字符什么意思_超不清视频播放器-用Python将视频转成字符
- js给html设置背景音乐,最简单最快的方法给H5页面添加背景音乐播放(css样式美化)...
- Springboot -Shiro整合JWT(注解形式)
- 【Doris】Apache Doris 索引机制解析
- win10怎么取消开机磁盘检测
- Moon River
热门文章
- EBox4300 Dev Start
- freemind 要下载java_FreeMind下载、安装及使用介绍
- torch.nn 和 torch.functional 的区别
- 瑞星个人防火墙2008正式版 官方安装包
- 了解流辰信息框架开发平台服务商
- SURFRAD (Surface Radiation Budget) Network 数据下载
- Windows应用商店保留Windows 7特色
- 绝妙!不用外部电路检测芯片工作电压!
- Java、JSP基于Web停车场管理系统毕业设计论文
- 前置自增加++与后置自增加++区别,前后自减同理