在线教程

  • 体积光原理及WebGL实现

    体积光(或叫上帝之光)在自然界中是十分常见的现象,如太阳光从云隙中透过时产生的云隙光,森林中阳光从树叶中穿过产生的光柱。如果我们要在网页三维场景中模拟这种光效,需要深入了解大气物理模型和光散射原理。大气物理模型物体与其观察者之间存在着复杂的介质,比如太阳光到达我们眼睛是穿过了厚厚的大气层,大气层里面...

    阅读全文 收藏 评论 (1) 阅读 (5089) 2019-07-16 17:43:36  
  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,千人一面乏善可陈,不入该列。所涉及技术主要是:HTML5/CSS3/SVG/WebGL(Three.js)/ES6(BabelJS)。TOP10: 镜花水月使用SVG>turbulence 滤镜实现的动画特效

    阅读全文 收藏 评论 (1) 阅读 (19862) 2017-07-21 09:54:37  
  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行360°全景浏览就很难实现,并且粒子放大后会失真。今天我们使用WebGL来实现一个真正3D建模的下雨动画,所使用的技术可用于很多场景。[TD_Editor] data-height=300 d...

    阅读全文 收藏 评论 (0) 阅读 (17883) 2016-06-03 19:49:19  
  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canvas生成随机大小的不完美圆形。

    首先我们要了解,在几何学上圆形可以通过增加等边对称多边形边数来无限逼近。那么所谓不完美圆形,实际可以通过一个不等...

    阅读全文 收藏 评论 (0) 阅读 (15202) 2016-05-23 15:41:17  
  • 如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合

    Part1中我们已经建立了绘制环境、背景和雨...

    阅读全文 收藏 评论 (0) 阅读 (20530) 2016-05-21 15:17:47