HTML5在线教程和技术博客

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

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

    阅读全文 收藏 评论 (0) 阅读 (11422) 2016-06-10 10:25:38  
  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场合。首先让我们来看看如何能画出一个普通的图像,然后看看我们如何能使它变形。使用WebGL绘制图像在踏得网之前的教程中,我们已经说明过,WebGL可以通过纹理对象...

    阅读全文 收藏 评论 (0) 阅读 (8631) 2016-06-09 21:51:31  
  • 如何实现SVG clipPath自适应被裁剪对象

    CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
    clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁剪成我们想要的形状。
    clip-path支持多种方式,如基本的图形(多边形polygon(), 圆形circle(), inset() (用来定义内部矩形), 和椭圆 ellipse()),也支持直接...

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

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

    阅读全文 收藏 评论 (0) 阅读 (12064) 2016-06-06 00:08:07  
  • 如何使用WebGL创建一个逼真的下雨动画

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

    阅读全文 收藏 评论 (0) 阅读 (9127) 2016-06-03 19:49:19  
  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在width下面,对于非IE浏览器会解析到width,而对于IE6来说,会用_width覆盖前面的width规则,从而达到针对IE6浏览器的兼容。对于IE其他版本(6~11),也存在同样的兼...

    阅读全文 收藏 评论 (0) 阅读 (6943) 2016-06-03 13:24:24  
  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使用会报错,通常是:require is not definedmodule is not defined解决第一个错误的方法是,去除require,直接在页面中使用script标签加载,或者...

    阅读全文 收藏 评论 (0) 阅读 (7329) 2016-05-27 19:50:36  
  • WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

    在教程2中,我们已经讲述了计算机图形处理硬件结构和流水线。在本文中,我们将开始讲述WebGL的具体应用程序编程接口(API)。WebGL应用程序编程步骤分为以下几步:
    创建一个canvas元素从canvas中获取webgl渲染...

    阅读全文 收藏 评论 (0) 阅读 (11491) 2016-05-26 00:10:54  
  • WebGL入门教程2 - GPU基本概念和工作流水线

    教程1中,我们已经讲述了基础的3D图形知识,接下来我们了解具体的硬件结构、GPU基本概念。计算机图...

    阅读全文 收藏 评论 (0) 阅读 (9985) 2016-05-25 19:44:13  
  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数字营销等各个领域。在WebGL出现之前,用户必须安装第三方插件或本地应用程序才能利用设备硬件所拥有的强大的渲染功能,而使用WebGL,只需要浏览器就可以完成一切...

    阅读全文 收藏 评论 (6) 阅读 (15123) 2016-05-24 20:01:15