¶ÔʵÏÖ¶¯»µÄÇ°¶ËͬѧÃÇÀ´Ëµ£¬canvas
¿ÉÒÔ˵ÊÇ×î×ÔÓÉ£¬×îÄÜÈ«Ãæ¿ØÖƵÄÒ»¸ö¶¯»ÊµÏÖÔØÌå¡£²»µ«ÄÜͨ¹ýjavascript
¿ØÖƵ㡢Ïß¡¢ÃæµÄ»æÖÆ£¬Ê¹ÓÃͼƬ×ÊÔ´Ìî³ä£»»¹ÄܸıäÊäÈë²ÎÊý×÷³ö½»»¥¶¯»£¬ÍêÈ«¿ØÖƶ¯»¹ý³ÌÖеĶ¯×÷¹ì¼£¡¢Ëٶȡ¢µ¯ÐÔµÈÒªËØ¡£
µ«Ê¹ÓÃcanvas
¿ª·¢¹ý½Ï¸´ÔÓÒ»µãµÄ¶¯»µÄͬѧ£¬¿ÉÄܻᷢÏÖ£¬ÍêȫʹÓÃjavascript
»æÖÆ¡¢¿ØÖƵĶ¯»£¬Ä³Ð©Ð§¹û²»Ì«ºÃʵÏÖ£¨ÕâƪÎÄÕÂÖ»ÌÖÂÛ2D£©£¬ÏñÄ£ºý£¬¹âÕÕ£¬Ë®µÎµÈЧ¹û¡£ËäÈ»ÓÃÖðÏñËØ´¦ÀíµÄ·½·¨Ò²¿ÉÒÔʵÏÖ£¬µ«javascript
¶ÔÕâÀàÐÍ´óÁ¿Êý¾ÝµÄ¼ÆËã²¢²»É󤣬ʵÏÖ³öÀ´Ã¿Ò»Ö¡»æÖƵÄʱ¼äÊ®·Ö¸ÐÈË£¬ÓÃËûʵÏÖ¶¯»²¢²»ÏÖʵ¡£
µ«canvas
³ýÁË×î³£ÓõÄjavascript
API»æÖÆ·½Ê½£¨getContext('2d')
£©£¬»¹ÓÐWebGLµÄ·½Ê½£¨getContext(webgl)
£©£¬¶ÔÇ°Ãæ˵µ½µÄ´óÁ¿Êý¾Ý¼ÆËãµÄ³¡¾°£¬¿ÉÒÔ˵ÊÇ×îÊʺϷ¢»ÓµÄµØ·½¡£WebGL¶ÔºÜ¶àͬѧÀ´Ëµ¾ÍÊÇʵÏÖ3D³¡¾°µÄ£¬Æäʵ¶Ô2D»æͼÀ´Ëµ£¬Ò²ÓкܴóµÄ·¢»Ó³¡¾°¡£
ÎÒÃÇÀ´¿´¿´javascript
API»æÖƺÍwebGL»æÖÆÔÀíÉϵIJ»Í¬Ö®´¦£º
Èç¹ûʹÓÃjavascript
¶Ô»²¼µÄÖð¸öÏñËؽøÐд¦Àí£¬ÄÇÕⲿ·Ö´¦Àí¹¤×÷¾ÍÐèÒªÔÚjavascript
µÄÔËÐл·¾³Àï½øÐУ¬ÎÒÃÇÖªµÀjavascript
µÄÖ´ÐÐÊǵ¥Ï̵߳ģ¬ËùÒÔÖ»ÄÜÖð¸öÖð¸öÏñËؽøÐмÆËãºÍ»æÖÆ¡£¾ÍÏñÒ»¸öϸ³¤µÄ©¶·£¬Ò»µÎÒ»µÎË®µÄÍùÏ©¡£
¶øWebGLµÄ´¦Àí·½Ê½£¬ÊÇÓÃGPUÇý¶¯µÄ£¬¶Ôÿһ¸öÏñËصĴ¦Àí£¬¶¼ÊÇÔÚGPUÉÏÖ´ÐУ¬¶øGPUÓÐÐí¶àäÖȾ¹ÜµÀ£¬ÕâЩ´¦Àí¿ÉÒÔÔÚÕâЩ¹ÜµÀÖв¢ÐÐÖ´ÐУ¬Õâ¾ÍÊÇWebGLÉó¤ÕâÖÖ´óÁ¿Êý¾Ý¼ÆË㳡¾°µÄÔÒò¡£
WebGLËäÈ»ÓÐÉÏÃæ˵µÄÓŵ㣬µ«Ò²ÓиöÖÂÃüµÄȱµã£º²»ºÃѧ£¬ÏëÒª¼òµ¥»¸ùÏßÒ²Òª·ÑÒ»·¬Á¦Æø¡£
GPU²¢ÐйܵÀÖ®¼äÊDz»ÖªµÀÁíÒ»¸ö¹ÜµÀÊä³öµÄÊÇʲô£¬Ö»ÖªµÀ×Ô¼º¹ÜµÀµÄÊäÈëºÍÐèÒªÖ´ÐеijÌÐò£»¶øÇÒ²»±£Áô״̬£¬¹ÜµÀ×Ô¼º²¢²»ÖªµÀÔÚÕâ´ÎÈÎÎñ֮ǰִÐйýʲô³ÌÐò£¬ÓÐʲôÊäÈëÊä³öÖµ£¬ÀàËÆÏÖÔÚ´¿º¯ÊýµÄ¸ÅÄî¡£ÕâЩ¹ÛÄîÉϵIJ»Í¬¾ÍÌáÉýÁËʹÓÃWebGL»æͼµÄÃż÷¡£
ÁíÍâÕâЩÅÜÔÚGPUÀïµÄ³ÌÐò²»ÊÇjavascript
£¬ÊÇÒ»ÖÖÀàCÓïÑÔ£¬ÕâÒ²ÐèҪǰ¶ËͬѧÃÇÁíÍâÔÙѧϰ¡£
ÄÇÃż÷ÔÙ¸ßÒ²×ÜÓÐÐèÒª¿ç¹ýÈ¥µÄÒ»ÌìµÄ£¬ÏÂÃæÒ»²½Ò»²½¿ØÖÆWebGLÈ¥»
Ò»µãͼ°¸£¬´ó¼ÒÒ²¿ÉÒÔÌå»áһϣ¬ÊʺÏÔÚʲôʱºòʹÓÃÕâÒ»Ãż¼Êõ¡£
Ϊ¾¡¿ì½øÈëGLSL×ÅÉ«Æ÷µÄ½×¶Î£¬ÕâÀï»ù´¡WebGL»·¾³´î½¨ÓÃÁËThree.js
£¬´ó¼Ò¿ÉÒÔÑо¿ÏÂÕâ¸ö»ù´¡»·¾³µÄ´î½¨£¬²»ÓõÚÈý·½¿âÆäʵҲÓò»Á˶àÉÙ´úÂëÁ¿¡£
ÒÔÏÂÊÇ»ù´¡»·¾³µÄ´î½¨:
function init(canvas) {
const renderer = new THREE.WebGLRenderer({canvas});
renderer.autoClearColor = false;
const camera = new THREE.OrthographicCamera(
-1, // left
1, // right
1, // top
-1, // bottom
-1, // near,
1, // far
);
const scene = new THREE.Scene();
const plane = new THREE.PlaneGeometry(2, 2);
const fragmentShader = '............'
const uniforms = {
u_resolution: { value: new THREE.Vector2(canvas.width, canvas.height) },
u_time: { value: 0 }
};
const material = new THREE.ShaderMaterial({
fragmentShader,
uniforms,
});
scene.add(new THREE.Mesh(plane, material));
function render() {
material.uniforms.u_time.value++;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render()
}
½âÊÍÒ»ÏÂÉÏÃæÕâ¶Î´úÂë×öÁËʲô£º´´½¨ÁËÒ»¸ö3D³¡¾°£¨ËµºÃµÄ2DÄØ£¿£©£¬°ÑÒ»¸ö¾ØÐÎƽÃæºýÔÚÉãÏñ»úÇ°Ã棬ռÂúÉãÏñ»úÊÓ¾õ·¶Î§£¬¾ÍÏñ¿´IMAX×ø×îÇ°ÅÅ£¬ÄãÄÜ¿´µ½µÄ¾ÍÖ»ÓÐÃæÇ°µÄÆÁÄ»µÄ¸Ð¾õ£¬ÆÁÄ»ÉϵĻÃæ¾ÍÊÇÄãµÄÕû¸öÊÀ½ç¡£ÎÒÃǵĻæͼ¾ÍÔÚÕâ¸öÆÁÄ»ÉÏ¡£
ÔÙ˵Ã÷һϣ¬×ÅÉ«Æ÷·ÖΪ¶¥µã×ÅÉ«Æ÷VERTEX_SHADER
ºÍƬ¶Î×ÅÉ«Æ÷FRAGMENT_SHADER
¡£
¶¥µã×ÅÉ«Æ÷¶Ô3D³¡¾°ÀïÎïÌåµÄÿ¸ö¶¥µã¼ÆËãÖµ£¬ÈçÑÕÉ«¡¢·¨ÏßÏòÁ¿µÈ£¬ÔÚÕâÀïÎÒÃÇÖ»ÌÖÂÛ2D»Ã棬¶¥µã×ÅÉ«Æ÷µÄ²¿·Ö¾ÍÓÉThree.js
´úÀÍÁË£¬ÊµÏÖµÄ×÷ÓþÍÊǹ̶¨Á˳¡¾°ÖоµÍ·ºÍÆÁÄ»µÄλÖá£
¶øƬ¶Î×ÅÉ«Æ÷µÄ×÷ÓþÍÊǼÆËãƽÃæÉÏÿһ¸öƬ¶Î£¨ÔÚÕâÀïÊÇÆÁÄ»ÉÏÿһ¸öÏñËØ£©Êä³öµÄÑÕÉ«Öµ£¬Ò²ÊÇÕâƪÎÄÕÂÑо¿µÄ¶ÔÏó¡£
Ƭ¶Î×ÅÉ«Æ÷Èë²ÎÓÐvarying
ºÍuniform
Á½ÖÖ£¬varying
¼òµ¥ËµÒ»ÏÂÊÇÓɶ¥µã×ÅÉ«Æ÷´«ÈëµÄ£¬Ã¿¸öƬ¶ÎÊäÈëµÄÖµÓÉÏà¹ØµÄ¶¥µãÏßÐÔ²åÖµµÃµ½£¬ËùÒÔÿ¸öƬ¶ÎÉϵÄÖµ²»Ò»Ñù£¬±¾ÎÄÏȲ»ÌÖÂÛÕⲿ·Ö£¨²»È»Ð´²»ÍêÁË£©¡£uniform
ÊÇͳһֵ£¬ÓÉ×ÅÉ«Æ÷Íⲿ´«È룬ÿ¸öƬ¶ÎµÃµ½µÄÖµÊÇÒ»ÑùµÄ£¬ÔÚÕâÀï¾ÍÊÇÎÒÃÇ´Ójavascript
ÊäÈë±äÁ¿µÄÈë¿Ú¡£ÉÏÃæµÄ´úÂëÎÒÃǾÍΪƬ¶Î×ÅÉ«Æ÷´«ÈëÁËu_resolution
£¬°üº¬»²¼µÄ¿í¸ßÖµ¡£
fragmentShader
Ϊ×ÅÉ«Æ÷µÄ³ÌÐò´úÂ룬һ°ãµÄ¹¹³ÉΪ:
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
ÔÚÇ°3Ðмì²éÁËÊÇ·ñ¶¨ÒåÁËGL_ES
£¬Õâͨ³£ÔÚÒƶ¯¶Ë»òä¯ÀÀÆ÷Ï»ᶨÒ壬µÚ2ÐÐÖ¸¶¨Á˸¡µãÊýfloat
µÄ¾«¶ÈΪÖеȣ¬Ò²¿ÉÒÔÖ¸¶¨ÎªµÍ¾«¶Èlowp
»ò¸ß¾«¶Èhighp
£¬¾«¶ÈÔ½µÍÖ´ÐÐËÙ¶ÈÔ½¿ì£¬µ«ÖÊÁ¿»á½µµÍ¡£ÖµµÃÒ»ÌáµÄÊÇ£¬Í¬ÑùµÄÉèÖÃÔÚ²»Í¬µÄÖ´Ðл·¾³Ï¿ÉÄÜ»á±íÏÖ²»Ò»Ñù£¬ÀýÈçijЩÒƶ¯¶ËµÄä¯ÀÀÆ÷»·¾³£¬ÐèÒªÖ¸¶¨Îª¸ß¾«¶È²ÅÄÜ»ñµÃºÍPC¶Ëä¯ÀÀÆ÷ÀïÖеȾ«¶ÈÒ»ÑùµÄ±íÏÖ¡£
µÚ5ÐÐÖ¸¶¨ÁË×ÅÉ«Æ÷¿ÉÒÔ½ÓÊÕÄÄЩÈë²Î£¬ÕâÀï¾ÍÖ»ÓÐÒ»¸öÈë²Î£ºÀàÐÍΪvec2µÄu_resolution
¡£
×îºó3ÐÐÃèÊöÁË×ÅÉ«Æ÷µÄÖ÷³ÌÐò£¬ÆäÖпÉÒÔ¶ÔÈë²ÎºÍÆäËûÐÅÏ¢×÷´¦Àí£¬×îºóÊä³öÑÕÉ«µ½gl_FragColor
£¬´ú±íÕâ¸öƬ¶ÎÏÔʾµÄÑÕÉ«£¬ÆäÖÐ4¸öÊýÖµ´ú±íRGBA
£¨ºì¡¢ÂÌ¡¢À¶¡¢Í¸Ã÷¶È£©£¬ÊýÖµ·¶Î§Îª0.0 ~ 1.0
¡£
ΪʲôҪд0.0
¶ø²»ÊÇ0
ÄØ£¬ÒòΪGLSL
Àï²»Ïñjavascript
Êý×ÖÖ»ÓÐÒ»¸öÀàÐÍ£¬¶øÊÇ·Ö³ÉÕûÐÎ(int
)ºÍ¸¡µãÊý(float
)£¬¶ø¸¡µãÊý±ØÐë°üº¬Ð¡Êýµã£¬µ±Ð¡ÊýµãÇ°ÊÇ0µÄʱºò£¬Ð´³É.0
Ò²¿ÉÒÔ¡£
ÄÇ´ó¼Ò¿´ÍêÕâ¶Î½â˵£¬Ó¦¸ÃÄܲµ½ÉÏÃæµÄ×ÅÉ«Æ÷»áÊä³öʲô°É£¬¶Ô£¬¾ÍÊÇÈ«ÆÁµÄºìÉ«¡£
Õâ¾ÍÊÇ×î»ù´¡µÄƬ¶Î×ÅÉ«Æ÷¡£
´ó¼ÒÓ¦¸Ã×¢Òâµ½ÉÏÃæµÄÀý×ÓûÓÐÓõ½´«ÈëµÄuniformÖµ£¬ÏÂÃæÀ´ËµÒ»ÏÂÕâЩֵÔõôÓá£
¿´Ö®Ç°´î½¨»ù´¡»·¾³µÄjavascript
´úÂë¿ÉÒÔ¿´µ½£¬u_resolution
´æ´¢ÁË»²¼µÄ¿í¸ß£¬Õâ¸öÖµÔÚ×ÅÉ«Æ÷ÓÐʲôÓÃÄØ£¿
ÕâҪ˵µ½Æ¬Ôª×ÅÉ«Æ÷µÄÁíÒ»¸öÄÚ½¨µÄÖµgl_FragCoord
£¬Õâ¸öÖµ´æ´¢µÄÊÇƬ¶Î£¨ÏñËØ£©µÄ×ù±êx
£¬y
Öµ£¬Ê¹ÓÃÕâÁ½¸öÖµ¾Í¿ÉÒÔÖªµÀµ±Ç°×ÅÉ«Æ÷¼ÆËãµÄÊÇ»²¼ÉÏÄĸöλÖõÄÑÕÉ«¡£¾Ù¸öÀý×Ó£º
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
void main() {
vec2 st = gl_FragCoord.xy / u_resolution;
gl_FragColor = vec4(st, 0.0, 1.0);
}
¿ÉÒÔ¿´µ½ÕâÑùµÄͼÏñ£º
ÉÏÃæµÄ×ÅÉ«Æ÷´úÂ룬ʹÓùéÒ»»¯ºóµÄx
¡¢y
×ù±êÊä³öµ½gl_FragColor
µÄºì¡¢ÂÌÉ«²¿·Ö¡£
´ÓͼÖпÉÒÔ¿´³ö£¬gl_FragCoord
µÄ(0, 0)
µãÔÚ×óϽǣ¬xÖáºÍyÖá·½Ïò·Ö±ðΪÏòÓÒºÍÏòÉÏ¡£
ÁíÒ»¸öuniformÖµu_time
¾ÍÊÇÒ»¸öËæ×Åʱ¼ä²»¶ÏÔö¼ÓµÄÖµ£¬ÀûÓÃÕâ¸öÖµ¿ÉÒÔʹͼÏñËæʱ¼ä±ä»¯£¬ÊµÏÖ¶¯»µÄЧ¹û¡£
ÉÏÃæµÄ×ÅÉ«Æ÷ÔÙ¸ÄдһÏ£º
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
void main() {
vec2 st = gl_FragCoord.xy / u_resolution;
gl_FragColor = vec4(st, sin(u_time / 100.0), 1.0);
}
¿ÉÒÔ¿´µ½ÏÂͼµÄЧ¹û£º
http://storage.360buyimg.com/element-video/QQ20210330-195823.mp4
×ÅÉ«Æ÷ÖÐʹÓÃÈý½Çº¯Êýsin
£¬ÔÚÑÕÉ«Êä³öµÄÀ¶É«Í¨µÀ×öÒ»¸ö´Ó0µ½1µÄÖÜÆڱ仯¡£
ÕÆÎÕ»ù±¾µÄÔÀíºó£¬¾ÍÊÇ¿ªÊ¼´Ó´óʦµÄ×÷Æ·ÖÐѧϰÁË¡£shadertoyÊÇÒ»¸öÀàËÆcodepenµÄ×ÅÉ«Æ÷playgroud£¬ÉÏÃæµÄ×ÅÉ«Æ÷¶¼ÊÇÀûÓÃÉÏÃæµÄ»ù±¾¹¤¾ß£¬»¹ÓÐһЩÔìÐͺ¯Êý£¬Ôì³ö¸÷ÖÖÑÛ»¨çÔÂÒµÄÌØЧ¡¢¶¯»¡£
»¶Ó¹Ø×¢°¼Í¹ÊµÑéÊÒ²©¿Í£ºaotu.io
»òÕß¹Ø×¢°¼Í¹ÊµÑéÊÒ¹«Öںţ¨AOTULabs£©£¬²»¶¨Ê±ÍÆËÍÎÄÕ¡£
±¾ÎÄѧϰµÄÄÚÈÝÖ÷ÒªÈçÏÂËùʾ£º 1.ä¯ÀÀÆ÷Ö§³Ö 2.ͼƬ 3.ÏìӦʽ¹¤¾ß 4.Óöµ½µÄÎÊÌâ ...
ÏÓDreamweaver×Ô´øµÄ°´Å¥²»ºÃ¿´£¿ÄǾÍ×Ô¼º×ö¸ö°´Å¥±³¾°°É£¡ Èí¼þÃû³Æ£º Adobe Dr...
¼ò½é£º Spring Cloud StreamÔÚ Spring Cloud ÌåϵÄÚÓÃÓÚ¹¹½¨¸ß¶È¿ÉÀ©Õ¹µÄ»ùÓÚÊÂ...
ΪɶдÕâƪÎÄÕ ×î½ü½ÓÁ˸öÐèÇó£¬ÒªÇ󳤰´Ä³¸ö±êÇ©ÏÔʾɾ³ýÒ»¸öÐü¸¡µÄɾ³ý°´Å¥¡£...
ÃÀ¹úYAHOOÔÚÒ³ÃæÖÆ×÷ÖÐËùÓõ½µÄͼƬÕûºÏ¼¼Êõ£¬ÕâÑù×öËäÈ»ÐèÒª»¨Ò»¶¨µÄʱ¼äÀ´Óйæ...
H5Ò³ÃæÔÚIOS¶Ë²âÊÔµÄʱºò·¢ÏÖ£¬µã»÷°´Å¥»áÉÁ¶¯£¬³öÏÖÒ»¸öºÚÉ«µÄ±³¾°Ò»ÉÁ¶ø¹ý£¬Ó°...
µÚÒ»¸ö֪ʶµã£º±íµ¥µÄÊôÐÔ¼°×Ü½á µÚ¶þ¸ö֪ʶµã£ºH5ÐÂÔöµÄ±íµ¥¿Ø¼þºÍÊôÐÔÒÔ¼°×ܽá...
ÔõÑù¾¡¿ÉÄܵÄËõ¶Ìä¯ÀÀÆ÷ÉÏÒ³ÃæäÖȾµÄʱ¼ä£¬ÎÄÕ´ÓÒÔϼ¸·½Ãæ×ÅÊÖ£º д³ö¸ßЧµÄcs...
Dreamweaver8ÈçºÎ½¨Á¢×Ô¼ºµÄÃüÁîÀ¸»ò½çÃæ·ç¸ñ£¬ÔÚʹÓùý³ÌÖÐÓÖÄÜ¿ìËÙµ÷ÓÃ×Ô¼ºµÄ...
¸´ÖÆ´úÂë ´úÂëÈçÏÂ: .sugLayerDiv{ position:relative; overflow:hidden; /*DIV ...