使用 Three.js 的 RenderTarget 实现离屏渲染

RenderTarget 介绍

在渲染的时候调用 renderer.render(scene, camera, renderTarget, forceClear) 方法,render 方法有四个参数,我们平时使用只传前两个参数,第一个参数是要绘制的场景,第二个参数是指定相机,相机照射的区域会转换成 2D 绘制到屏幕,而我们今天要讲的就是使用第三个参数,不让渲染的内容直接绘制到屏幕,而是存放到 renderTarget 里。RenderTarget 是一个缓冲区,用来记录渲染后的像素,而不是直接绘制到屏幕上,因此我们可以在绘制屏幕之前做一些处理,以满足特殊的需求。

把 RenderTarget 作为贴图使用

首先创建两个场景:一个 RTScene 场景,用来渲染 RenderTarget 贴图、另一个 Scene 场景,用来渲染最终显示到屏幕上的,并调用 RTScene 场景作为贴图。

阅读更多

浏览器 HTTP 并发请求规则探讨

并发请求介绍

由于端口数量和线程切换开销的考虑,浏览器不能无限量的并发请求,再者将所有请求一起发给服务器,也很可能会引发服务器的并发阈值控制而被 BAN,而另外一个控制的原因是 keep alive 技术的存在使得浏览器复用现有连接和服务器通信比创建新连接的性能要更好一些,出于客户端和服务端因素的综合考虑,因此衍生出来了并发限制。

以下为各大浏览器并发请求限制的数量(只在同一与域名下有效)

浏览器HTTP 1.1HTTP 1.0
IE 6, 724
IE 8, 966
Firefox 1366
Chrome 206?
Safari 5.1.76?
Opera 11.648?

阅读更多

JavaScript Event Loop、Micro Task、Macro Task

Event Loop

Event Loop:事件循环、Micro Task:微任务、Macro Task:宏任务

我们知道 JavaScript 是单线程语言,一心不能二用,也就是说它只能把一件事干完才能去干另一件事,但前端的一些任务是非常耗时的,比如网络请求,定时器和事件监听,如果让它们和别的任务一样,都老老实实的排队等待执行的话,执行效率会非常的低,甚至导致页面的假死。所以为了保证使用流畅,浏览器采用了 Event Loop 事件循环系统来管理,把那些耗时的任务放入 task queues 栈中,等主程序执行完再执行 task queues 中的任务,通常使用回调函数监听 task queues 中的任务状态。

在其它语言中可以迟延执行,比如 C 语言的 sleep(3) 可以迟延 3 秒执行后边的逻辑,但是在 JavaScript 中是没有这样的操作(除了 alertconfrimprompt 和异步 xhr,官方说这些是历史遗留的错误设计😂),只能使用异步方式去模拟,模拟的实际也不是真正意义上的 sleep 效果。

阅读更多

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 在画布区域绘制图案,接下来分别介绍怎么使用二维和三维的方法绘制矩形和点。

阅读更多

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

WebGL 概述

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

WebGL 的起源

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

阅读更多

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

什么是 Hexo?

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

什么是 Markdown

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

阅读更多