HTML5在线教程和技术博客

  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),其软件架构如下:
    Cordova的工作原理是生成一个内置webview控件的容器app(这是个本地app),然后在webview中运行html/css/js的代码,如需调用本地服务如相...

    阅读全文 收藏 评论 (0) 阅读 (671) 2016-10-17 23:09:00  
  • 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...

    阅读全文 收藏 评论 (1) 阅读 (907) 2016-10-10 23:52:52  
  • 使用SVG和CSS3创建圆形进度条动画

    圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG。本文介绍如何使用SVG结合CSS3来实现。在阅读本文之前,你最好先了解SVG的基本知识。...

    阅读全文 收藏 评论 (2) 阅读 (745) 2016-10-07 18:57:13  
  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope>{>> >>>>displ...

    阅读全文 收藏 评论 (0) 阅读 (464) 2016-10-07 16:24:23  
  • 计算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...

    阅读全文 收藏 评论 (0) 阅读 (735) 2016-09-02 23:36:38  
  • 深入理解Three.js纹理贴图和UV映射

    In this tutorial, I’m going to explain texture mapping and show you how to texture objects using Three.js.
    To view this demonstration, you will need a WebGL compatible browser. If you have a recent version of Chrome, Firefox, Safari or Internet Explorer, you should be good to go. If you are run...

    阅读全文 收藏 评论 (0) 阅读 (3152) 2016-08-12 09:14:18  
  • Three.js 对象局部坐标转换为世界坐标

    在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的坐标是局部坐标(Local Matrix),即相对于该对象的position属性而言的相对坐标。当出现旋转、平移、设置位置(position)等变换时,需要相应更新世界坐标。当需...

    阅读全文 收藏 评论 (1) 阅读 (3571) 2016-08-03 10:26:26  
  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的基本运算的概念及其用途。点积(Dot Product)点乘比较简单,是相应元素的乘积的和:V1( x1, y1, z1)·V2(x2, y2, z2) = x1*x2 + y1*y2 + z1*z2;注意结果不是一个...

    阅读全文 收藏 评论 (0) 阅读 (3177) 2016-07-31 21:18:08  
  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可见的”。Depth map中像素点记录的深度值为lenth1;然后从视点出现,计算物体顶点v到视点的距离,记为lenth2;比较二者大小,来确定“v”是否被遮挡。该术语的同义...

    阅读全文 收藏 评论 (1) 阅读 (3695) 2016-07-25 08:58:42  
  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域。Verlet算法要解决的问题是,给定粒子t时刻的位置r和速度v,得到t+dt时刻的位置r(t+dt)和速度v(t+dt)。最简单的方法是前向计算(考虑当前和未来)的速度位移公式...

    阅读全文 收藏 评论 (0) 阅读 (3728) 2016-07-21 13:52:11  
返回顶部