这张图每位程序员应该都深有感触。
人民心目中的程序员是这样的：坐在电脑面前噼里啪啦敲着键盘，运键如飞。
现实中程序员是这样的：编码5分钟，调试两小时。
今天我要给大家分享一个用WebGL开发的网站，感兴趣的朋友可以在Chrome开发者工具里调试它的源码来学习WebGL。
WebGL(Web Graphics Library)是3D绘图协议的一种，该技术的特色是将万能的JavaScript和OpenGL ES 2.0结合在一起，为HTML5的 Canvas提供硬件3D加速渲染。借助WebGL，前端开发人员可以开发出非常专业的3D场景和模型。
今天我要介绍的网站：Legacy Encom Boardroom Visualization就是一个采取JavaScript 加上WebGL开发3D场景和模型的一个典型例子。
网站地址：https://www.robscanlon.com/encom-boardroom/
进入之后，会看到一个炫目的控制台。左下角的动画效果很像电影《生化危机》里的DNA双螺旋模型。屏幕右边是一个控制台，你在键盘上输入的字符会有个酷炫的动画效果：
您可以手动在控制台里输入shell命令，比如：
cd wikipedia
ls
以此来浏览wikipedia文件夹下的所有内容。或者直接用鼠标左键点击wikipedia这个文件夹：
然后就能进入wikipedia这个文件夹，看到几个酷炫的3D模型，一个是正在旋转的地球的3D模型，另一个是不同维度展示的长方体模型。
在Chrome开发者工具的console页面能看到WebGL相关的输出。
这个网站的源码在github：http://github.com/arscan/encom-boardroom
如果大家对WebGL技术感兴趣的，不妨去细读下源代码：
要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
相关推荐
"webgl-3d-helloworld"项目是一个基础教程或示例，教你如何使用JavaScript和WebGL创建一个简单的3D“Hello, World!”程序。 在描述中提到的"javascript 实现的 3d helloworld"，意味着这个项目将通过JavaScript代码...
Three.js是WebGL的一个库，它简化了WebGL编程，提供了丰富的功能和易用的接口，使得开发者可以更轻松地创建复杂的3D场景。 在“webGL-three-3d地图-部分代码”项目中，我们看到提到了几个关键概念和技术，它们是： ...
这个"效果超棒的WebGL模型-人体头部模型"是利用WebGL技术创建的一个三维人体头部展示，它能够在网页上实现逼真的、动态的三维渲染。下面将详细介绍这个模型所涉及的关键知识点： 1. **WebGL基础**：WebGL是Web图形...
这个名为“效果超棒的Webgl模型-人体肺”的资源，显然是一个利用WebGL技术创建的、展示人体肺部结构的三维模型。在网页中，用户可以通过鼠标或触摸操作来旋转、缩放和平移模型，从而从不同角度观察肺部的细节。 ...
【3D模型】WebGL人体3D动态模型是一种在网页端实现的三维人体动画技术，它基于WebGL（Web Graphics Library）这一强大的图形渲染API，允许用户在浏览器中无需插件即可体验高质量的3D图形展示。这个模型特别之处在于...
Unity3D是一款强大的跨平台游戏开发引擎，广泛用于制作2D和3D游戏、互动体验以及虚拟现实应用。WebGL是一种基于OpenGL标准的JavaScript API，它允许在任何兼容的现代浏览器中实现硬件加速的3D图形渲染，无需任何插件...
6. **纹理映射**：将2D图像（纹理）应用到3D模型表面，增加视觉细节。 7. **光照模型**：模拟真实世界中的光照效果，包括环境光、点光源、聚光灯等。 8. **缓冲区和数组**：在WebGL中，数据存储在缓冲区中，如顶点...
"效果超棒的Webgl模型-人物铜像"这个主题指向的是一个高质量的3D模型，它可能是一个逼真的铜像人物，适用于网页设计、游戏开发或者在线展示等场景。 在WebGL中，模型通常由多个几何形状（如三角形）组成，这些形状...
这个“效果超棒的Webgl模型-一堆石头”很可能包含了一组精心设计的3D模型，这些模型可能用于创建虚拟现实场景、游戏或者网页中的装饰元素。现在，让我们深入探讨WebGL和3D建模的相关知识点。 首先，WebGL是Web图形...
这可能包括创建一个交互式的3D模型展示或者一个简单的游戏环境。 这个学习资源不仅包含理论知识，还提供了实践机会，让你在实践中巩固所学。每课之后的练习和项目将帮助你更好地理解和掌握WebGL，为将来进一步探索...
"3D-dw-webgl-sketchbook.zip"这个压缩包，很可能包含了WebGL技术用于3D建模的实例代码和资源，名为"dw-webgl-sketchbook-master"的子目录可能是一个GitHub仓库的克隆，包含了项目的源码、示例、文档等。这为我们...
这个“效果超棒的Webgl模型-装甲车”压缩包很可能是包含了一个或者多个高质量的3D装甲车模型，设计用于在网络环境中展示，比如游戏、教育应用或者军事模拟等场景。 首先，我们要理解WebGL的基本工作原理。它利用...
在Web端，开发人员会使用JavaScript库如Three.js、Babylon.js或A-Frame来加载和渲染这些3D模型。这些库简化了WebGL的复杂性，提供了一套易于使用的API来处理场景管理、动画、光照、相机控制等。例如，Three.js提供了...
- **模型导入与管理**：WebGL允许使用3D模型，这些模型可以通过多种途径获得，例如从Turbosquid或Blendswap等网站购买或下载。在使用之前，需要确保符合相应的许可协议。 - **3D场景构建**：构建3D场景，包括模型、...
"效果超棒的Webgl模型-两层小公寓3"是一个示例项目，可能包含一个精心设计和渲染的3D两层公寓模型，通过WebGL技术在网页上展示。 在本项目中，"两层小公寓3"可能是一个完整的3D场景，包括房间布局、家具、装饰等...
在“webGL3D机房模型”这个项目中，开发人员利用WebGL的强大功能，创建了一个交互式的3D机房演示。这个Demo不仅展示了机房的三维视图，还融入了多项实用功能，如模拟烟雾效果、虚拟巡检、漏水检测以及机柜容量管理等...
这个“效果超棒的Webgl模型-手袋”很可能是一个包含高质量3D模型的手袋展示项目，利用WebGL技术在网页上实现交互式、动态的3D视图。 WebGL的核心是它允许开发者直接在浏览器中处理顶点、颜色、纹理和光照等图形数据...
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中进行2D和3D图形渲染，无需插件。这个"WebGL编程指南"的光盘包含了丰富的代码示例，是学习WebGL的宝贵资源。让我们深入探讨WebGL的基础知识...
通过WebGL，开发者可以将复杂的3D模型和动画带到网页上，提供丰富的交互体验。 首先，我们要理解WebGL的工作原理。它基于OpenGL ES 2.0，这是一个为嵌入式设备设计的图形库标准，而WebGL则将其带入了Web环境。WebGL...
标题提到的"效果超棒的WebGL模型-小丑头像"显然是一个使用WebGL技术制作的高质量3D小丑头像模型。 1. **WebGL基础**: WebGL基于OpenGL ES 2.0，它是移动设备上的图形处理标准。WebGL允许开发者通过JavaScript直接在...