, webgl med three.js: shaders,,,,, 1,,,,,,,,, 21,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, 3d - grafik i browseren har været et emne af interesse siden dets indførelse.men hvis du var at skabe deres applikationer ved hjælp af en almindelig webgl, det vil tage evigheder.for nylig har nogle virkelig nyttige biblioteker har til rådighed.three.js er en af de mest populære, og i denne serie vil jeg vise dig, hvordan at gøre bedst mulig brug af det for at skabe bedøvelse 3d erfaringer til deres brugere. jeg forventer, du har en grundlæggende forståelse af 3d plads, før du begynder at læse denne lektion, som jeg vil ikke forklare ting som koordinater vektorer osv.,,,, et ord om shaders, hvis du ved allerede, hvad shaders er, du kan springe dette skridt.shaders grundlæggende programmer, skrevet i glsl (grafiske lag scripting sprog), der udføres på gpu.det er yderst nyttigt, så vi kan tage arbejde fra cpu 'en og sætte det på gpu at øge ydeevnen.der er to slags: vertex og opsplitte shaders.vertex shaders anvendes til at ændre strukturen i objekt (flytte toppunkter), og del shaders foretage ændringer på det, der er ved at blive udarbejdet, trin 1: vertex shader, vi begynder med enklere.det shader vil ændre placeringen af vektorer i maskestørrelse, som flytter ansigter.indsæt denne kodeks i < head >, din app:, < manuskript id = "cubevertexshader" type = "x-shader /x-vertex" > ensartede flyde tid; forskellige vec2 vuv; tomrum main() {vuv = uv -; vec3 nye standpunkt = holdning + normale * vec3 (synd (tid * 0, 2) * 3, 0); gl_position = projectionmatrix < jeg > modelviewmatrix < jeg > vec4 (nye standpunkt, 1, 0)} < /manuskript >,, type, attribut i manuskriptet ikke vil blive forstået af browseren, så vil det ikke få henrettet (vi vil videregive indholdet af three.js materiale senere).i de første to linjer, som vi skal definere to variabler.den første er en ensartet, flyde tid.uniformer er gået til både vertex og opsplitte shaders.dernæst er der forskellige, vec2 vuv,.varyings er grænsefladen mellem vertex og fragment shader.tid, vil holde gang i millisekunder, idet app blev påbegyndt, som vi vil bruge til at beregne nye stillinger i vertexes.i vuv, vil vi opbevarer uv (konsistens vektor) af hver toppunkt, så vi kan bruge den i stykke shader., så er der, ugyldige main(), erklæring.alle shaders skal have denne funktion.her er vi passerer uv - af vertex til vores, vuv, og beregningen af vertex nye holdning.endelig lægger vi den, gl_position,, som faktisk er placeringen af isse.men vi har også, at multiplicere den holdning beregnet tidligere af, projectionmatrix, og modelviewmatrix, to matricer, three.js forsyninger til os.det er nødvendigt, for hvis vi ikke gør det, gpu ikke vil overveje det sted, hvorfra vi ser på toppunkt.lad os gå videre til et shader.,, trin 2: fragment shader, og nu er det sted, hvor al magien sker.fragment shaders er ansvarlig for alle de smukke spil.det, vi skal bruge, er ganske enkel, så du skal ikke forvente at se en scene fra crysis 3 efter brug.indsæt følgende kode under din isse shader:, < manuskript id = "cubefragmentshader" type = "x-shader /x-fragment" > ensartede flyde tid; forskellige vec2 vuv; tomrum main() {vec2 holdning = - 1 + 2, 0 * vuv; flyde rødt = abs (synd (position. x * holdning. + tid /5, 0)); flydende grønne = abs (synd (position. x * holdning. y + /- 4,0) flyde blå = abs (synd (position. x * holdning. y + /- 3); gl_fragcolor = vec4 (røde, grønne, blå, 1, 0)} < /manuskript >, som du kan se på toppen af shader, der er vores to variabler igen.du er nødt til at huske på, at alle variabler i brug (undtagen dem fra tre. j 'er), skal fastlægges i hvert enkelt shader de anvendes i. i, ugyldige main(), funktion, vi beregner de farver baseret på tid og uv - af fragment (fragment shaders opererer på fragmenter, der er sammensat fra toppunkter, så værdien af varierende variabler er interpoleret i stykket shader).de er fri til at lege med tal og funktioner (husk, at farven værdier skal være positive). endelig sætter vi, gl_fragcolor, variable, der fastsætter fragment farve. hvis du åbner din browser, intet vil ændre sig, fordi vi er nødt til at ændre det materiale, af formålet med det formål shaders.,, trin 3: tre. shadermaterial, denne særlige materiale anvendes, når vi skal bruge shaders.lad os ændre materiale af den genstand, som vi er knyttet til vores model i den tidligere del af denne serie.først definere, uniformer, system, som vil blive anvendt til at passere variabler til shaders:, var uniformer = {: {art: "f" værdi 0}, beslutning: {art: "vi" værdi: nye three.vector2}, tekstur (type: "t" værdi: tre. imageutils. loadtexture (. /kasse. men heller ikke dér er menneskene sikre)}}, i, loader.load, definere, post, er væsentlig og bruge det:, var itemmaterial = nye tre. shadermaterial ({uniformer: uniformer, vertexshader: dokument. getelementbyid ('cubevertexshader '). innerhtml, fragmentshader: dokument. getelementbyid ('cubefragmentshader'). innerhtml}); punkt = nye tre. maske (nye tre. cubegeometry (100 - 10), itemmaterial), hvis du nu åbne browser, du skulle se det røde lys ændret sine farver:,,,, men der er ikkeved at ændre sig, og det er heller ikke en tegnefilm.for at ændre det, er vi nødt til at ajourføre, tid, variabel i shaders, hver gang et billede er trukket.gå til den, gøre, funktion og tilføje denne linje efter, ur. getdelta(), kalder:, uniforms.time.value + = delta * 10, hvis du åbner den browser, du burde se en flot animeret og farverige objekt,,,,, et ord om resultater, hvis vi skal skabe en sådan struktur virkning ved hjælp af f.eks. html5 lærred, processen vil tage for meget af cpu 'en er cykler, som lag' er.men alle shaders udføres på gpu, som er optimeret for alle operationer på grafik og fokuserer kun på dem.- grafiske og ikke - grafiske beregninger er nøglen til en god udførelse af app.,, hvis du ønsker at skabe noget virkeligt ved hjælp af webgl, lad mig forsikre dem om, at du skal flytte, så meget som muligt til gpu, at gøre din ansøgning glat og lydhør.,, konklusioner, som du kan se, ved hjælp af three.js giver os mulighed for at skabe 3d - grafik i browseren meget let, og resultaterne er faktisk ret godt.men det kan blive endnu bedre, tage et kig på disse eksempler fra tre. det er stedet:,, hyperlapse, tnt i to, med tilstrækkelig tid, en kreativ tankegang og three.js, du kan skabe en fantastisk apps som dem.jeg vil være mere end glad for at se dit three.js værker.tak fordi du læste.