ios - ¿Cómo obtener un efecto de sombreado "Glow" en OpenGL ES 2.0?

opengl-es glsl (2)

Estoy escribiendo una aplicación 3D para iOS. Soy nuevo en OpenGL ES 2.0, así que aún me estoy dedicando a escribir sombreadores básicos. Realmente necesito implementar un efecto "Brillar" en algunos de mis modelos, basado en la textura.

Aquí hay una muestra:

Estoy buscando ejemplos de código para OpenGL ES 2.0. La mayoría del código que encuentro en Internet es para escritorio OpenGL o D3D.

¿Algunas ideas?

El sitio web GLSL Sandbox tiene una colección de ejemplos de sombreadores. Este tiene el brillo y parece ser capaz de compilar para ES .

Deberías poder modificar esto para sacar el uv de tu textura.

Aquí hay un código directamente de este sitio:

#ifdef GL_ES precision mediump float; #endif #extension GL_OES_standard_derivatives : enable uniform float time; uniform vec2 mouse; uniform vec2 resolution; void main(void){ vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); vec3 color1 = vec3(0.0, 0.3, 0.5); vec3 color2 = vec3(0.5, 0.0, 0.3); float f = 0.0; float g = 0.0; float h = 0.0; float PI = 3.14159265; for(float i = 0.0; i < 40.0; i++){ if (floor(mouse.x * 41.0) < i) break; float s = sin(time + i * PI / 20.0) * 0.8; float c = cos(time + i * PI / 20.0) * 0.8; float d = abs(p.x + c); float e = abs(p.y + s); f += 0.001 / d; g += 0.001 / e; h += 0.00003 / (d * e); } gl_FragColor = vec4(f * color1 + g * color2 + vec3(h), 1.0); }

En primer lugar, hay toneladas de algoritmos y técnicas para generar un efecto de brillo. Solo quiero presentar una posibilidad.

Primero debes crear un Material que sea auto-luminoso. Para esto utilizo un modelo de luz blinn-phong modificado, en el cual la dirección hacia la fuente de luz es siempre la dirección inversa del vector normal del fragmento.

varying vec3 vertPos; varying vec3 vertNV; varying vec3 vertCol; uniform float u_glow; void main() { vec3 color = vertCol; float shininess = 10.0; vec3 normalV = normalize( vertNV ); vec3 eyeV = normalize( -vertPos ); vec3 halfV = normalize( eyeV + normalV ); float NdotH = max( 0.0, dot( normalV, halfV ) ); float glowFac = ( shininess + 2.0 ) * pow( NdotH, shininess ) / ( 2.0 * 3.14159265 ); fragColor = vec4( u_glow * (0.1 + color.rgb * glowFac * 0.5), 1.0 ); }

En un segundo paso, se ejecuta un algoritmo de desenfoque gaussiano en la salida. La escena se escribe en el búfer de cuadros con una textura vinculada al plano de color. Un pase de espacio de pantalla utiliza la textura como entrada para difuminar la salida.
Por motivos de rendimiento, el algoritmo de desenfoque se realiza primero a lo largo del eje X de la ventana gráfica y en un paso más a lo largo del eje Y de la ventana gráfica.
Una descripción detallada del algoritmo de borrosidad se puede encontrar en la respuesta a la pregunta OpenGL es 2.0 Gaussian blur on triangle .

varying vec2 vertPos; uniform sampler2D u_textureCol; uniform vec2 u_textureSize; uniform float u_sigma; uniform int u_width; float CalcGauss( float x, float sigma ) { float coeff = 1.0 / (2.0 * 3.14157 * sigma); float expon = -(x*x) / (2.0 * sigma); return (coeff*exp(expon)); } void main() { vec2 texC = vertPos.st * 0.5 + 0.5; vec4 texCol = texture( u_textureCol, texC ); vec4 gaussCol = vec4( texCol.rgb, 1.0 ); vec2 step = 1.0 / u_textureSize; for ( int i = 1; i <= u_width; ++ i ) { vec2 actStep = vec2( float(i) * step.x, 0.0 ); // this is for the X-axis // vec2 actStep = vec2( 0.0, float(i) * step.y ); this would be for the Y-axis float weight = CalcGauss( float(i) / float(u_width), u_sigma ); texCol = texture2D( u_textureCol, texC + actStep ); gaussCol += vec4( texCol.rgb * weight, weight ); texCol = texture2D( u_textureCol, texC - actStep ); gaussCol += vec4( texCol.rgb * weight, weight ); } gaussCol.rgb /= gaussCol.w; gl_FragColor = vec4( gaussCol.rgb, 1.0 ); }

Ver también las respuestas a la siguiente pregunta:

Consulte el siguiente ejemplo similar de WebGL que reúne todos los elementos:

html,body { height: 100%; width: 100%; margin: 0; overflow: hidden; } #gui { position : absolute; top : 0; left : 0; }