webgl

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

分享到

webgl

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

分享到

webgl

WebGL入门教程3 - Canvas、Context、API和绘制一个矩形 在教程2中，我们已经讲述了计算机图形处理硬件结构和流水线。在本文中，我们将开始讲述WebGL的具体应用程序编程接口（API）。WebGL应用程序编程步骤分为以下几步：
创建一个canvas元素从canvas中获取webgl渲染...

分享到

webgl

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

分享到

WebGL

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

分享到

webgl

jQuery Ribbles - 基于WebGL的水面涟漪动效插件 使用jQuery>Ribbles插件可以很容易的为背景图片引入水珠掉落水面时所产生的涟漪动画特效。首先引入jQuery脚本和jQuery Ribbles插件脚本：&script>src="/libs/jquery/jquery.min.js" &script>src="/libs/jquery/jquery.ripples.js" >>>>resolution:>512,>> >>>>dropRadius:>20,>> >>>>perturbance:>...

分享到

webgl

Three.js 开发基础知识 - 绘制3D对象 Three.js是一个用来简化WebGL开发的JavaScript库，比如绘制一个三维立方体，使用WebGL需要100多行，那Three.js只要10几行就能够完成。本文通过创建一个立方体来简单介绍Three.js的基础知识。Three.js中的基本概念Three.js包含3个基本概念：场景（Scene）、相机（Camera）和渲染器（Renderer）。场景就是需要绘制的对象，相...

分享到

webgl

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

分享到