مقدمة في الشيدرز

المفهوم

الشيدر برنامج يُنفذ على GPU لكل بكسل (fragment shader) أو رأس (vertex shader). في p5.js WEBGL، ننشئ شيدر بـ createShader(vert, frag). شيدر الشظايا يتلقى إحداثيات UV ويحسب لون كل بكسل بالتوازي.

الكود

// Simple gradient shader (WEBGL)
let sh;
const vert = `attribute vec3 aPosition; void main(){gl_Position=vec4(aPosition,1.0);}`;
const frag = `precision mediump float; uniform vec2 u_resolution; uniform float u_time;
void main(){vec2 uv=gl_FragCoord.xy/u_resolution; float c=0.5+0.5*sin(uv.x*6.28+u_time);
gl_FragColor=vec4(uv.x*0.2,c*0.9,c*0.77,1.0);}`;
function setup(){createCanvas(400,280,WEBGL);sh=createShader(vert,frag);}
function draw(){shader(sh);sh.setUniform('u_resolution',[width,height]);sh.setUniform('u_time',millis()/1000);rect(0,0,width,height);}

للمزيد

استكشف الدورات المجانية الأخرى على صفحة التعلم، أو احجز مكالمة لمناقشة مشروعك.