当前位置: 首页>>代码示例>>用法及示例精选>>正文


p5.js js loadShader()用法及代码示例

函数loadShader()从文件加载着色器,并将其作为p5着色器对象返回到变量中。文件扩展名可以是.glsl或.shader或.vertex。

应该从preload()内调用它loadShader()。

用法:

loadShader(vertFilename, fragFilename, [callback], [errorCallback])

参数

  • vertFilename:它是字符串类型,并且包含包含顶点着色器源代码的文件的路径。
  • fragFilename:它是字符串类型,它包含包含片段着色器源代码的文件的路径。
  • callback:它是在loadShader完成后执行的功能。成功后,将将Shader对象作为第一个参数传递。它是可选的。
  • errorCallback:这是在loadShader内部发生错误时执行的功能。如果有错误,则将错误作为第一个参数传递。它是可选的。

返回值:

从提供的顶点和片段着色器文件创建的着色器对象。

示例:此示例显示了如何使用着色器绘制正方形。

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;
}

直肠片段


<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);
}

输出:


参考:https://p5js.org/reference/#/p5/loadShader

相关用法

注:本文由纯净天空筛选整理自_sh_pallavi大神的英文原创作品 p5.js loadShader() Method。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。