亚洲必赢登录 > 亚洲必赢app > 性子优化初尝,聊一聊原生浏览器中的模块

原标题:性子优化初尝,聊一聊原生浏览器中的模块

浏览次数:98 时间:2019-10-13

理解 JavaScript 的 async/await

2017/03/08 · JavaScript · 1 评论 · async, await

初藳出处: 边城   

随着 Node 7 的昭示,更多的人初始研讨听他们讲是异步编制程序终级建设方案的 async/await。笔者首先次寻访那组第一字实际不是在 JavaScript 语言里,而是在 c# 5.0 的语法中。C# 的 async/await 要求在 .NET Framework 4.5 以上的本子中应用,由此作者还很伤感了一阵——为了要包容 XP 系统,大家开垦的软件不可能运用过量 4.0 版本的 .NET Framework。

自家前边在《闲谈异步调用“扁平”化》 中就聊到了这些难点。无论是在 C# 仍旧 JavaScript 中,async/await 都以足够棒的特色,它们也都以老大甜的语法糖。C# 的 async/await 完成离不开 Task 或 Task<Result> 类,而 JavaScript 的 async/await 完毕,也离不开Promise。

现行反革命屏弃 C# 和 .NET Framework,专注讨论下 JavaScript 的 async/await。

聊一聊原生浏览器中的模块

2018/07/04 · 基础本事 · 浏览器

原稿出处: 记   

自打ES二零一六脱稿以来,咱们通过 Babel 等转移工具得以在项目中从来运用【模块】。前端模块化开辟已然是不可扭转局面,在 ECMAScript module 从前我们因而 requirejs、seajs、LABjs,以致最先的时候大家通过闭包来促成模块化开拓。近日有的主流的的浏览器厂商已经在他们新版的浏览器中原生扶持了【模块】,明天大家就来原生浏览器中的模块到底什么样。

此时此刻原生扶植模块用法的浏览器有:

  • Safari 10.1
  • Chrome 61
  • Firefox 60
  • Edge 16

要利用原生浏览器的模块,你只要求在 script 标签上加多一个 type=module 属性, 浏览器就会把那几个本子(内联脚本或许外联脚本)当作模块来处理。

JavaScript

<script type="module"> import {addTextToBody} from './utils.mjs'; addTextToBody('Modules are pretty cool.'); </script>

1
2
3
4
<script type="module">
  import {addTextToBody} from './utils.mjs';
  addTextToBody('Modules are pretty cool.');
</script>

JavaScript

// utils.mjs export function addTextToBody(text) { const div = document.createElement('div'); div.textContent = text; document.body.appendChild(div); }

1
2
3
4
5
6
// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

在线Demo

用 Async 函数简化异步代码

2017/04/08 · JavaScript · 异步

原来的文章出处: Joe Zimmerman , Nilson Jacques   译文出处:oschina   

Promise 在 JavaScript 上发布之初就在互联网络流行了四起 — 它们帮开辟人员摆脱了回调鬼世界,消除了在无数地点忧愁 JavaScript 开拓者的异步难点。但 Promises 也未曾完美。它们平素呼吁回调,在一部分头昏眼花的标题上仍会微微凌乱和部分猜疑的冗余。

乘胜 ES6 的来到(现在被称作 ES贰零壹肆),除了引进 Promise 的正规,无需央浼这些数不清的库之外,我们还有了生成器。生成器可在函数内部结束实施,那表示可把它们封装在叁个多用途的函数中,大家可在代码移动到下一行以前等待异步操作完毕。乍然你的异步代码只怕就起来看起来共同了。

这只是第一步。异步函数因今年步向 ES2017,已开展标准,本地协理也越来越优化。异步函数的见识是应用生成器进行异步编制程序,并交由他们自个儿的语义和语法。由此,你不用使用库来获取封装的实用函数,因为这几个都会在后台管理。

运营小说中的 async/await 实例,你供给三个能合营的浏览器。

webgl 品质优化初尝

2017/05/14 · HTML5 · WebGL

最早的作品出处: AlloyTeam   

上次小说介绍了怎么着用webgl神速创立四个和好的小世界,在我们入门webgl之后,並且可以用原生webgl写demo越来越复杂过后,大家大概会纠葛一点:就是自家使用webgl的姿态对不对。因为webgl能够操控shader加上超底层API,带来了一个场景正是平等一个东西,能够有各个的完成情势,而那时大家该怎么样选取呢?这篇文章将有个别尖锐一些webgl,给大家介绍一些webgl的优化知识。

