La función createShader() que carga los sombreadores de strings. es una llamada dentro de la configuración de la función. La forma más fácil de escribir sombreadores como strings en el código es probablemente usar la sintaxis de string de plantilla de javascripts.
Sintaxis:
createShader(vertSrc, fragSrc)
Parámetros:
vertSrc : Es de tipo String y es código fuente para el sombreador de vértices.
fragSrc : Es de tipo String y es código fuente para el fragment shader.
Devoluciones :
A shader object created from the provided vertex and fragment shaders.
Ejemplo :
Un shader para mostrar el color del atardecer.
Javascript
let theShader; function setup() { createCanvas(400, 400, WEBGL); background(0); noStroke(); // load vert/frag defined below theShader = createShader(vertShader, fragShader); } function draw() { theShader.setUniform('u_resolution', [width, height]); theShader.setUniform('u_time', frameCount*.01); // set + display shader shader(theShader); // apply shader rect(0, 0, 400, 400); } // the vertex shader is called for each vertex let vertShader = ` //standard vertex shader attribute vec3 aPosition; void main() { // Copy the position data into a vec4, adding 1.0 as the w parameter vec4 positionVec4 = vec4(aPosition, 1.0); // Scale to make the output fit the canvas positionVec4.xy = positionVec4.xy * 2.0 - 1.0; // Send the vertex information on to the fragment shader gl_Position = positionVec4; }`; // the fragment shader is called for each pixel let fragShader = ` #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; vec3 colorA = vec3(0.905,0.045,0.045); vec3 colorB = vec3(0.995,0.705,0.051); void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; float sinF = sin(u_time) * 0.5 + 0.5; vec3 colorTop = mix(colorA, colorB, sinF); vec3 colorBottom = mix(colorB, colorA, sinF); vec3 pct = vec3(st.y); vec3 color = vec3(0.0); color = mix(colorTop, colorBottom, pct); gl_FragColor = vec4(color,1); }`;
Salida :
Publicación traducida automáticamente
Artículo escrito por _sh_pallavi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA