WebAssembly 从入门到吃鸡

WebAssembly 介绍

我们知道 JavaScript 是一门脚本语言,具有动态类型和灵活的表达力,我们知道脚本语言通常要解释运行,这也将要消耗一些性能开销,于是 Google 在 2009 年在 V8 中引入了 JIT(Just in time compiling) 技术,把 JavaScript 运行时的性能推到了顶峰,同年利用 V8 引擎诞生了 Node.js,打开了使用 JavaScript 写后端应用的大门。对于目前写网络应用而言 JavaScript 已经足够用了,加上 Google V8 引擎能帮我们解决掉大部分问题。但是当我们把 JavaScript 应用到诸如 3D 游戏、虚拟现实、增强现实、计算机视觉、图像/视频编辑以及大量的要求原生性能的其他领域的时候,就遇到了性能问题,尤其是移动平台进一步放大了这些性能瓶颈。

而 WebAssembly 的出现就是为了解决这个问题,它是一门低级的类汇编语言,可以运行在现代网络浏览器中的新型代码并且提供新的性能特性和效果。它设计的目的不是为了手写代码,而是为了诸如 C、C++ 和 Rust 等低级源语言提供一个高效的编译目标以便它们能够在网络上运行。对于网络平台而言,这具有巨大的意义——这为客户端 app 提供了一种在网络平台以接近本地速度的方式运行多种语言编写代码的方式;在这之前,客户端 app 是不可能做到的。

阅读更多

WebGL 三维教程 - 绘制矩形和点(二)

Canvas 简介

在 HTML5 出现之前,如果想要在网页上显示图像,只能使用 HTML 提供的 <img> 标签。用这个标签虽然简单,但是只能显示静态的图片,不能进行实时绘制和渲染,所以后来出现了一些第三方的解决方案,比如 Flash Player 等。

Canvas 中文译为“画布”,作为画布我们可以使用 HTMLCanvasElement.getContext(contextType) 获取 Canvas 的上下文,然后使用上下文提供的 API 在画布区域绘制图案,接下来分别介绍怎么使用二维和三维的方法绘制矩形和点。

contextType 的取值如下:

  1. "2d" 建立一个 CanvasRenderingContext2D 对象,代表一个二维渲染上下文。
  2. "webgl""experimental-webgl" 这将创建一个 WebGLRenderingContext 代表三维渲染上下文对象 (OpenGL ES 2.0)。

阅读更多

WebGL 三维教程 - WebGL 介绍(一)

WebGL 概述

WebGL 是一项在网页上绘制和渲染复杂三维图形(3D 图形),并允许用户与之进行交互的技术,在传统上只有高配置的计算机或专用的游戏机才能渲染三维图形,而现在随着个人计算机与浏览器的性能越来越强,使用便捷通用的 Web 技术创建和渲染三维图形已经成为可能。HTML5 作为目前最新的 HTML 标准,扩展了传统 HTML 的特征,如二维图形、网络传输、本地数据储存等,HTML5 时代的到来使浏览器正在迅速地从简单的展示工具转变为复杂的应用平台,人们希望网页不仅仅由二维图组成,所以 WebGL就顺着时代的召唤到来了。

WebGL 的起源

在个人计算机上使用最广泛的两种三维图形渲染技术使 Direct3D 和 OpenGL。Direct3D 是微软DirectX 技术的一部分,是一套由微软控制的编程接口(API),主要用在 Windows 平台;而 OpenGL 由于其开放和免费的特征,在多种平台上都有广泛地使用,后来 Windows 对 OpenGL 也提供了良好的支撑,开发者也可以使用它来代替 Direct3D。

OpenGL 最初是由 SGI(Silicon Graphics Inc)开发,并在 1992 年发布为开源标准。多年以来,OpenGL 发展了数个版本,并对三维图形开发、软件产品开发、甚至电影制作产生了深远的影响。虽然 WebGL 根植于 OpenGL,但它实际上是从 OpenGL 的一个特殊版本 OpenGL ES 派生出来的,OpenGL ES 主要专用于嵌入式计算机、智能手机、家用用洗等设备。OpenGL ES 于 2003~2004 年被首次提出,并在 2007 年(ES 2.0)进行了两次升级,WebGL 是基于 OpenGL ES 2.0 的。这几年采用 OpenGL ES 技术的电子设备的数量大幅度增长,尤其是移动端设备。OpenGL ES 成功被这些设备采用的部分原因是,它在添加新特性的同时从 OpenGL 中移除了许多陈旧的旧特性,这使它在保持轻量级的同时,仍具有足够的能力来渲染出精美的三维图形。

阅读更多

Hexo 搭建静态博客与 hexo-theme-concise 主题使用教程

什么是 Hexo?

Hexo 是一款基于Node.js的一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页,你可以把生成的静态网页上传到 Web 服务器上,这里我们选用的是 GitHub 做 Web 服务器,你没看错,全球最大的同性恋交友网站(🙈逃……),然后就可以访问到博客站点,因为每个页面都是静态的,所以访问速度是非常快的,用户体验非常好。

什么是 Markdown

Markdown 是一种用来写作的轻量级「标记语言」,后缀格式通常为:.md 或 .markdown,用简洁的语法来描述排版格式,可以让我们更专心的写作,因为 Markdown 是纯文本格式,所以可以实现跨平台,不管你切换到什么设备都可以查阅及写作,并且可以轻松的转换为HTML、PDF、电子书等。目前市场上还有大量在线编辑器,支持实时预览,让你充分享受 Markdown 带来的愉悦感。

阅读更多