使用GLSL着色器隐藏面 [英] Hide faces with GLSL shader

问题描述

我正在尝试使着色器与Three.js一起使用.这是WebGL的javascript库.我刚刚开始阅读GLSL，所以我遇到了一些麻烦.基本上，我想显示和隐藏几何图形的面.我已经克隆了几何图形的面阵列并对其进行了重新排序.重新排列的数组的面孔按我想显示/隐藏的顺序排列.我读过，可以从管道中的任何位置访问Uniforms.我可以只将数组声明为Uniform并从片段着色器访问它吗?我遇到了命令gl_FragColor，并用它来调整整个几何的不透明度.我当时在想，也许我可以使用gl_FragColor将特定面孔的不透明度设置为0.同时我也在查看规格并找到gl_SampleID. gl_SampleID会告诉我当前的面部编号吗?抱歉所有问题，但我仍在努力解决.如果有更好的事情去做，请告诉我.我一直在尝试调整现有的着色器，因为我喜欢它的纹理影响.这是一些示例代码.

I'm trying to wright a shader to work with three.js. Which is a javascript library for WebGL. I just started reading up on GLSL so there are some thing i'm having trouble with. Basically I want reveal and hide faces of a geometry. I have cloned my geometry's face array and reordered it. The reordered array has the faces in the order I would like to reveal/hide them. I have read that Uniforms can be access from anywhere within the pipeline. Can I just declare the array as a Uniform and access it from the fragment shader? I have run into the command gl_FragColor and used it to adjust the opacity of my entire geometry. I was thinking maybe I can use gl_FragColor to set the opacity of specific faces to 0. Also I was looking at the specs and found gl_SampleID. Will gl_SampleID tell me the current face number? Sorry for all the questions but I'm still trying to rap my head around things. If there's a better was to go about things please let me know. I have been trying to adjust an existing shader because I like it's texture affects. Here's some sample code.

        uniform float time;
        uniform vec2 resolution;

        uniform sampler2D texture1;
        uniform sampler2D texture2;

        varying vec2 vUv;

        uniform float alpha;
        uniform int face_Array;

        void main( void ) {

            vec2 position = -1.0 + 2.0 * vUv;

            vec4 noise = texture2D( texture1, vUv );
            vec2 T1 = vUv + vec2( 1.5, -1.5 ) * time  *0.02;
            vec2 T2 = vUv + vec2( -0.5, 2.0 ) * time * 0.01;

            T1.x += noise.x * 2.0;
            T1.y += noise.y * 2.0;
            T2.x -= noise.y * 0.2;
            T2.y += noise.z * 0.2;

            float p = texture2D( texture1, T1 * 2.0 ).a;

            vec4 color = texture2D( texture2, T2 * 2.0 );
            vec4 temp = color * ( vec4( p, p, p, p ) * 2.0 ) + ( color * color - 0.1 );

            if( temp.r > 1.0 ){ temp.bg += clamp( temp.r - 2.0, 0.0, 100.0 ); }
            if( temp.g > 1.0 ){ temp.rb += temp.g - 1.0; }
            if( temp.b > 1.0 ){ temp.rg += temp.b - 1.0; }

            gl_FragColor = vec4(temp.r, temp.g, temp.b, alpha);
        } 

推荐答案

通常，在WebGL中，您需要进行绘制调用，并且必须指定从何处开始绘制以及在每个调用中要绘制多少个顶点，它将很明显，您可以不绘制"几何图形的一部分，或将其拆分为多个绘制调用.

Usually in WebGL you'd make a draw call, and would have to specify where to start drawing and how many vertices to draw in every single call and it would be obvious that you can just "not draw" parts of your geometry, or split it into several draw calls.

在threejs中，它被抽象为一个名为 drawCalls 的属性. .如果您已经按照要隐藏几何的顺序对几何进行了排序，那么您要做的就是创建一个drawCall并随时间修改范围.如果未指定drawCalls，则threejs会渲染整个几何图形，因为多数情况下这可能是人们想要的.

In threejs this is abstracted away into a property called drawCalls. If you already sorted your geometry in the order you want to hide them all you have to do is to create a single drawCall and modify the range over time. If no drawCalls are specified threejs renders the whole geometry, as that's probably what people want in most cases.

(此属性显然仅对BufferGeometry存在，而对常规Geometry不存在，因此您可能需要对其进行转换.)

(edit: Also this property apparently only exists for BufferGeometry and not the regular Geometry, so you may need to convert it.)

这篇关于使用GLSL着色器隐藏面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！