前言:组内同事们根据长时间的Babylon.js开发实践,一起将项目开发中遇到的问题及解决方法做了一个梳理. ios [最好] 关闭离线缓存—— 解决添加了反射的mesh 丢失的问题 不要使用 position:fixed; —— 微信里面是不会认的 天空盒的贴图尽可能调小,防止闪退,纯色的可以设为 1*1 模型上的文字. 小图标之类,最好前端贴透明贴图,避免模型贴上不去的模糊不清 透明贴图贴不上去的情况下,可以使用GUI的img控件来贴png 当UScale和vScale等于1时,切换UV通道

前言:公司用BABYLON作为主要的前端引擎,同事们在长时间的项目实践中摸索到有关BABYLON的学习路径和问题解决方法,这里只作为温故知新. 一.快速学习BABYLON 1. 阅读Babylon[基础教程](http://doc.babylonjs.com/babylon101/)2. 阅读[一些BABYLON的新特性](http://doc.babylonjs.com/features/)3. 阅读[代码片段](http://doc.babylonjs.com/samples)4. 一些[更

前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程H5站点的优化,在这方面有一些心得,但是与宇果交流的过程中发现我们在优化的时候忽略了一些细节. 携程做优化的时候整个重心基本放到了尺寸的缩减,和宇果的交流过程中他提出了渲染优化,其实渲染优化无非是减少回流,对于减少回流我们也有一些概念,我一直认为这个事情应该业务开发关注而不是框架关注(事实上框架也无

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 简介 灵感源自360手机卫,主要功能就是实现显示评分或等级的效果.并稍微改良了一下,有更好的实用性和扩展性. 因为主要用途就是显示"分数","评价",所以暂且叫它RatingView. RatingView由多个可自定义的RatingBar组成,RatingBar代表要显示的单个条目. 效果图: 360手机卫士截图: 效果图1:包含4个RatingBar.

transform:rotate 属于简单好用的效果,但在手机上显示时,会有比较明显锯齿. 解决方案也很简单, 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决. 原理没去深究,理论上是矢量跟位图的处理不一样,这个方案也有个小问题 就是图片变小了 ^_^ 可以用手机看看demo http://labs.aoao.org.cn/demo/transform-rotate/ update: 大家反应这方案在电脑上反而会出问题. 我测试了个新的方案rotate3

大网站都有推出自己的手机访问版本页面,不管是新闻类还是视频网站,我们在电脑是无法直接访问到手机网站的,比如我经常访问一个3g.qq.com这个手机站点,如果在电脑上直接打开它,则会跳转到其它页面,一般我会在网上查找在线WAP浏览器,进入之后输入手机网址再访问. 其实根本不用这么麻烦,如果你有在使用Google Chrome浏览器,那就很简单了.看了一下网上的相关教程,总结起来共有三种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备. 第一种方法:新建Chrome快

1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches (58.6 mm) 4.5 inches (115.2 mm) 3.5-inch 320x480 @2x 640x

近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签能够通过固定宽高的方式来压缩大图.从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧.css3出了一个非常牛逼的属性background-size能够直接设置背景图的宽高,直接攻克了前者的疑惑. 那么问题来了,我们的网页

在围观Drupal官方主题的时候,发现了一个有意思的非标准CSS选择器-webkit-font-smoothing,于是上手把玩了一番.如何使用css3字体平滑显示呢 要知道,W3C对CSS中字体的抗锯齿渲染是有过考虑的,如font-smooth,不过可能由于不同操作系统以及浏览器内核对字体的渲染存在差异,总之,他并没有被选入Web标准.但是WebKit还是保留了一套自有的非标准选择器来实现对抗锯齿效果的支持,来让字体显示的更加平滑. -webkit-font-smoothing主要有一下三个属

五一 Windwos Blogs 推了一篇博客, Babylon.js v3.2 发布了.因为一直有想要在自己博客上加载 3D 对象的冲动,这两天正好看到了,就动手研究研究.本人之前也并没有接触过 WebGL ,这方面算是知识盲区,需求完成之后感觉非常炫酷,顺手写篇博客记录下来.不得不说 3D 打印和 VR 慢慢的开始走进平时的生活了,技术的成熟与硬件成本的变低,结合内容跨平台共享与各种简单的 js 框架, WebGL 和 WebVR 很可能就是未来 Web 方向的主流技术.期待美好而炫酷的未来

一.h5网站input 设置为type=number的问题 h5网页input 的type设置为number一般会产生三个问题,一个问题是maxlength属性不好用了.另外一个是form提交的时候,默认给取整了.三是部分安卓手机出现样式问题. 问题一解决,我目前用的是js.如下 <input type="number" oninput="checkTextLength(this ,10)"> function checkTextLength(obj,

使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像素的手机上显示时, 这个canvas的内容其实是经过拉伸的, 所以会出现模糊和锯齿. 解决方案一:就是在canvas标签中设置了width="200",height="200"之外, 还在外部的CSS样式表中设置了该canvas的宽度为100%,然后在画图时把canva

附加以一种软件的方法是:用Fiddler可以设置浏览器的UA 以下3种方法是手动的 通过伪装User-Agent,将浏览器模拟成Android设备. 第一种方法:新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择“复制”,复制一个图标副本到桌面.右击该副本,选择“属性”,打开相应的对话框,在“目标”文本框的字符后面添加以下语句:“--user-agent="Android"”,如下图: 注意user前面是两个“-”,并且“chrome.exe”与“--

在这里列出Babylon.js官方性能优化文档的中英文对照,并在CardSimulate项目里对其中的一些优化方法进行实践. How To 如何 Optimize your scene 优化你的场景 Table of contents 内容列表 How To Optimize Your Scene 如何优化你的场景 Use TransformNode instead of AbstractMesh or empty meshes 使用变换节点代替抽象网格或者空网格 Changing per me

前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知新. 一.相机   弧形旋转相机 —— 使用鼠标和光标键将相机绕着一个三维点(此处时0坐标处) 旋转 参数:  名称, 水平角(alpha), 垂直角(beta), 半径, 围绕的目标, 场景 var camera = new BABYLON.ArcRotateCamera("ArcRotateCa

前言:在公司主要使用Babylon.js作为前端引擎,我自己在开发中总结到基本上每一个新项目都会需要这些基本设置. 一.ios兼容:解决镜面反射   如果不加offline,材质中有镜面反射,苹果手机都会打不开项目 //ios兼容,解决镜面反射 var offline; if (os.isPhone) { offline = false } else { offline = true } var demo = { scene: 'MI8', binary: true, offline: offl

前言:在学习过Babylon.js基础之后,我上手的第一个网页端3D效果制作项目就是‘DQ冰淇淋’.这个小项目应用到了Babylon最基础的知识,既可以选味道,选点心,也可以旋转.倒置冰淇淋,互动起来十分有趣.项目地址:DQ冰淇淋 草莓味搭配奥利奥 榴莲味搭配奥利奥华夫脆 草莓味搭配奥利奥-倒杯  一.开启http-server服务 在根目录下开启服务: $ http-server Starting up http-server, serving ./ Available on: http://

今天在底部工具栏添加图片时发现图片模糊而且有锯齿,开始一直以为是美工给的图片有问题,后来发现是要设置两种图片: 比如  index.png(默认30 * 30),indexSelected(选中后的图片 30 * 30): index@2x(默认 60 * 60),indexSelected@2x(选中后的图片 60 * 60): 下面贴一下创建导航控制器和设置图标的代码(swift): //3.创建首页导航控制器 let vwIndex=index(); let navIndex=UINavi

计划做一个宇宙飞船模拟程序,首先做一些技术准备. 可以访问https://ljzc002.github.io/test/Spacetest/HTML/PAGE/spacetestwp2.html查看测试场景,按住qe键可以左右倾斜相机.可以在https://github.com/ljzc002/ljzc002.github.io/tree/master/test/Spacetest查看程序代码,因时间有限,github上的代码可能和本文中的代码有少许出入. 主要内容: 一.程序基础结构 二.场景

医疗世界正在快速朝向个性化和低成本的方向发展,Babylon Health看到了这样的机会--通过开创性的云端应用来大幅扩张和改进他们所提供的服务.   通过使用基于Apache Cassandra的DSE,Babylon构建了高度个性化并基于移动端的24/7医疗服务,并且能够保护客户的重要数据.   "作为一家公司,我们的雄心壮志是能够提高每一个人所接受到的医疗服务.新生的技术对于实现这个目标至关重要,而DataStax则为我们的发展奠定了坚实的基础."   --Babylon He