-
使用HTML5 Canvas实现的界面元素截屏功能
如果网站出现问题，常常需要截图来提交反馈，这个功能很实用。使用HTML5的Canvas可以实现这个目标。我们首先引入html2canvas.js，建立一个简单的页面：然后调用如下的代码，上述DIV中包含的内容将被截屏并添加到页面下面：在线...
-
HTML5动画背后的数学2 - 仿生智能算法综述
本文是前文粒子群仿生算法的续，转发一篇对主流仿生智能算法的一个综述。相关实例...
-
HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画，如模拟鸟群运动：http://wow.techbrood.com/fiddle/30529等等。这里面除了HTML5 Canvas绘制技巧外，主要是背后的数学算法。本文转发一篇该动画背景算法的简介。1. 引言粒子群优化算法(PS...
-
HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能，搞出来一些混合APP的解决方案。比如Apache的Cordova（也就是以前的PhoneGap），其软件架构如下：
Cordova的工作原理是生成一个内置webview控件的容器app（这是个本地app），然后在webview中运行html/css/js的代码，如需调用本地服务如相... -
Babylon.js入门教程和开发实例
Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的，比Babylon.js要成熟些，而Babylon.js是微软推动的，和微软的相关技术结合更好。本文对Babylon.js的使用做个简单的介绍。首先的首先，请确保你的浏览器支持WebGL(IE11+/Edge/Firefox 4+/Google Ch...
-
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素，常用于显示任务进度，比如用户档案的完整程度，或者升级状态。有很多方法来实现圆形进度条，比如用JS, CSS3, Canvas, SVG。本文介绍如何使用SVG结合CSS3来实现。在阅读本文之前，你最好先了解SVG的基本知识。...
-
学习使用CSS制作进度条
进度条是基础的界面控件，可用于多种场合，比如任务完成进度，手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示：直观上，我们可以把该进度条控件分为2个部分，外部的边界用来表示固定的目标范围，里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下：.pb-scope>{>> >>>>displ...
-
计算WebGL中的uniforms变量使用数
在使用Three.js为人体模型加载皮肤材料时，启用了skinning:true的参数。有时候会导致GL编译错误，提示“too many uniforms”。下面的文章有助于理解错误原因和检测uniforms的使用情况。For a recent consulting project I was attempting to render some fairly complex skeletal animations in WebGL on Firefox and Chrom...
-
深入理解Three.js（WebGL）贴图（纹理映射）和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图（Texture Map，也译作纹理映射，“贴图”的翻译要更直观，而“纹理映射”更准确。）。为了能够查看在线演示效果，你需要有一个兼容WebGL的现代浏览器（最好是Chrome/FireFox/Safari/Edge/IE11+）。本文的在线演示结果和代码请点击这里：
-
Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时，一个需要注意的地方是，需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象，那么默认情况下，各网孔顶点的坐标是局部坐标（Local Matrix），即相对于该对象的position属性而言的相对坐标。当出现旋转、平移、设置位置（position）等变换时，需要相应更新世界坐标。当需...
Copyright © 2017 TechBrood Co. All rights reserved. 沪ICP备14011478号