性子优化初尝,聊一聊原生浏览器中的模块。讲webgl优化此前大家先轻巧回想一下canvas2D的优化,常用的display list、动态区域重绘等等。用canvas2D多的同桌应该对上述的优化或多或少都有领悟,可是你对webgl的优化通晓么,如若不通晓的话往下看就对了~这里会先从最底层图疑似怎么着渲染到显示器上开首,稳步起头我们的webgl优化。

HTTP/2 Server Push 详解(下)

2017/04/23 · 基础本事 · HTTP

原作出处: Jeremy Wagner   译文出处:AlloyTeam   

接上篇 HTTP/2 Server Push 详解(上)

翻译注:上文介绍了 HTTP/2 Server Push 的基本概念和用法,下边继续深远实际使用的习性和勘察。

async 和 await 在干什么

自由三个称号都以有含义的,先从字面意思来精通。async 是“异步”的简写,而 await 能够感觉是 async wait 的简写。所以理应很好精通 async 用于申澳优个 function 是异步的,而 await 用于等待贰个异步方法实施到位。

另外还会有多个很风趣的语法则定,await 只可以现身在 async 函数中。然后留心的对象会时有发生叁个疑云,就算 await 只好出现在 async 函数中,那那么些 async 函数应该怎么调用?

借使必要通过 await 来调用二个 async 函数,那这几个调用的外部必需得再包三个async 函数,然后……步入死循环,永无出头之日……

比如 async 函数不供给 await 来调用,那 async 到底起个什么效能?

不支持裸导入(不能够透过模块名直接导入)

一个及格的模块标记符必需满意下列规范之一:

  • 一个整机的非相对U奇骏L。通过 new URL(moduleSpecifier) 使用时不会报错。
  • / 开头。
  • ./ 开头。
  • ../ 开头。

封存其余验证符供今后应用,如导入内置模块。

JavaScript

// 支持: import {foo} from ''; import {foo} from '/utils/bar.mjs'; import {foo} from './bar.mjs'; import {foo} from '../bar.mjs'; // 不支持: import {foo} from 'bar.mjs'; import {foo} from 'utils/bar.mjs';

1
2
3
4
5
6
7
8
// 支持:
import {foo} from 'https://jakearchibald.com/utils/bar.mjs';
import {foo} from '/utils/bar.mjs';
import {foo} from './bar.mjs';
import {foo} from '../bar.mjs';
// 不支持:
import {foo} from 'bar.mjs';
import {foo} from 'utils/bar.mjs';

运转万分

在客户端,Chrome、Firefox 和 Opera 能很好地支持异步函数。

亚洲必赢app 1

(点击图片张开页面跳转)

从 7.6 版本伊始,Node.js 私下认可启用 async/await。

gpu怎么着渲染出叁个物体

先看叁个大致的球的事例,上边是用webgl画出来的三个球,加上了一点光的功用,代码极粗略,这里就不开展说了。
一个球
其两个球是一个粗略的3D模型,也从没复杂的有的变化,所以例子中的球质量很好,看FPS值牢固在60。前面我们会尝试让它变得复杂起来,然后开展部分优化,可是这一节咱们得先精通渲染的法规,知其向来本领通晓优化的原理。

大家都清楚webgl与着色器是紧凑的关联,webgl当中有终点着色器和局地着色器,上边用一张图来简单表达下四个实体由0到1生成的长河。
亚洲必赢app 2
0就是源点,对应图上边包车型大巴3D mesh,在程序中这几个正是3D极限新闻
1正是终点,对应图上边的Image Output,此时一度渲染到荧屏上了
大家根本是关切中间那四个级次,第一个是三个规范的三角,以至三角形上面用四个圈指明了多个点,再增加vertex关键字,能够很精通的掌握是终极着色器管理的阶段,图翻译为大白话便是:
我们将顶点消息传给顶点着色器(drawElements/drawArray),然后着色器将顶点音讯管理并伊始画出三角形(gl_Position)

