webGl中实现clipplane

参考:调用glClipPlane()函数所执行的裁剪是在视觉坐标中完成的,而不是在裁剪坐标中进行的https://blog.csdn.net/shengwenj/article/details/51019299

使用framgentshader在webGl中实现裁剪

https://stackoverflow.com/questions/22628186/glclipplane-is-there-an-equivalent-in-webgl

Unfortunately in the OpenGL-ES specification against which WebGL has been specified there are no clip planes and the vertex shader stage lacks the gl_ClipDistance output, by which plane clipping is implemented in modern OpenGL.

However you can use the fragment shader to implement per-fragment clipping. In the fragment shader test the position of the incoming fragment against your set of clip planes and if the fragment does not pass the test discard it.

Update

Let's have a look at how clip planes are defined in fixed function pipeline OpenGL:

void ClipPlane( enum p, double eqn[4] );

The value of the first argument, p, is a symbolic constant,CLIP PLANEi, where i is an integer between 0 and n − 1, indicating one of n client-defined clip planes. eqn is an array of four double-precision floating-point values. These are the coefficients of a plane equation in object coordinates: p1, p2, p3, and p4 (in that order). The inverse of the current model-view matrix is applied to these coefficients, at the time they are specified, yielding

p' = (p'1, p'2, p'3, p'4) = (p1, p2, p3, p4) inv(M)

(where M is the current model-view matrix; the resulting plane equation is unde- fined if M is singular and may be inaccurate if M is poorly-conditioned) to obtain the plane equation coefficients in eye coordinates. All points with eye coordinates transpose( (x_e, y_e,z_e, w_e) ) that satisfy

(p'1, p'2, p'3, p'4)   x_e  ≥ 0
                      y_e 
                      z_e 
                      w_e 

lie in the half-space defined by the plane; points that do not satisfy this condition do not lie in the half-space.

So what you do is, you add uniforms by which you pass the clip plane parameters p' and add another out/in pair of variables between the vertex and fragment shader to pass the vertex eye space position. Then in the fragment shader the first thing you do is performing the clip plane equation test and if it doesn't pass you discard the fragment.

In the vertex shader

in  vec3 vertex_position;
out vec4 eyespace_pos;
 
uniform mat4 modelview;
 
void main()
{
    /* ... */
    eyespace_pos = modelview * vec4(vertex_position, 1);
    /* ... */
}

In the fragment shader

in vec4 eyespace_pos;
 
uniform vec4 clipplane;
 
void main()
{
    if( dot( eyespace_pos, clipplane) < 0 ) {
        discard;
    }
    /* ... */
}

webGl中实现clipplane的更多相关文章

  1. Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题

    Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致& ...

  2. WebGL中使用window.requestAnimationFrame创建主循环

    今天总结记录一下WebGL中主循环的创建和作用.我先说明什么是主循环,其实单纯的webgl不存在主循环这个概念,这个概念是由渲染引擎引入的,主循环就是利用一个死循环或无截止条件的递归达到定时刷新can ...

  3. 【GISER&&Painter】Chapter02:WebGL中的模型视图变换

    上一节我们提到了如何在一张画布上画一个简单几何图形,通过创建画布,获取WebGLRendering上下文,创建一个简单的着色器,然后将一些顶点数据绑定到gl的Buffer中,最后通过绑定buffer数 ...

  4. WebGL中的OpenGL着色器语言

    在webgl中,调用了OpenGL-ES-2.0的API,而在OpenGL-ES专为嵌入式设备设计,其和其它设备一样,都是使用GLSL(GL Shading Language)来编写片段程序并执行于G ...

  5. OpenGLES 与 WebGL 中顶点属性的组织格式的误解 - 一个不好笑的笑话

    版权声明:本文为博主原创文章,未经博主同意不得转载.转载联系 QQ 30952589.加好友请注明来意. https://blog.csdn.net/sleks/article/details/289 ...

  6. WebGL中图片多级处理(FrameBuffer)

    在webgl的使用过程中,我们通常会想对texture进行多级处理并对其贴在表面显示 如对较精准的边缘检测,要先后使用灰度shader.模糊shader.边缘shader来进行处理,而每次的处理对象则 ...

  7. WebGL中深度碰撞方法总结

    z-fighting问题是三维渲染中常见的问题,本文根据实际工作中遇到的一些场景,进行了系统的总结 一个实际工作中的问题 当两个面离得太近就会发生深度碰撞问题,比如: 遇到深度检测问题,最重要的是先搞 ...

  8. WebGL中添加天空盒的两种方法

    天空盒 的添加可以让模型所在的场景非常漂亮,而其原理也是非常简单的,相信看完下面代码就可以明白了. 说到天空盒的两种方法,倒不如说是两种写法,分别用了纹理加载的两个方法:loadTexture和loa ...

  9. 学废了系列 - WebGL与Node.js中的Buffer

    WebGL 和 Node.js 中都有 Buffer 的使用,简单对比记录一下两个完全不相干的领域中 Buffer 异同,加强记忆. Buffer 是用来存储二进制数据的「缓冲区」,其本身的定义和用途 ...

