在线教程

  • 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

    本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效果,你需要有一个兼容WebGL的现代浏览器(最好是Chrome/FireFox/Safari/Edge/IE11+)。本文的在线演示结果和代码请点击这里:

    阅读全文 收藏 评论 (0) 阅读 (65423) 2016-08-12 09:14:18  
  • WebGL入门教程1 - 3D绘图基础知识

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

    阅读全文 收藏 评论 (6) 阅读 (31420) 2016-05-24 20:01:15  
  • WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

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

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

    教程2中,我们已经讲述了计算机图形处理硬件结构和流水线。在本文中,我们将开始讲述WebGL的具...

    阅读全文 收藏 评论 (0) 阅读 (24342) 2016-05-26 00:10:54  
  • 深度贴图(depth map)概念简介和生成流程

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

    阅读全文 收藏 评论 (1) 阅读 (24109) 2016-07-25 08:58:42  
  • Brad Frost:Techcrunch响应式设计之路

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

    阅读全文 收藏 评论 (0) 阅读 (23806) 2014-04-16 02:25:52