接下来再看后四个图,很显著的fragments关键字指明了那是片元着色器阶段。Rasterization是光栅化,从图上直观的看便是三角形用三条线意味着形成了用像素表示,其实骨子里也是这么,更详实的能够看上面地址,这里不举行举行。
何以知清宣宗栅化-乐乎
前面阶段是上色,能够用textture或许color都得以,反正统一以rgba的方式赋给gl_FragColor
图中vertexShader会执行3次,而fragmentShader会执行35次(有35个方块)
意识fragmentShader实施次数远远超越vertexShader,此时敏感的心上大家断定就想开尽或然的将fragmentShader中的总结放在vertexShader中,但是能那样玩么?

粗犷去找还是能够找到这么的场所包车型客车,比方说反射光。反射光的盘算其实不是很复杂,但也可以有一点有必然的总计量,看主旨代码

JavaScript

vec3 L = normalize(uLightDirection); vec3 N = normalize(vNormal); float lambertTerm = dot(N, -L); vIs = vec4(0.0, 0.0, 0.0, 1.0); if (lambertTerm > 0.0) { vec3 E = normalize(vEye); vec3 R = reflect(L, N); float specular = pow(max(dot(R, E), 0.0), uShininess); vIs = uLightSpecular * uMaterialSpecular * specular; }

1
2
3
4
5
6
7
8
9
10
11
vec3 L = normalize(uLightDirection);
vec3 N = normalize(vNormal);
float lambertTerm = dot(N, -L);
vIs = vec4(0.0, 0.0, 0.0, 1.0);
if (lambertTerm > 0.0) {
    vec3 E = normalize(vEye);
    vec3 R = reflect(L, N);
    float specular = pow(max(dot(R, E), 0.0), uShininess);
    vIs = uLightSpecular * uMaterialSpecular * specular;
}

地点反射光代码就不细说了,宗旨正是放置的reflect方法。这段代码既可以够放在fragmentShader中也能够放在vertexShader中,但是两岸的结果有个别分歧,结果个别如下
放在vertexShader中
放在fragmentShader中

进而说这里的优化是有恶疾的,能够看出vertexShader中推行光计算和fragmentShader中试行生成的结果差别照旧蛮大的。换言之如若想要达成真正面与反面射光的功力,必得在fragmentShader中去总计。起先就说了那篇文章的宗意在同一的八个职能,用什么办法是最优的,所以continue~

什么样鉴定区别 Server Push 是不是见效

最近,我们早已经过 Link 首部来报告服务器推送一些能源。剩下的难题是,大家怎么掌握是否见效了呢?

那还要看不一样浏览器的情状。最新版本Chrome就要开拓者工具的互连网发起栏中彰显推送的能源。

亚洲必赢app 3

Chrome显示服务器推送的财富(大图)

更进一竿,假诺把鼠标悬停在网络央求瀑布图中的能源上,将赢得有关该推送能源的详尽耗费时间音信:

亚洲必赢app 4

Chrome呈现推送资源的详尽耗费时间音讯(大图)

Firefox对推送财富则标志地没那么显明。如若三个财富是被推送的,则浏览器开采者工具的互联网新闻里,会将其场馆呈现为二个黑灰圆点。

亚洲必赢app 5

Firefox对推送财富的来得(大图)

假如您在搜索贰个保障能鉴定区别能源是还是不是为推送的措施,能够利用 nghttp 命令行客户端来检查是还是不是来自 HTTP/2 服务器,像这么:

nghttp -ans

1
nghttp -ans https://jeremywagner.me

以此命令会展现出会话中拥有能源的汇总计果。推送的能源将要出口中展现三个星号(*),像这样:

id responseEnd requestStart process code size request path 13 +50.28ms +1.07ms 49.21ms 200 3K / 2 +50.47ms * +42.10ms 8.37ms 200 2K /css/global.css 4 +50.56ms * +42.15ms 8.41ms 200 157 /css/fonts-loaded.css 6 +50.59ms * +42.16ms 8.43ms 200 279 /js/ga.js 8 +50.62ms * +42.17ms 8.44ms 200 243 /js/load-fonts.js 10 +74.29ms * +42.18ms 32.11ms 200 5K /img/global/jeremy.png 17 +87.17ms +50.65ms 36.51ms 200 668 /js/lazyload.js 15 +87.21ms +50.65ms 36.56ms 200 2K /img/global/book-1x.png 19 +87.23ms +50.65ms 36.58ms 200 138 /js/debounce.js 21 +87.25ms +50.65ms 36.60ms 200 240 /js/nav.js 23 +87.27ms +50.65ms 36.62ms 200 302 /js/attach-nav.js

