webgl 模板缓冲

2024-11-04

WebGL学习笔记（十五）：模板缓冲

可以用来干啥? 模板缓冲一般用来实现一些地面反射投影和类似镜子的特殊效果,如下: 开启模板缓冲默认情况下,模板缓冲是关闭的,模板缓冲如果处于关闭状态,运行模板相关的代码不会报错,但是不会出现预期的效果. 使用下面的代码可以开启模板缓冲: var gl = canvas.getContext("webgl", { stencil: true }); 使用流程模板缓冲可以确定下次渲染时,指定的像素是否要进行剔除,可以理解为每个像素只有 0(丢弃) 和 1(保留) 两个数值. 具体使用模

webgl 模板缓冲

先思考个问题, 想实现遮罩怎么办? <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Stencil Buffer</title> <script id="shader-vs" type="x-shader/x-vertex"> precision highp float; attribut

Shader 模板缓冲和模板测试

http://blog.sina.com.cn/s/blog_6e159df70102xa67.html 模板缓冲的概念 Unity官方的Shader文档根本没有提到这个玩意,这个概念也是看到了UGUI build-in shader 的Mask实现才发现了这个部分. 先说一下基础知识,在图形学中一个像素会有如下缓存: 颜色缓存color buffer/pixel buffer:储存该点即将显示的颜色,RGBA值深度缓存depth buffer/z buffer:储存该点的深度,z 模板缓存s

进一步使用模板缓冲（stencil）

最近做课题的时候需要计算一个 view(就是一次渲染得到的帧) 下的重叠像素个数(两个物体或更多的物体重叠). 最开始我的想法是渲染一个物体输出一张纹理,这样对比物体之间的纹理就知道重叠了.但是这样当物体很多的时候需要输出太多的纹理到CPU,太慢了,也很麻烦. 后来和同学讨论了一下,觉得是不是可以使用一张纹理作为帧缓冲的输出,同时作为片段着色器的输入,这样可以每渲染一个像素点加1,最终大于1的位置表示重叠.但是后来这样试了,在片段着色器中采样这张纹理的时候,采样出来的值明显不对,没有随着渲染一个

windows API下的模板缓冲（stencil buffer）

在windows API搭建的OpenGL窗口中使用模板缓冲,需要在像素格式描述表中设置stencil buffer位宽为8,这样窗口会自动生成stencil buffer,然后可以在opengl环境下使用模板缓冲了. 一个渲染物体轮廓的示例,绿色为小长方体的边框 void Display() { glEnable(GL_DEPTH_TEST); glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE); glClear(GL_COLOR_BUFFER_BIT | GL

webgl 深度缓冲

传统的画2d画布就是后画的会盖在先画的上面,但是在画一些三维图形时,这很难控制深度缓冲区的作用就是区分颜色所在的层次,防止把被遮挡住的颜色显示出来. 深度缓冲很强大,用起来很简单开启深度缓冲(测试),注意是测试 gl.enable(gl.DEPTH_TEST); 清除深度缓存 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); <!DOCTYPE html> <html lang="en">

WebGL学习笔记（十六）：遮罩

这里总结下几种WebGL中实现遮罩的方法. 模板缓冲模板缓冲可以实现渲染剔除,但是我们之前的学习里,剔除范围是基于上一次渲染的结果,且上一次的渲染也会进行显示,这样的话并不适合用来实现遮罩. 我们想实现遮罩的话,是希望只绘制模板缓冲而不绘制颜色缓冲. 想要实现这样的效果,可以借助 colorMask 方法来实现(如果关闭了颜色缓冲的所有通道后,下一次绘制就不会改变颜色缓冲了),具体写法如下: // 关闭颜色缓冲的所有通道 gl.colorMask(false, false, false, fa

OpenGL ES 中的模板测试

模板测试的主要功能是丢弃一部分片元,相对于深度检测来说,模板测试提出的片元数量相对较少.模板测试发生在剪裁测试之后,深度测试之前. 使用模板测试时很重要的代码提示: 1.glClear( GL_STENCIL_BUFFER_BIT); //启用模板测试 2.glEnable(GL_STENCIL_TEST); 大多数情况你的模板遮罩(stencil mask)写为0x00或0xFF就行. // 0xFF == 0b11111111,此时,模板值与它进行按位与运算结果是模板值,模板缓冲可写 glS

WebGL自学教程——WebGL演示样本：开始

最终开始WebGL样品演示,...... 开始使用WebGL步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的函数,參考<OpenGL ES 2.0编程指南>和各种已有的WebGL演示,针对获得的WebGL渲染环境进行操作,表达出你的意境. 为了获得WebGL的渲染环境.或者说,为了给WebGL一个渲染环境.我们须要在Web页面中定义一个名称为"canvas "的HTML5元素. 每一

WebGL自学教程——WebGL演示样例：開始

最终開始WebGL的演示样例了,...... 開始使用WebGL的步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的函数,參考<OpenGL ES 2.0编程指南>和各种已有的WebGL演示,针对获得的WebGL渲染环境进行操作,表达出你的意境. 为了获得WebGL的渲染环境,或者说,为了给WebGL一个渲染环境,我们须要在Web页面中定义一个名称为"canvas "的HTML5元素.

OpenGL-----深度测试，剪裁测试、Alpha测试和模板测试

