Estoy tratando de hacer un cuadro 3D con un patrón en cada lado usando el siguiente código, pero cuando se ve desde ciertos ángulos, las caras traseras desaparecen cuando se mira a través de las partes transparentes de las caras delanteras. También me preguntaba si es posible tener un patrón diferente en cada cara. ¡Muchas gracias de antemano!
let r = 10 let a = 0 let c = 20 let angle = 0 let art function setup() { createCanvas(windowWidth, windowHeight, WEBGL); art = createGraphics(800, 800) } function draw() { background(0); let x = r + c * cos(a) let y = r + c * sin(a) art.fill(r, a, c) art.ellipse(x + 400, y + 400, 10, 10) c += 0.2 a += 1.8 push() texture(art) rotateX(angle) rotateY(angle) rotateZ(angle) box(400) angle += 0.0003 pop() orbitControl(); } html, body { margin: 0; overflow: hidden; } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Esto sucede porque en WebGL, una vez que se dibuja un píxel, independientemente del nivel de transparencia de ese píxel, si otro triángulo dibujara ese mismo píxel, pero con mayor profundidad, se descarta (creo que la información alfa del(los) píxel(es) original(es) puede que ya no esté disponible). Para que la transparencia funcione correctamente en WebGL, es necesario dibujar todos los triángulos en orden de profundidad (primero los más alejados de la cámara). E incluso entonces, si dos triángulos se cruzan, seguirá habiendo problemas.
En tu caso, como tienes muchos píxeles que son completamente transparentes y otros que son completamente opacos, hay otra solución: un fragment shader personalizado que descarta píxeles si la textura alfa está por debajo de algún umbral.
const vert = ` uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; attribute vec3 aPosition; attribute vec2 aTexCoord; varying vec2 vTexCoord; void main() { vTexCoord = aTexCoord; vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0); gl_Position = uProjectionMatrix * viewModelPosition; }`; const frag = ` precision mediump float; // ranges from 0..1 varying vec2 vTexCoord; uniform sampler2D uSampler; void main() { vec4 tex = texture2D(uSampler, vTexCoord); if (tex.a < 0.05) { discard; } gl_FragColor = tex; }`; let r = 10 let a = 0 let c = 20 let angle = 0 let art let discardShader; function setup() { createCanvas(windowWidth, windowHeight, WEBGL); art = createGraphics(800, 800) discardShader = createShader(vert, frag) textureMode(NORMAL) } function draw() { background(0); let x = r + c * cos(a) let y = r + c * sin(a) art.fill(r, a, c) art.ellipse(x + 400, y + 400, 10, 10) c += 0.2 a += 1.8 push() noStroke() texture(art) shader(discardShader) rotateX(angle) rotateY(angle) rotateZ(angle) box(400) angle += 0.0003 pop() orbitControl(); } html, body { margin: 0; overflow: hidden; } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>Nota n.° 1: es importante que use p5.js v1.4.1 para que esto funcione porque antes había un error que impedía que los sombreadores del usuario trabajaran con texturas.
Nota n.º 2: si su textura tuviera una opacidad parcial, esto no funcionaría y, en su lugar, desearía renderizar cada plano del cuadro por separado y en el orden correcto (primero el más alejado de la cámara).