1
2
3
4
5
6
7
8
9
10
11
12
id  responseEnd requestStart  process code size request path
13     +50.28ms      +1.07ms  49.21ms  200   3K /
  2     +50.47ms *   +42.10ms   8.37ms  200   2K /css/global.css
  4     +50.56ms *   +42.15ms   8.41ms  200  157 /css/fonts-loaded.css
  6     +50.59ms *   +42.16ms   8.43ms  200  279 /js/ga.js
  8     +50.62ms *   +42.17ms   8.44ms  200  243 /js/load-fonts.js
10     +74.29ms *   +42.18ms  32.11ms  200   5K /img/global/jeremy.png
17     +87.17ms     +50.65ms  36.51ms  200  668 /js/lazyload.js
15     +87.21ms     +50.65ms  36.56ms  200   2K /img/global/book-1x.png
19     +87.23ms     +50.65ms  36.58ms  200  138 /js/debounce.js
21     +87.25ms     +50.65ms  36.60ms  200  240 /js/nav.js
23     +87.27ms     +50.65ms  36.62ms  200  302 /js/attach-nav.js

这里,我在和睦的站点上选择了 nghttp,有四个推送的能源(起码在写那篇小说时)。推送的财富在 requestStart 栏左侧以星号标志了出去。

现行反革命大家驾驭了哪些鉴定分别推送的资源,接下里具体看看对实际站点的习性有如何实际影响。

async 起怎么着效果

其一难题的关键在于,async 函数是怎么管理它的再次回到值的!

大家本来愿意它能一直通过 return 语句再次来到大家想要的值,可是一旦真是如此,就像是就没 await 什么事了。所以,写段代码来试试看,看它到底会回去什么:

JavaScript

async function testAsync() { return "hello async"; } const result = testAsync(); console.log(result);

1
2
3
4
5
6
async function testAsync() {
    return "hello async";
}
 
const result = testAsync();
console.log(result);

旁观输出就醒来了——输出的是贰个 Promise 对象。

Shell

c:vartest> node --harmony_async_await . Promise { 'hello async' }

1
2
c:vartest> node --harmony_async_await .
Promise { 'hello async' }

从而,async 函数重临的是叁个 Promise 对象。从文档中也足以猎取这么些音信。async 函数(包涵函数语句、函数表明式、Lambda表明式)会回来二个 Promise 对象,就算在函数中 return 三个间接量,async 会把这几个直接量通过 Promise.resolve() 封装成 Promise 对象。

async 函数重返的是二个 Promise 对象,所以在最外层不能够用 await 获取其重回值的景色下,大家自然应该用原本的艺术:then() 链来管理那个Promise 对象,就好像这样

JavaScript

