05 Los datos se convierten en vértices

Varias salidas en una cuadrícula de puntos

Empieza con puntos grises pequeños. Activa los interruptores uno a uno y observa qué cambian la posición, el tamaño, los datos y el color.

gl_Position · separarNo

gl_PointSize · puntos más grandesNo

varying · pasar un degradadoNo

gl_FragColor · añadir colorNo

Explicación

Arrastra los números subrayados a izquierda y derecha

gl_Position · posición

gl_Position = vec4(aPosition * , 1.0);

aPosition es la coordenada de entrada de cada punto.

gl_PointSize · tamaño

gl_PointSize = uPixelRatio * ;

uPixelRatio se adapta a la densidad de píxeles de la pantalla.

vTone · vértice → fragmento

vTone = 0.7;

aUv.x es la coordenada horizontal.

gl_FragColor · color

gl_FragColor = vec4(vec3(vTone), 1.0);

coral / menta: dos colores RGB.

Dos main: el de vértices calcula la posición; el de fragmentos, el color. Un varying transporta valores entre ambos.

Lado JS

Dos main: el de vértices devuelve posición y tamaño; el de fragmentos, color. Los varying transportan datos entre ambos.

Pruébalo