The function loadShader() loads the shader from files and returns them as a p5 shader object in a variable. The file extension can be .glsl or .shader or .vertex.
It loadShader() should be called from within preload().
Syntax:
loadShader(vertFilename, fragFilename, [callback], [errorCallback])
Parameters:
- vertFilename : It is of string type, and it contains path to the file containing vertex shader source code.
- fragFilename : It is of string type, and it contains path to the file containing fragment shader source code.
- callback : It is a function which is executed after loadShader completes. On success, the Shader object is passed as the first argument. It is optional.
- errorCallback : It is a function which is executed when an error occurs inside loadShader. When there is error then the error is passed as the first argument. It is optional.
Returns :
A shader object that is created from the provided vertex and fragment shader files.
Example : This example shows how to draw a square with a shader.
Javascript
// this variable will hold our shader object let rectShader; function preload(){
rectShader = loadShader( 'base.vert' , 'rect.frag' );
} function setup() {
// shaders require WEBGL mode to work
createCanvas(400, 400, WEBGL);
noStroke();
} function draw() {
// shader() sets the active shader with our shader
shader(rectShader);
// lets send the time and resolution to our shader
rectShader.setUniform( 'resolution' , [width, height]);
rectShader.setUniform( 'time' , frameCount * 0.1);
// rect gives us some geometry on the screen
rect(0,0,width, height);
} function windowResized(){
resizeCanvas(windowWidth, windowHeight);
} |
base.vert
attribute vec3 aPosition; attribute vec2 aTexCoord; void main() { // Copy the position data into a vec4, using
// 1.0 as the w component
vec4 positionVec4 = vec4(aPosition, 1.0);
// scale the rect by two, and move it to the
// center of the screen if we don't do this,
// it will appear with its bottom left corner
// in the center of the sketch try commenting
// this line out to see what happens
positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
// Send the vertex information on to the fragment shader
gl_Position = positionVec4;
} |
rect.frag
<pre>precision mediump float; varying vec2 vTexCoord; // We need the sketch resolution to perform // some calculations uniform vec2 resolution; uniform float time; // This is a function that turns an rgb value // that goes from 0 - 255 into 0.0 - 1.0 vec3 rgb(float r, float g, float b){ return vec3(r / 255.0, g / 255.0, b / 255.0);
} // this is the function that draws our rect // it works just like rect in p5 except that // it takes an additional color parameter at the end vec3 rect (float x, float y, float w, float h, vec3 color){ // in this example we will use gl_FragCoord which is a
// variable that just gives us pixel position as whole
// numbers, just like in p5
vec2 coord = gl_FragCoord.xy;
// we reverse the coords because in webGL 0,0
// is at the bottom left
coord.y = resolution.y - coord.y;
// one way we could make a rect is by using
// an if statement, however if statements are
// considered to be slow inside of shaders
// instead we will use some math functions to calculate a rectangle
// mix takes three values i.e. mix(option1, option2, edge)
// option one will be chosen if edge equals zero
// option two will be chose if edge equals one
// the step function takes two arguments i.e. step(edge, val)
// step returns 0.0 if val is less than edge
// step returns 1.0 if val is greater than edge
// using these two functions combined we can section
// off parts of the screen into black and white
float width = 1.0 -mix(0.0, 1.0, step(x + w, coord.x));
float xPos = 1.0 -mix(0.0, 1.0, step(x, coord.x));
float height = 1.0 - mix(0.0, 1.0, step(y + h, coord.y));
float yPos = 1.0 - mix(0.0, 1.0, step(y, coord.y));
// create a color to use
vec3 col = rgb(color.r, color.g, color.b);
// calculate the final rectangle
// we will multiply the x values against the y values
// to produce our final rect as black and white
// the black and white mask is multiplied against our
// color and returned.
return col * ((height - yPos) * (width - xPos));
} void main() { // The width and height of our rectangle
float width = 200.0;
float height = 200.0;
// The center of the screen is just the
// resolution divided in half
vec2 center = resolution * 0.1;
// lets make our rect in the center of the screen.
// We have to subtract half of it's width and height
// just like in p5
float x = center.x - width*0.6;
float y = center.y - height*0.6;
// a color for the rect
vec3 pink = vec3(255.0,99.0, 71.0);
// a color for the bg
vec3 blue = rgb(0.0, 0.0, 255.0);
// lets add a sine wave to the x position so that
// it moves back and forth
x += sin(time) *100.0;
// call our rect function with the values we defined
vec3 r = rect(x, y, width, height, pink);
// now mix the rect with the background color
// anything that is black in r will become the bg
vec3 scene = mix(blue, r, r);
// out put the final image
gl_FragColor = vec4( scene ,4.0);
} |
Output:
Reference:https://p5js.org/reference/#/p5/loadShader