WebGL fragment shader opacity

Alex Weyland

Alright, first off, I'm pretty new at GLSL shaders, and I'm trying to wrap my head around the following shader

#ifdef GL_ES
    //precision mediump float;
    precision highp float;
    #endif

    uniform vec2 uTimes;

    varying vec2 texCoord;
    varying vec2 screenCoord;

    void main(void) {
        vec3 col;
        float c;
        vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
        c = exp(-pow(length(tmpv) * 1.8, 2.0));
        col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
        gl_FragColor = vec4(col * 0.5, 0);
    }

So far, I know it gives me a radial gradient (perhaps). What I'd really like to know is how to make it completely transparent. I'm thinking that I need a vec4 for that, right?

Abstract Algorithm

You need to turn on the blending.

See http://www.senchalabs.org/philogl/PhiloGL/examples/lessons/8/ and http://learningwebgl.com/blog/?p=859‎.

Without blending, depth and color buffers will be updated without taking care what was previously in the buffer, it will just overwrite data. With blending on, and depending on what type of blending function are you using, buffers will be updated with data that takes previsouly rendered data into a count.

This is the part that is interesting for you:

gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
gl.enable(gl.BLEND);
gl.disable(gl.DEPTH_TEST);

Hope this helps.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

WebGL fragment-shader for multiple light sources?

분류에서Dev

GLSL Shaders - Fragment shader not compiling

분류에서Dev

Manual selection lod of mipmaps in a fragment shader using three.js

분류에서Dev

Intel HD 4000 그래픽에서 컴파일되지 않는 OpenGL Fragment Shader

분류에서Dev

[Android] Fragment Shader가 Nexus 6에서만 내 애플리케이션을 다운

분류에서Dev

Fragment Shader IN 변수로 인해 아무것도 나타나지 않습니다.

분류에서Dev

GLSL Fragment Shader를 가능한 가장 낮은 버전으로 다운 그레이드 (최소 GLSL 3.3)

분류에서Dev

Metal의 Fragment Shader 내에서 struct 객체에 제대로 액세스 할 수 없습니까?

분류에서Dev

jQuery hover Opacity and Click Stay on Opacity

분류에서Dev

Change image opacity with transition

분류에서Dev

outofmemory on changing opacity of grid

분류에서Dev

Change opacity on hover

분류에서Dev

Border color opacity

분류에서Dev

Opacity in IsMouseOver WPF

분류에서Dev

Opacity Off on a:hover and a:visited

분류에서Dev

Opacity transitions in Chrome

분류에서Dev

Metal Indirect Command Buffer 사용시 오류 : "Fragment shader는 간접 명령 버퍼와 함께 사용할 수 없습니다."

분류에서Dev

Link on image, opacity hover on image

분류에서Dev

How to set opacity only for the parent?

분류에서Dev

Android Action Bar Icon Opacity

분류에서Dev

Overlay an image with an opacity setting in Ffmpeg

분류에서Dev

Highlighting an element in the menu by manipulating the opacity

분류에서Dev

Error in GLSL program - WebGL

분류에서Dev

WebGL rectangle borders

분류에서Dev

Saving Fragment State/Data from Fragment to Fragment

분류에서Dev

shader-school, vertex shader : 다양한 변수

분류에서Dev

OpenGL Geometry Extrusion with geometry Shader

분류에서Dev

z direction of a matrix in a GLSL shader

분류에서Dev

Can't apply shader to OBJ

Related 관련 기사

  1. 1

    WebGL fragment-shader for multiple light sources?

  2. 2

    GLSL Shaders - Fragment shader not compiling

  3. 3

    Manual selection lod of mipmaps in a fragment shader using three.js

  4. 4

    Intel HD 4000 그래픽에서 컴파일되지 않는 OpenGL Fragment Shader

  5. 5

    [Android] Fragment Shader가 Nexus 6에서만 내 애플리케이션을 다운

  6. 6

    Fragment Shader IN 변수로 인해 아무것도 나타나지 않습니다.

  7. 7

    GLSL Fragment Shader를 가능한 가장 낮은 버전으로 다운 그레이드 (최소 GLSL 3.3)

  8. 8

    Metal의 Fragment Shader 내에서 struct 객체에 제대로 액세스 할 수 없습니까?

  9. 9

    jQuery hover Opacity and Click Stay on Opacity

  10. 10

    Change image opacity with transition

  11. 11

    outofmemory on changing opacity of grid

  12. 12

    Change opacity on hover

  13. 13

    Border color opacity

  14. 14

    Opacity in IsMouseOver WPF

  15. 15

    Opacity Off on a:hover and a:visited

  16. 16

    Opacity transitions in Chrome

  17. 17

    Metal Indirect Command Buffer 사용시 오류 : "Fragment shader는 간접 명령 버퍼와 함께 사용할 수 없습니다."

  18. 18

    Link on image, opacity hover on image

  19. 19

    How to set opacity only for the parent?

  20. 20

    Android Action Bar Icon Opacity

  21. 21

    Overlay an image with an opacity setting in Ffmpeg

  22. 22

    Highlighting an element in the menu by manipulating the opacity

  23. 23

    Error in GLSL program - WebGL

  24. 24

    WebGL rectangle borders

  25. 25

    Saving Fragment State/Data from Fragment to Fragment

  26. 26

    shader-school, vertex shader : 다양한 변수

  27. 27

    OpenGL Geometry Extrusion with geometry Shader

  28. 28

    z direction of a matrix in a GLSL shader

  29. 29

    Can't apply shader to OBJ

뜨겁다태그

보관