在线教程

  • WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

    WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
    这个参数用来处理当对象出现缩放时,纹理如何处理中间点或被压缩的点。我们知道纹理在使用中一个经典问题是会出现走样,滤波器就是用来实现纹理反走样的技术。gl.bindTexture(gl.TEXTURE_2D,>textures[0]); gl.texIma...

    阅读全文 收藏 评论 (1) 阅读 (29215) 2016-06-10 10:25:38  
  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

    3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的细节感受,会使得建模任务变得异常复杂而得不偿失。
    注:本文混用贴图(texture map)、texture和纹理这3个中英文词汇,因为它们代表同样的含义,用来确定物...

    阅读全文 收藏 评论 (0) 阅读 (25187) 2016-06-06 00:08:07  
  • 踏得网精选2016年度10大最佳HTML5动画

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

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

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

    阅读全文 收藏 评论 (0) 阅读 (18310) 2016-06-03 19:49:19