p5.js js resetShader()用法及代碼示例

p5.j​​s resetShader()方法在WEBGL模式下恢複默認著色器。在此方法之後運行的代碼將不受先前定義的著色器的影響。

用法:

resetShader(kindOfShader)

參數：它接受kindOfShader作為可選參數，它是一個整數，描述了著色器的類型(點，線或三角形)。

Returns Type:它的返回類型為void。

下麵的示例說明了p5.js中的resetShader()函數：

let m;
function preload() {
    // Load the shader definitions from files
    m = loadShader('shader.vert', 'shader.frag');
}
function setup() {
    createCanvas(100, 100, WEBGL);
    // Use the shader
    shader(m);
    noStroke();
    m.setUniform('p', [-0.74364388703, 0.13182590421]);
    resetShader();
}
  
function draw() {
    m.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
    quad(-1, -1, 1, -1, 1, 1, -1, 1);
}

shader.vert

precision highp float; varying vec2 vPos;
attribute vec3 aPosition;
void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }

shader.frag

precision highp float; varying vec2 vPos;
uniform vec2 p;
uniform float r;
const int I = 500;
void main() {
  vec2 c = p + vPos * r, z = c;
  float n = 0.0;
  for (int i = I; i > 0; i --) {
    if(z.x*z.x+z.y*z.y > 4.0) {
      n = float(i)/float(I);
      break;
    }
    z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;
  }
  gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);
}

輸出：

在注釋掉resetShader()方法時，將輸出以下內容。

參考：https://p5js.org/reference/#/p5/resetshader