webgl
文章平均质量分 72
布谷的鸟
冰冻三尺非一日之寒
展开
-
WEBGL Learning(四) 遮罩之模板测试
什么是模板测试我是这样理解的,可以把他看作月饼模具。模具压下去,模具以内的留了下来,其他部分被舍弃。再看下专业一点的简单解释:Stencil test是per-fragment operations的一种,这就意味着它处于fragment shader (片段着色器)之后,stencil test的主要作用就是根据stencil buffer的内容,来丢弃不需要的fragments。先来看下使用步骤:1.开启模板测试2.设置模板参数(针对模板)3.渲染物体(模板), 更新模板缓冲的内容4.原创 2021-06-21 11:50:24 · 1181 阅读 · 1 评论 -
WebGL Learning(三)绘制纹理
使用WebGL 将纹理绘制到窗口基本流程根据前面的学习,我们对WebGL有一个基础的了解。但绘制纹理还是有区别的,其中使用到了一些WebGL常用的API。这里我们先讲一下绘制流程WebGL与Canvas的区别Canvas只是浏览器的画布,当然它也有自己的绘制文字图形的API接口。WebGL是以 OpenGL ES 2.0 为基础的一套 浏览器 3D图形API (HTML5),在编程概念上与OpenGL ES 2.0 几乎是完全通用的,同样采用可编程渲染管线,也就是每个顶点的处理受到一小段Vert原创 2021-05-28 16:03:45 · 301 阅读 · 0 评论 -
S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这样就要求每张贴图长度和宽度应该是4的倍数。图像如同一般的做法按照行列顺序存放这些4X4的纹理单元块(texel blocks),每个texel blocks被看成是一个图像的“像素”。对于那些长转载 2016-12-13 10:12:45 · 3412 阅读 · 0 评论 -
DDS纹理文件格式
DDS文件格式要追述到S3(Silicon & Software Systems)公司提出的一种纹理压缩格式S3TC(S3 Texture Compression), 其目的是通过对纹理的压缩, 以达到节约系统带宽并提高效能的目的. S3TC就是通过压缩方式, 利用有限的纹理缓存空间来存储更多的纹理, 因为它支持6:1的压缩比例, 所以6M的纹理可以被压缩为1M存放在材质缓存中, 从而在节约了缓存的转载 2016-12-24 14:27:58 · 5242 阅读 · 0 评论 -
WebGL Learning (一)绘制一个蓝色矩形
用canvas绘制一个蓝色矩形,显示在网页上DrawRectangle.html:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Draw a blue rectangle</title></head><body onload="main()"><canvas id="example" width="400"原创 2017-01-07 10:33:25 · 1355 阅读 · 0 评论 -
WebGL Learning (二)绘制一个点
DrawPoint.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Draw a point</title></head><body onload="main()"><canvas id="webgl" width="400" height="400"> Please use a browse原创 2017-01-13 15:12:13 · 746 阅读 · 0 评论 -
js事件之event.preventDefault()与event.stopPropagation()简单介绍
event.preventDefault()用法介绍:该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。 例如,如果 type 属性是 “submit”,在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。 注意:如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用原创 2017-01-13 15:26:01 · 1315 阅读 · 0 评论