HTML5在线教程和技术博客

  • Brad Frost:Techcrunch响应式设计之路

    Brad>Frost在2013年使用响应式设计技术对著名的技术创业网站Techcrunch进行了重新设计,以适应多屏幕尺寸移动阅读的需要,开发团队通过该项目得以重新审视新型网页设计流程,本文是他的精彩自述。本文中提到的原子、分子、组织这些术语是Atomic Design里面的专用词汇。 设定项目预期(Set>Expectations)...

    阅读全文 收藏 评论 (0) 阅读 (18492) 2014-04-16 02:25:52  
  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML5(WebGL)可以用来构建3D视图、立体动画、人机交互。Three.js是一个主流的JS框架用来支持和简化WebGL编程。本例是一个简单的Three.js应用,即把一个外部可用于...

    阅读全文 收藏 评论 (0) 阅读 (7766) 2016-05-18 18:28:04  
  • WebGL入门教程1 - 3D绘图基础知识

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

    阅读全文 收藏 评论 (5) 阅读 (7357) 2016-05-24 20:01:15  
  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Processing的代码能在Web上工作,John Resig开发了Processing.js,该JS开发库用来完成两个方面的任务:能把Processing语言动态转换成JS,从而在Web环境中执行;

    阅读全文 收藏 评论 (0) 阅读 (7246) 2016-05-18 13:05:24  
  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN才能访问,为此可以先把该服务提供的数据以json文件的格式存储在本地服务器上。代码调用示例如下:d3.json("http://wow.techbrood.com/uploads/141102/propo...

    阅读全文 收藏 评论 (0) 阅读 (7223) 2016-05-18 18:39:23  
  • 如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象

    我们之前使用CSS3实现过逼真的雨滴,但这个方法只适合用来模拟一些静态场景或少量雨滴动画,...

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

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

    阅读全文 收藏 评论 (0) 阅读 (6941) 2016-05-21 15:17:47  
  • WebGL入门教程2 - GPU基本概念和工作流水线

    在教程1中,我们已经讲述了基础的3D图形知识,接下来我们了解具体的硬件结构、GPU基本概念。计算机图形硬件结构如前所述,WebGL能利用硬件加速来完成绘图,计算机硬件结构如下图所示:
    WebGL直接基于GPU来绘制图像,GPU利用专有的图形内存/缓存来加速渲染,帧缓存包含颜色、透明度、深度和模版掩码属性。GPU把像素写入...

    阅读全文 收藏 评论 (0) 阅读 (6936) 2016-05-25 19:44:13  
  • WebGL入门教程4 - 使用纹理贴图(Texture Map)

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

    阅读全文 收藏 评论 (0) 阅读 (6799) 2016-06-06 00:08:07  
  • WebGL入门教程3 - Canvas、Context、API和绘制一个矩形

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

    阅读全文 收藏 评论 (0) 阅读 (6775) 2016-05-26 00:10:54  
返回顶部