随机推荐

  1. 贝壳找房魔法师顾问[并查集+DAG判断]

    题目链接[https://nanti.jisuanke.com/t/27647] //计蒜客2018复赛D题,想简单了. 题解: 题目是中文的,不再赘述. 题解: 分为三种情况:1.两个字符串都不能变 ...

  2. 喵哈哈村的魔法考试 Round #6 (Div.3) 题解

    有任何问题 直接联系QQ:475517977 喵哈哈村的代码传说 第一章 冒泡排序 第一题就是排序嘛,在ACM/OI竞赛中,我只推崇一种排序方法,就是直接调用algorithm里面的sort函数. # ...

  3. Codeforces Round #281 (Div. 2) B. Vasya and Wrestling 水题

    B. Vasya and Wrestling 题目连接: http://codeforces.com/contest/493/problem/B Description Vasya has becom ...

  4. QThreadPool线程池的使用,线程与Widget通过信号与槽的方式通信。

    因为QRunnable类并非继承自QObject,不能使用信号和槽,为了能够使用信号与槽和Widget通信,需要对QRunnable进行封装. 定义一个类QMyRunnable,该类首先继承自QObj ...

  5. TCP状态知识总结(图解)

    tcp状态:   LISTEN:侦听来自远方的TCP端口的连接请求 SYN-SENT:再发送连接请求后等待匹配的连接请求 SYN-RECEIVED:再收到和发送一个连接请求后等待对方对连接请求的确认 ...

  6. BrowserLog——使用Chrome控制台作为Log查看器

    Chrome控制台是十分强大的,即使将它作为一个log查看器也是非常强大的,BrowserLog就是一个.net下的把Chrome作为log输出的程序包. 原理非常简单,server端将log数据通过 ...

  7. 玩android 遇到的问题-2014年1月15日

    1.变态的java工程,不是你点击run,它就run的.  eclipse 默认设置,你选择哪个文件,点击run的时候,就运行哪个文件.够变态不.那么,怎么设置点击run的时候,就运行整个工程呢? 你 ...

  8. C#编程(三十九)----------比较对象的相等性

    比较对象的相等性 需要理解对象相等的机制对逻辑表达式的编程很重要,另外,对实现运算符重载和类型强制转换也很重要. 对象相等的机制有所不同,这取决于比较的是引用类型还是值类型. 比较引用类型的相等性 S ...

  9. SpringMVC从Controller跳转到还有一个Controller

    1. 需求背景 需求:spring MVC框架controller间跳转,需重定向.有几种情况:不带參数跳转.带參数拼接url形式跳转,带參数不拼接參数跳转,页面也能显示. 本来以为挺简单的一件事情. ...

  10. Linux学习9-CentOS搭建nginx环境

    前言 之前我们搭建网站的时候,把war包放到tomcat下就能运行起来了,为什么部署上线的时候,又用到了nginx呢? nginx可以做多台服务器的负载均衡,当用户非常少的时候,可以用一台服务直接部署 ...