testAsync().then(v => { console.log(v); // 输出 hello async });

1
2
3
testAsync().then(v => {
    console.log(v);    // 输出 hello async
});

这几天回过头来想下,假诺 async 函数未有再次来到值,又该怎么着?很轻便想到,它会回去 Promise.resolve(undefined)

联想一下 Promise 的脾性——无等待,所以在尚未 await 的图景下实行 async 函数,它会即时实行,重回一个 Promise 对象,何况,绝不会阻塞前面包车型地铁言辞。那和平常重返 Promise 对象的函数并无二致。

那就是说下贰个关键点就在于 await 关键字了。

通过 nomodule 向后十一分

假若当前浏览器扶助 type=module 标签的话会活动忽视 nomodule 标签。这表示你能够将模块暴露给扶植模块的浏览器,同一时常间能够给不支持模块的浏览器提供宽容方案。

JavaScript

<script type="module" src="module.mjs"></script> <script nomodule src="fallback.js"></script>

1
2
<script type="module" src="module.mjs"></script>
<script nomodule src="fallback.js"></script>

在线Demo

异步函数和生成器相比

那有个使用生成器进行异步编制程序的实例,用的是 Q 库:

var doAsyncOp = Q.async(function* () {   var val = yield asynchronousOperation();   console.log(val);   return val; });

1
2
3
4
5
var doAsyncOp = Q.async(function* () {
  var val = yield asynchronousOperation();
  console.log(val);
  return val;
});

Q.async 是个封装函数,管理场景后的事体。个中 * 表示作为四个生成器函数的服从,yield 表示结束函数,并用封装函数替代。Q.async 将会回来三个函数,你可对它赋值,如同赋值 doAsyncOp 同样,随后再调用。

ES7 中的新语法更简明,操作示比如下:

async function doAsyncOp () {   var val = await asynchronousOperation();        console.log(val);   return val; };

1
2
3
4
5
async function doAsyncOp () {
  var val = await asynchronousOperation();     
  console.log(val);
  return val;
};

差别不大,我们删除了三个包裹的函数和 * 符号,转而用 async 关键字代替。yield 关键字也被 await 替代。那么些例证事实上做的事是一样的:在 asynchronousOperation 达成以往,赋值给 val,然后开展输出并赶回结果。

gpu总计技术很猛

上一节说了gpu渲染的准则,这里再任由说几个gpu相关的资讯
百度人工智能大规模利用gpu,PhysX碰撞检查评定使用gpu提速……种种类似的现象都注解了gpu在仅仅的测算工夫上是超越日常的cpu,而大家关切一下前一节shader里面包车型地铁代码

vertexShader

JavaScript

void main() { vec4 vertex = uMMatrix * uRMatrix * vec4(aPosition, 1.0); vNormal = vec3(uNMMatrix * uNRMatrix * vec4(aNormal, 1.0)); vEye = -vec3((uVMatrix * vertex).xyz); gl_Position = uPMatrix * uVMatrix * vertex; }

1
2
3
4
5
6
7
void main() {
    vec4 vertex = uMMatrix * uRMatrix * vec4(aPosition, 1.0);
    vNormal = vec3(uNMMatrix * uNRMatrix * vec4(aNormal, 1.0));
    vEye = -vec3((uVMatrix * vertex).xyz);
    gl_Position = uPMatrix * uVMatrix * vertex;
}

fragmentShader

JavaScript

void main() { vec3 L = normalize(uLightDirection); vec3 N = normalize(vNormal); float lambertTerm = dot(N, -L); vec4 Ia = uLightAmbient * uMaterialAmbient; vec4 Id = vec4(0.0, 0.0, 0.0, 1.0); vec4 Is = vec4(0.0, 0.0, 0.0, 1.0); if (lambertTerm > 0.0) { Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; vec3 E = normalize(vEye); vec3 R = reflect(L, N); float specular = pow(max(dot(R, E), 0.0), uShininess); Is = uLightSpecular * uMaterialSpecular * specular; } vec4 finalColor = Ia + Id + Is; finalColor.a = 1.0; gl_FragColor = finalColor; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
void main() {
    vec3 L = normalize(uLightDirection);
    vec3 N = normalize(vNormal);
    float lambertTerm = dot(N, -L);
    vec4 Ia = uLightAmbient * uMaterialAmbient;
    vec4 Id = vec4(0.0, 0.0, 0.0, 1.0);
    vec4 Is = vec4(0.0, 0.0, 0.0, 1.0);
    if (lambertTerm > 0.0) {
        Id = uLightDiffuse * uMaterialDiffuse * lambertTerm;
        vec3 E = normalize(vEye);
        vec3 R = reflect(L, N);
        float specular = pow(max(dot(R, E), 0.0), uShininess);
        Is = uLightSpecular * uMaterialSpecular * specular;
    }
    vec4 finalColor = Ia + Id + Is;
    finalColor.a = 1.0;
    gl_FragColor = finalColor;
}

可以窥见逻辑语句少之又少,越来越多的都以计量,非常是矩阵的运算,八个mat4相乘通过js需求写成这么(代码来自glMatrix)

JavaScript

mat4.multiply = function (mat, mat2, dest) { if (!dest) { dest = mat } // Cache the matrix values (makes for huge speed increases!) var a00 = mat[0], a01 = mat[1], a02 = mat[2], a03 = mat[3]; var a10 = mat[4], a11 = mat[5], a12 = mat[6], a13 = mat[7]; var a20 = mat[8], a21 = mat[9], a22 = mat[10], a23 = mat[11]; var a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15]; var b00 = mat2[0], b01 = mat2[1], b02 = mat2[2], b03 = mat2[3]; var b10 = mat2[4], b11 = mat2[5], b12 = mat2[6], b13 = mat2[7]; var b20 = mat2[8], b21 = mat2[9], b22 = mat2[10], b23 = mat2[11]; var b30 = mat2[12], b31 = mat2[13], b32 = mat2[14], b33 = mat2[15]; dest[0] = b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30; dest[1] = b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31; dest[2] = b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32; dest[3] = b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33; dest[4] = b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30; dest[5] = b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31; dest[6] = b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32; dest[7] = b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33; dest[8]亚洲必赢app, = b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30; dest[9] = b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31; dest[10] = b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32; dest[11] = b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33; dest[12] = b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30; dest[13] = b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31; dest[14] = b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32; dest[15] = b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33; return dest; };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
mat4.multiply = function (mat, mat2, dest) {
    if (!dest) {
        dest = mat
    }
    // Cache the matrix values (makes for huge speed increases!)
    var a00 = mat[0],
        a01 = mat[1],
        a02 = mat[2],
        a03 = mat[3];
    var a10 = mat[4],
        a11 = mat[5],
        a12 = mat[6],
        a13 = mat[7];
    var a20 = mat[8],
        a21 = mat[9],
        a22 = mat[10],
        a23 = mat[11];
    var a30 = mat[12],
        a31 = mat[13],
        a32 = mat[14],
        a33 = mat[15];
    var b00 = mat2[0],
        b01 = mat2[1],
        b02 = mat2[2],
        b03 = mat2[3];
    var b10 = mat2[4],
        b11 = mat2[5],
        b12 = mat2[6],
        b13 = mat2[7];
    var b20 = mat2[8],
        b21 = mat2[9],
        b22 = mat2[10],
        b23 = mat2[11];
    var b30 = mat2[12],
        b31 = mat2[13],
        b32 = mat2[14],
        b33 = mat2[15];
    dest[0] = b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30;
    dest[1] = b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31;
    dest[2] = b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32;
    dest[3] = b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33;
    dest[4] = b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30;
    dest[5] = b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31;
    dest[6] = b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32;
    dest[7] = b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33;
    dest[8] = b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30;
    dest[9] = b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31;
    dest[10] = b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32;
    dest[11] = b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33;
    dest[12] = b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30;
    dest[13] = b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31;
    dest[14] = b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32;
    dest[15] = b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33;
    return dest;
};

能够说比较普通的加减乘除来讲矩阵相关的总结量照旧有一点大的,而gpu对矩阵的测算有过特别的优化,是相当慢的

因此大家率先感应自然就是能在shader中干的活就无须让js折腾啦,譬喻说前边代码上校proMatrix/viewMatrix/modelMatrix都坐落shader中去总计。以致将modelMatrix里面再区分成moveMatrix和rotateMatrix能够越来越好的去爱惜不是么~

然则驾驭threejs也许看别的学习资料的的同桌确定晓得threejs会把这么些总括放在js中去实践,那是为何呢??比如下方代码(节选自webgl编制程序指南)

vertexShader中

JavaScript

…… attribute vec4 u_MvpMatrix;…… void main() { gl_Position = u_MvpMatrix * a_Position; } ……

1
2
3
4
5
6
……
attribute vec4 u_MvpMatrix;……
void main() {
    gl_Position = u_MvpMatrix * a_Position;
}
……

javascript中

JavaScript

…… var mvpMatrix = new Matrix4(); mvpMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100); mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0); gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); ……

1
2
3
4
5
6
……
var mvpMatrix = new Matrix4();
mvpMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);
mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
……

