背景由于开发手淘内游戏面临的特定机型crash问题，最近在拜读朱永盛老师的《webkit技术内幕》，希望能发现crash的一些可能的原因。主要从渲染原理上切入，现在我把学习的内容总结一下，算是给自己有一个交代。 DOM树和RenderObject树 DOM树 浏览器中的DOM元素以树形结构组织起来，DOM元素主要有可视化元素和非可视化元素。DOM结构树大致形如下图： RenderObject树 DOM树被webkit构建之后，就需要构建本DOM树对应的RenderObject树。一个Rend ...

移动设备内存有限，为了节省内存，一般都会对贴图进行压缩。一张4MB的贴图，在移动设备中压缩之后只有1/8，也就是0.5MB。 假如有一张1024px * 1024px的4通道(RGBA8888，每个通道都为8bit)贴图。一般来说，一张纹理所占用的内存的计算方式为长乘以框再撑每个像素的比特数，计算公式日下： 内存 = 长 ✖️ 宽 ✖️ 像素比特数 那么这张图所长的内存为：1024 ✖️ 1024 ✖️ 4 ✖️ 8 bit = 1024 ✖️ 1024 ✖️ 4 Byte = 4MB, 即 ...

JS基础知识总结 Location location的属性获取location参数的方法 function getQueryArgs() { let qs = location.search.length > 0 ? location.search.substring(1) : ''; let args = {}; let items = qs.length ? qs.split('&') : []; let len = items.length; ...

总结一下WebGL中，2d纹理映射。本文只包含单纹理映射。加载shader文件，初始化WebGL上下文，加载需要映射到WebGL的图片： private gl:WebGLRenderingContext; private shaderLoader:ShaderLoader; public constructor() { this.shaderLoader = new ShaderLoader(); this.shaderLoader.load('shaders/simple_ ...

some article links here below, about webgl/opengl/graphics. OpenGL/WebGL WebGL官方API文档 GPU Gems Real-Time Rendering LearnOpenGL CN OpenGL渲染管线详解 WebGL教程 GLSL The Shader Language for WebGL The GLSL1.0 API introduction some books about graphics render ...

顶点和法线的区别 在齐次坐标系中，一个顶点的表达式为(x, y, z, 1);而一个法线的表达式为（x, y, z, 0)。法线向量的最后一个元素w=0，表示该点位于无穷远处，即只具备方向的唯一性，而不具备位置特性。而顶点位置向量的w=1，这是一个3D的点在齐次坐标系中默认的投影面。顶点位置向量同时具备方向和位置特性。 3✖️3矩阵表达的都是线性变换，无法表达平移变换。为了可以支持矩阵对平移的表达，进而完成平移、缩放和旋转等变换的联合操作(矩阵相乘)，通常都用4✖️4矩阵来表达各种变换。对于 ...

基本特性 GLSL中不支持指针和对象，不具有new运算符，创建对象用vec3(1.0, 1.0, 1.0)这种形式 WebGL中GLSL只支持循环次数明确标定的for循环，支持continue和break 函数无返回值时必须声明为void类型，不支持递归，函数在使用前必须声明或定义 只支持一维数组，且声明数组时必须指定数组长度（常量或显式数字），函数中的数组参数必须声明长度 结构体只能包含属性，不能包含函数；数组和结构体可以互相包含 矩阵和向量之间可以直接使用原始操作符，相当于操作每个元素 gl ...

向量 求模 $ \Vert\vec{v}\Vert = \sqrt{\sum_{i=1}^n (\vec{v_{i}})^2} $对于3D而言: $ \Vert\vec{v}\Vert = \sqrt{\vec{v_{1}}^2 + \vec{v_{2}}^2 + \vec{v_{3}}^2} $ 标准化 $ \vec{v}_{norm} = \frac{\vec{v}}{\Vert\vec{v}\Vert}, \Vert{\vec{v}}\Vert ≠ 0 $零向量不能被标准化，数学上这是不 ...

总结一下通过一个缓冲区传递复杂的顶点属性到vertex shader。通常顶点属性数组包含许多顶点属性，如位置，颜色，法向量等，如果每个属性都分散用不同的数组来存储，会浪费许多空间（VBO），而且，增加操作复杂度。那么在一个顶点属性数组中包含多种多种属性，创建一个顶点缓冲区，怎么将不同的属性传递给不同的shader变量呢？ 这个例子中，顶点信息中包含坐标信息和顶点大小：a_Position和a_PointSize，存储于一个数组中：顶点着色器代码： attribute vec4 a_Posit ...

小可乐到来 公元2018年4月2日19时26分，在经历26分钟的分娩后，小可乐终于和我们见面了，宝妈辛苦啦！小可乐，愿你被世界温柔对待，我和妈妈会努力保护你，愿你保持好奇心，充满对世界的探索欲。