html5 - transparencia - poner texto transparente css

WebGL: ¿cómo hacer que una parte de un objeto sea transparente?

Question

Tengo una bola 3D en el navegador, ahora quiero cavar un agujero para ver su parte posterior.

¿Cómo puedo hacerlo posible?

Por ejemplo, quiero que la parte del triángulo blanco del cubo sea transparente (me refiero a que podríamos ver el fondo detrás del cubo).

Intenté cambiar el alfa en el sombreador de fragmentos (el área en el código es un cuadrado, no un triángulo, no importa):

<script id="shader-fs-alpha" type="x-shader/x-fragment">
    precision mediump float;

    varying vec4 vColor;

    uniform float uAlpha;

    void main(void) {
      if( gl_FragCoord.x < 350.0 && gl_FragCoord.x > 300.0
        && gl_FragCoord.y < 300.0 && gl_FragCoord.y > 230.0
        ) {
        gl_FragColor = vec4(0, 0 ,0, 0.0);
      } else {
        gl_FragColor = vec4(vColor.rgb, 1.0);
      }
    }
</script>

Esto realmente funciona, pero el área se vuelve blanca (no transparente), entonces intenté habilitar la mezcla, pero eso hace que todo el cubo sea transparente.

Así que ahora pensé que si había una manera de habilitar bleanding en fragment shader y podría deshabilitarlo en el bloque else .

Aquí está mi proyecto completo https://gist.github.com/royguo/5873503 :

• index.html: script Shader aquí.
• buffers.js: Todos obejcts aquí.
• shaders.js: sombreadores Init.

Answer 1

O elimine algunos triángulos de la malla de la pelota, o aplique textura a la misma que tenga partes transparentes, active la mezcla y desactive cualquier tipo de sacrificio, para que no pierda los triángulos orientados hacia atrás.

EDITAR:

Aquí hay un tutorial sobre la mezcla en webGL: http://learningwebgl.com/blog/?p=859 Tiene varios modos para elegir cómo se mezclarán dos píxeles, y ajustando los valores alfa puede tener todo lo que desee.

Finalmente, aplica textura que tiene alfa establecida en 1.0 en todas partes, excepto aquellas partes donde debería ser "hueca" y luego habilite la mezcla. Espero haber sido claro.

SUGERENCIA: en lugar de leer la documentación (que a veces puede ser más confusa que ayudar), intente esto http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.htm,. Enumera todas las funciones de una manera muy agradable.

Answer 2

Podrías representar una parte de la escena sin el objeto (o los objetos interiores) de una textura y luego proyectar la textura sobre una superficie frente al objeto. Solo asegúrese de que la superficie esté orientada directamente hacia la cámara (sea paralela al plano xy en el espacio de la cámara) y que la textura se represente con el mismo centro y perspectiva que la pantalla.

Utilice Learning WebGL: Rendering to Textures si necesita ayuda para hacerlo. También debe verificar las opciones de luz para asegurarse de que la superficie no se vea afectada por la iluminación que recibe su objeto.

También: hoja oficial de referencia de WebGL

Answer 3

Deberías usar el buffer de stencil. 2 pasos: uno, dibuja el triángulo en la galería de símbolos. Dos, dibuja el cubo con la prueba del esténcil.

// you can use this code multiple time without clearing stencil
// just increment mask_id
mask_id = 1;

// allow to draw inside or outside mask
invert_mask = false;

1) Activa el buffer de esténcil. Configúrelo: sin pruebas y escriba el valor de mask_id

glEnable(GL_STENCIL_TEST);
glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);
glStencilFunc(GL_ALWAYS, mask_id, 0);

2) Eliminar la escritura de color y profundidad

glDepthMask(GL_FALSE);
glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE);

3) aquí dibuja tu triángulo :)

4) Escritura habilitada de profundidad y color para el cubo

glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE);
glDepthMask(GL_TRUE);

5) Configurar stencil para el cubo: sin escribir y probar el valor de la plantilla

glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP);
glStencilFunc(invert_mask ? GL_NOTEQUAL : GL_EQUAL, mask_id, 0xff);

6) aquí dibuja tu cubo :)

7) limpieza: eliminar la prueba del esténcil

glDisable(GL_STENCIL_TEST);

No olvides solicitar una plantilla cuando crees tu contexto opengl (ver WebGLContextAttributes, segundo parámetro de getContext)

Este código funciona bien con Opengl ES 2 en la plataforma Ios. No dependía de ninguna extensión. WebGL usa la misma API.

El único pequeño defecto: no msaa en los bordes del triángulo. No hay almuerzo gratis :)

Answer 4

intente agregar estas líneas

glEnable (GL_BLEND);                                                              
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

Me funcionó con OpenGL ES.