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

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

现实中程序员是这样的：编码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. Bishops

    题意: 给定一个 $n*n$ 的国际棋盘,求问在上面放 $K$ 个象的方案数. 解法: 首先可以发现黑格和白格互不干扰,这样我们可以将黑格,白格分别求出. 考虑 $f(i,j)$ 表示坐标化后考虑长度 ...

  2. MyEclipse10.0安装SVN的三种方法

    最简单的一种: 首先下载zip包(svn:http://subclipse.tigris.org) 1.直接在MyEclipse10安装目录下的dropins文件夹下新建一个svn文件夹 2.把解压出 ...

  3. Fitnesse 之 Script Table

    在表中每一行代表一个执行脚本. 第一行中的Script关键字表明表格类型,后面紧跟着类名(Fixture)和构造函数中的参数.在一个测试页中如果没有再指定其它Fixture,将一直沿用上一个Fixtu ...

  4. [Xcode 实际操作]一、博主领进门-(14)在顶部状态栏显示风火轮以及为应用程序添加应用图标

    目录:[Swift]Xcode实际操作 本文将演示在顶部状态栏显示风火轮. 主要用于在执行某个长时间动作时,提示用户耐心等待动作的执行. 在项目导航区,打开视图控制器的代码文件[ViewControl ...

  5. 00 | QPS

    每秒查询率 QPS Query Per Second 某个查询服务器 在 规定时间内 处理了多少流量 对应的fetches/sec,即每秒响应请求数,就是最大吞吐量 原理:每天80%的访问集中在20% ...

  6. Rsync备份同步数据工具

    Rsync  is  a  fast and extraordinarily versatile file copying tool. Rsync是一款开源的,快速的,多功能的,可实现全量和增量的本地 ...

  7. Log4j2 - java.lang.NoSuchMethodError: com.lmax.disruptor.dsl.Disruptor

    问题 项目使用了log4j2,由于使用了全局异步打印日志的方式,还需要引入disruptor的依赖,最后使用的log4j2和disruptor的版本依赖如下: <dependency> & ...

  8. javascript 中not defined 和undefined有什么区别

    概念上的解释:undefined是javascript语言中定义的五个原始类中的一个,换句话说,undefined并不是程序报错,而是程序允许的一个值.not defined是javascript在运 ...

  9. LOJ6212（博弈论）

    n <= L 和 n <= 2L 情况显然,一次就能取完: 分析 n > 2L 时: Alice手速太快,Bob同学是弱势群体,所以Bob肯定不能单纯地模仿Alice,那样顶多是平手 ...

  10. python入门之lambda表达式、内置函数

    lambda 简单的函数就可以用lambda表达式 格式: abc = lambda a1,a2:a1+a2 其中,传参是a1和a2,返回值是a1+a2 内置函数 abs(a) #取绝对值 all(a ...