这张图每位程序员应该都深有感触。

人民心目中的程序员是这样的：坐在电脑面前噼里啪啦敲着键盘，运键如飞。

现实中程序员是这样的：编码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开发的网站-用JavaScript + WebGL开发3D模型的更多相关文章

  1. SharePoint Server 2013开发之旅（二）：使用在线的开发人员网站进行SharePoint App开发

    上一篇我已经介绍了新版本的SharePoint Server提供了四种主要的开发场景,其中一个全新的App开发模型让我们眼前一亮.这一篇我将介绍如何在线进行SharePoint App开发. 谈到Sh ...

  2. 使用IntelliJ IDEA开发SpringMVC网站（一）开发环境

    使用IntelliJ IDEA开发SpringMVC网站(一)开发环境 摘要: 主要讲解初期的开发环境搭建,Maven的简单教学. 访问GitHub下载最新源码:https://github.com/ ...

  3. 【分享】分享一个压缩 PNG 的网站 TinyPNG

    TinyPNG 能做什么? TinyPNG 采用智能的有损压缩技术来减少你的 PNG 文件的文件大小.通过选择性地减少图像中的颜色数量,更少的字节用于存储数据.效果几乎是看不见的,但它在文件大小方面差 ...

  4. 分享一个基于ssm框架下的webService接口开发

    首先肯定是导入相关jar包 cxf-core-3.1.9.jar cxf-rt-bindings-soap-3.1.9.jar cxf-rt-bindings-xml-3.1.9.jar cxf-rt ...

  5. 分享一个linux中测试网站是否正常的shell脚本

    #! /bin/bash #Author=Harry CheckUrl() { #<==定义函数,名字为CheckUrl timeout=5 #<==定义wget访问的超时时间,超时就退出 ...

  6. 分享一个FileUtil工具类，基本满足web开发中的文件上传，单个文件下载，多个文件下载的需求

    获取该FileUtil工具类具体演示,公众号内回复fileutil20200501即可. package com.example.demo.util; import javax.servlet.htt ...

  7. 分享一个设计logo的网站

    https://editor.freelogodesign.org/

  8. 使用IntelliJ IDEA开发SpringMVC网站（二）开发环境

    访问GitHub下载最新源码:https://github.com/gaussic/SpringMVCDemo 文章已针对IDEA 2016做了一定的更新,部分更新较为重要,请重新阅读文章并下载最新源 ...

  9. 使用IntelliJ IDEA开发SpringMVC网站（二）框架配置

    原文:使用IntelliJ IDEA开发SpringMVC网站(二)框架配置 摘要 讲解如何配置SpringMVC框架xml,以及如何在Tomcat中运行 目录[-] 文章已针对IDEA 15做了一定 ...

随机推荐

  1. 量子隐形传态1 Quantum Teleportation

    量子隐形传态是量子纠缠的又一个应用. 隐形传态,所谓隐形的意思就是没有物质介质就传递了信息,在经典世界,传递信息要有介质,光.电磁波或者其他的什么,但是在量子的世界里,我可以把信息传递给你,并且不传递 ...

  2. HTML5的LocalStorage实现记住密码

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 localStorage ...

  3. python 之enumerate函数

    对于一个seq,得到: (0, seq[0]), (1, seq[1]), (2, seq[2]) list1 = ["这", "是", "一个&qu ...

  4. linux网络编程中的超时设置

    1 下面是在网上找到的资料,先非常的感谢. 用setsockopt()来控制recv()与send()的超时 在send(),recv()过程中有时由于网络状况等原因,收发不能预期进行,而设置收发超时 ...

  5. 2.SJ-SLAM-14

    第三讲 三维空间刚体运动 本讲目标 理解三维空间的刚体运动描述方式:旋转矩阵.变换矩阵.四元数和欧拉角. 掌握Eigen库的矩阵.几何模块使用方法. 3.1 点.向量和坐标系,旋转矩阵 二维空间与三维 ...

  6. TypeScript完全解读(26课时)_17.装饰器

    实验性的特性,需要在tslint里面把这项设置为true 作用域类的声明方法.访问符.属性和参数上 使用@符号加一个名字来定义,名字必须是一个函数,或者求值后是一个函数 装饰器工厂,setPro当做一 ...

  7. 2-1Java简介

    java程序执行流程 java平台:

  8. CodeForces599D【数学】

    题意: 给出一个x,求有多少个矩阵中满足存在x个不同的正方形. 思路: (数学渣+推理渣) #include<bits/stdc++.h> using namespace std; typ ...

  9. laravel定义全局变量并输出（实例）

    在config目录创建一个 bl.php ,内容如下 <?php return [ 'IND' => "1321232", 'das' => "奥术大师 ...

  10. Spring Cloud：使用Ribbon实现负载均衡详解（上）

    1. 什么是 Ribbon? Spring Cloud Ribbon 是一套实现客户端负载均衡的工具.注意是客户端,当然也有服务端的负载均衡工具,我们后面再介绍.可以认为 Ribbon 就是一个负载均 ...