此处还是把proMatrix/viewMatrix/modelMatrix全体在js中计算好,然后传入到shader中去,为何要这么吗?

构成首节大家看下vertexShader实施的次数是和极端有关联的,而各类终端都急需做靶子坐标->世界坐标->眼睛坐标的转移,一经传入八个极端,就代表gpu需要将proMatrix * viewMatrix * modelMatrix算算一回,而一旦大家在js中就总计好,充当贰个矩阵传给gpu,则是极好的。js中纵然总计起来相较gpu慢,可是胜在次数少啊。
看上边几个结果

在shader中计算
在js中计算

先是个是将矩阵都传开给gpu去计算的,笔者这边察看FPS维持在50左右
其次个是将一些矩阵总括在js中成功的,作者那边见到FPS维持在60样的
此间用的1七十九个球,如若球的数额更加大,差距还足以进一步明显。所以说gpu总结虽好,但毫无滥用呦~

测量 Server Push 性能

衡量任何性质提升的法力都急需很好的测验工具。Sitespeed.io 是二个可从 npm 获取的美妙工具,它能够自动地质衡量试页面,收罗有价值的习性数据。有了轻车熟路的工具,我们来相当的慢过一下测量试验方法吧。

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:性子优化初尝,聊一聊原生浏览器中的模块

关键词:

上一篇:没有了

下一篇:没有了