片断测试其实就是测试每一个像素,只有通过测试的像素才会被绘制,没有通过测试的像素则不进行绘制.OpenGL提供了多种测试操作,利用这些操作可以实现一些特殊的效果.我们在前面的课程中,曾经提到了“深度测试”的概念,它在绘制三维场景的时候特别有用.在不使用深度测试的时候,如果我们先绘制一个距离较近的物体,再绘制距离较远的物体,则距离远的物体因为后绘制,会把距离近的物体覆盖掉,这样的效果并不是我们所希望的.如果使用了深度测试,则情况就会有所不同:每当一个像素被绘制,OpenGL就记录这个像素的“深度”

Unity发布WebGL时如何修改默认的载入进度条

Unity发布WebGL版本后,需要去除Unity的Logo,首先关闭Splash Image去除Made with Unity启动画面(在File->Build Settings->Player Settings->Splash Image->Show Splash Screen(只有专业版能关闭)) 结果发现网页初始载入时会默认出现一个载入进度条,这里还是有一个Unity的Logo,需要去掉它首先猜想这个是不是和Splash Image有关,但在Splash Image中

[UnityShader基础]05.模板测试

参考链接: https://blog.csdn.net/u011047171/article/details/46928463 https://blog.csdn.net/JohnBlu/article/details/83539427 模板测试和深度测试很相似: 1.如果模板测试不通过,则该像素会被舍弃 2.有模板缓冲区,每像素对应存放一个8位整数(0-255) 3.模板测试也是一个比较值的过程,将参考值和模板缓冲的值进行比较当然也有很不同的地方: 1.即使模板测试不通过,仍然可以修改模板缓

OpenGL核心技术之帧缓冲

笔者介绍:姜雪伟.IT公司技术合伙人,IT高级讲师.CSDN社区专家.特邀编辑.畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术具体解释>电子工业出版社等. CSDN视频网址:http://edu.csdn.net/lecturer/144 本篇博文主要是给读者解密关于游戏后处理渲染效果的原理,后处理渲染效果在Unity,UE4虚幻引擎等商业引擎使用的许多. 比方Bloom,Blur.SSAO.PSSM.HDR等等

OpenGL（十四）模板测试

启用模板测试时,OpenGL会在内存中开辟一块空间作为模板缓冲区,里边保存了每个像素的"模板值",模板测试的过程就是把每一个像素的模板值与一个设定的模板参考值进行比较,符合设定条件的通过测试,不符合条件的则不会绘制. glClearStencil函数用来指定模板值复位后的初始值,跟使用glClearColor函数指定复位后画板的颜色一样. glStencilFunc函数用来设置模板测试条件.第一个是模板测试条件,第二个是指定的当前模板的测试值,程序会使用改值与参考模板值进行比较,第三个

Unity Shader之模板测试

Unity Shader之模板测试一沙一世界,一花一天堂一.Stencil testing 渲染管线当片段着色器处理完一个片段之后,模板测试(Stencil Test)会开始执行,和深度测试一样,它也可能会丢弃片段.接下来,被保留的片段会进入深度测试,它可能会丢弃更多的片段.模板测试是根据又一个缓冲来进行的,它叫做模板缓冲(Stencil Buffer),我们可以在渲染的时候更新它来获得一些很有意思的效果. 一个模板缓冲中,(通常)每个模板值(Stencil Value)是

Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十一章：模板测试

原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十一章:模板测试代码工程地址: https://github.com/jiabaodan/Direct12BookReadingNotes 模板缓冲(stencil buffer)状态是通过配置一个D3D12_DEPTH_STENCIL_DESC实例,并且赋值到PSO中的D3D12_GRAPHICS_PIPELINE_STATE_DESC::DepthStenci

Ogre Compositor解析

Compositor脚本与类型我们先看下面一张基本的Compositor的脚本图: 上面就是一个Composition资源.在解析时,主要是使用CompositionPass, CompositionTargetPass, CompositionTechnique, Compositor,而在渲染时,使用RenderSystemOperation, TargetOperation, CompositorInstance, CompositionChain.管理Composition用Compo

WebGL-3D地图大俯仰角的雾化处理

腾讯位置服务Javascript API GL版,是基于WebGL技术打造的地图API库,使得浏览器环境下也可实现APP端的应用体验,提供2D/3D模式,运行流畅.当前版本提供地图展示.标记.信息窗口.折线.多边形.3D棱柱(多边形拔起).自定义栅格图等等多种功能,可满足绝大多数应用需要,更有丰富能力研发中,敬请期待! 以下内容转载自掘金文章<WebGL-3D地图大俯仰角的雾化处理> 作者:多多洛爱学习链接:https://juejin.im/post/5db2a58a51882559ee62

canvas绘制图像轮廓效果

在2d图形可视化开发中,经常要绘制对象的选中效果. 一般来说,表达对象选中可以使用边框,轮廓或者发光的效果. 发光的效果,可以使用canvas的阴影功能,比较容易实现,此处不在赘述. 绘制边框绘制边框是最容易实现的效果,比如下面的图片要绘制边框,只需要使用strokeRect的方式即可.效果如下图所示: 这个代码也很简单,如下所示: ctx1.strokeStyle = "red"; ctx1.lineWidth = 2; ctx1.drawImage(img, 1, 1,img

webgl 模板缓冲

热门专题