xxxxxxxxxx
// See https://github.com/aferriss/p5jsShaderExamples/tree/gh-pages/6_3d/6-4_matcap
var fx,cam, camState = {
distance: 400,
center : [0, 0, 0],
rotation: [0.02, 0.28, -0.36, 0.889]
};
document.oncontextmenu = () => false;
function setup() {
createCanvas(800, 800, WEBGL);
cam=createEasyCam();
cam.setState(camState, 2000); // animate to camState on 1 second
cam.state_reset = camState; // state to use on reset
fx = createShader(`
attribute vec3 aPosition;
attribute vec2 aTexCoord;
attribute vec3 aNormal;
uniform mat4 uProjectionMatrix;
uniform mat4 uModelViewMatrix;
uniform mat4 uNormalMatrix;
varying vec3 vNormal;
varying vec3 vEye;
void main() {
vEye = normalize( vec3(uModelViewMatrix * vec4(aPosition, 1.0)));
vNormal = normalize((uModelViewMatrix * vec4(aNormal, 0.0)).xyz);
vec4 positionVec4 = vec4(aPosition, 1.0);
gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
}`, `
precision mediump float;
varying vec3 vNormal;
varying vec3 vEye;
uniform sampler2D uMatcapTexture;
vec2 matcap(vec3 eye, vec3 normal) {
vec3 reflected = reflect(eye, normal);
float m = 2.8284271247461903 * sqrt( reflected.z+1.0 );
return reflected.xy / m + 0.5;
}
void main() {
vec2 uv = matcap(vEye, vNormal) ;
vec4 color = texture2D(uMatcapTexture, uv);
gl_FragColor = color;
}`);
noStroke();
}
let matcap, b;
function preload(){
b = loadImage("https://raw.githubusercontent.com/nidorx/matcaps/master/1024/54584E_B1BAC5_818B91_A7ACA3.png");
// matcap = loadImage("https://raw.githubusercontent.com/nidorx/matcaps/master/512/54584E_B1BAC5_818B91_A7ACA3-512px.png");
matcap = loadImage("https://raw.githubusercontent.com/nidorx/matcaps/master/thumbnail/E6BF3C_5A4719_977726_FCFC82.jpg");
// matcap = loadImage("https://raw.githubusercontent.com/nidorx/matcaps/master/thumbnail/3B3C3F_DAD9D5_929290_ABACA8.jpg");
// matcap = loadImage("https://raw.githubusercontent.com/aferriss/p5jsShaderExamples/gh-pages/6_3d/6-4_matcap/matcap.png");
}
function draw() {
background(0);
//cam.beginHUD();push();translate(-160,-160);scale(1.1);image(b,0,0);pop();cam.endHUD();
shader(fx);
fx.setUniform("uMatcapTexture", matcap);
cylinder(width / 5, width / 20, 50, 24, true, true);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}