WebGLã¬ã³ããŒãã³ãã«ã®æé©åã«ãããé«åºŠãªãã¯ããã¯ãæ¢ããŸããã³ãã³ããããã¡ã®å¹çåã«çŠç¹ãåœãŠãããã©ãŒãã³ã¹ãåäžãããCPUãªãŒããŒããããåæžããæ¹æ³ãåŠã³ãŸãã
WebGLã¬ã³ããŒãã³ãã«ã®ã³ãã³ãæé©åïŒã³ãã³ããããã¡ã®å¹çåãå®çŸãã
ãŠã§ãã°ã©ãã£ãã¯ã¹APIãšããŠåºã䜿ãããŠããWebGLã¯ãéçºè ããã©ãŠã¶å ã§çŽæ¥ãé åçãª2Dããã³3Däœéšãåµåºããããšãå¯èœã«ããŸããã¢ããªã±ãŒã·ã§ã³ããŸããŸãè€éã«ãªãã«ã€ããŠãããã©ãŒãã³ã¹ã®æé©åãæãéèŠã«ãªããŸããæé©åã«ãããéèŠãªé åã®äžã€ããç¹ã«ã¬ã³ããŒãã³ãã«ã掻çšããå Žåã®WebGLã³ãã³ããããã¡ã®å¹ççãªäœ¿çšã§ãããã®èšäºã§ã¯ãWebGLã¬ã³ããŒãã³ãã«ã®ã³ãã³ãæé©åã®è€éããæãäžããã³ãã³ããããã¡ã®å¹çãæå€§åããCPUãªãŒããŒããããæå°éã«æããããã®å®è·µçãªæŠç¥ãšæŽå¯ãæäŸããŸãã
WebGLã³ãã³ããããã¡ãšã¬ã³ããŒãã³ãã«ã®çè§£
æé©åæè¡ã«é£ã³èŸŒãåã«ãWebGLã³ãã³ããããã¡ãšã¬ã³ããŒãã³ãã«ã®åºæ¬æŠå¿µãçè§£ããããšãäžå¯æ¬ ã§ãã
WebGLã³ãã³ããããã¡ãšã¯ïŒ
ãã®æ žå¿ã«ãããŠãWebGLã¯GPUã«ã³ãã³ããéä¿¡ããã°ã©ãã£ãã¯ã¹ã®ã¬ã³ããªã³ã°æ¹æ³ãæç€ºããããšã«ãã£ãŠåäœããŸãããããã®ã³ãã³ããäŸãã°ã·ã§ãŒããŒããã°ã©ã ã®èšå®ããã¯ã¹ãã£ã®ãã€ã³ãããããŒã³ãŒã«ã®çºè¡ãªã©ã¯ãã³ãã³ããããã¡ã«æ ŒçŽãããŸãããã®åŸãGPUã¯ãããã®ã³ãã³ããé æ¬¡åŠçããŠãæçµçã«ã¬ã³ããªã³ã°ãããç»åãçæããŸãã
åWebGLã³ã³ããã¹ãã¯ç¬èªã®ã³ãã³ããããã¡ãæã£ãŠããŸãããã©ãŠã¶ã¯ããããã®ã³ãã³ãã®åºç€ãšãªãOpenGL ESå®è£ ãžã®å®éã®éä¿¡ã管çããŸããã³ãã³ããããã¡å ã®ã³ãã³ãã®æ°ãšçš®é¡ãæé©åããããšã¯ãç¹ã«ã¢ãã€ã«ãã©ã³ã®ãããªãªãœãŒã¹ã«å¶çŽã®ããããã€ã¹ã§æé©ãªããã©ãŒãã³ã¹ãéæããããã«äžå¯æ¬ ã§ãã
ã¬ã³ããŒãã³ãã«ã®ç޹ä»ïŒã³ãã³ãã®äºåèšé²ãšåå©çš
WebGL 2ã§å°å ¥ãããã¬ã³ããŒãã³ãã«ã¯ãã¬ã³ããªã³ã°ã³ãã³ãã®ã·ãŒã±ã³ã¹ãäºåã«èšé²ããåå©çšããããã®åŒ·åãªã¡ã«ããºã ãæäŸããŸããããããWebGLã³ãã³ãã®åå©çšå¯èœãªãã¯ããšèããŠãã ãããããã«ãããç¹ã«åããªããžã§ã¯ããè€æ°åããŸãã¯ããããªããªãšãŒã·ã§ã³ã§æç»ããå Žåã«ãå€§å¹ ãªããã©ãŒãã³ã¹åäžãæåŸ ã§ããŸãã
ãã¬ãŒã ããšã«åãã³ãã³ãã»ãããç¹°ãè¿ãçºè¡ãã代ããã«ãäžåºŠã¬ã³ããŒãã³ãã«ã«èšé²ãããã®ãã³ãã«ãè€æ°åå®è¡ããããšãã§ããŸããããã«ããããã¬ãŒã ããšã«å®è¡ããå¿ èŠã®ããJavaScriptã³ãŒãã®éãæå°éã«æããããã³ãã³ãæºåã®ã³ã¹ããååŽããããããCPUãªãŒããŒããããåæžãããŸãã
ã¬ã³ããŒãã³ãã«ã¯ç¹ã«ä»¥äžã®ãããªå Žåã«åœ¹ç«ã¡ãŸãïŒ
- éçãžãªã¡ããªïŒ é·æé倿Žãããªã建ç©ãå°åœ¢ãªã©ã®éçã¡ãã·ã¥ã®æç»ã
- ç¹°ãè¿ããªããžã§ã¯ãïŒ æ£®ã®æšã ãã·ãã¥ã¬ãŒã·ã§ã³ã®ããŒãã£ã¯ã«ãªã©ãåããªããžã§ã¯ãã®è€æ°ã®ã€ã³ã¹ã¿ã³ã¹ã®ã¬ã³ããªã³ã°ã
- è€éãªãšãã§ã¯ãïŒ ãã«ãŒã ãã·ã£ããŠãããã³ã°ãã¹ãªã©ãç¹å®ã®èŠèŠå¹æãäœæããäžé£ã®ã¬ã³ããªã³ã°ã³ãã³ãã®ã«ãã»ã«åã
ã³ãã³ããããã¡å¹çã®éèŠæ§
éå¹ççãªã³ãã³ããããã¡ã®äœ¿çšã¯ãããã€ãã®åœ¢ã§çŸããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸãïŒ
- CPUãªãŒããŒãããã®å¢å ïŒ éå°ãªã³ãã³ãçºè¡ã¯CPUã«è² è·ãããããã¬ãŒã ã¬ãŒãã®äœäžãã«ã¯ã€ãã®å¯èœæ§ã«ã€ãªãããŸãã
- GPUã®ããã«ããã¯ïŒ æé©åãäžååãªã³ãã³ããããã¡ã¯GPUãå§åããã¬ã³ããªã³ã°ãã€ãã©ã€ã³ã®ããã«ããã¯ã«ãªãå¯èœæ§ããããŸãã
- æ¶è²»é»åã®å¢å ïŒ CPUãšGPUã®ã¢ã¯ãã£ããã£ãå¢ãããšãæ¶è²»é»åãå¢å ããŸããããã¯ç¹ã«ã¢ãã€ã«ããã€ã¹ã«ãšã£ãп害ã§ãã
- ããããªãŒå¯¿åœã®ççž®ïŒ æ¶è²»é»åãå¢å ããçŽæ¥çãªçµæãšããŠã
ã³ãã³ããããã¡ã®å¹çãæé©åããããšã¯ãç¹ã«è€éãªWebGLã¢ããªã±ãŒã·ã§ã³ã«ãããŠãã¹ã ãŒãºã§å¿çæ§ã®é«ãããã©ãŒãã³ã¹ãéæããããã«äžå¯æ¬ ã§ããGPUã«éä¿¡ãããã³ãã³ãã®æ°ãæå°éã«æããã³ãã³ããããã¡ãæ éã«æŽçããããšã§ãéçºè ã¯CPUãªãŒããŒããããå€§å¹ ã«åæžããå šäœçãªã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
WebGLã¬ã³ããŒãã³ãã«ã®ã³ãã³ããããã¡ãæé©åããããã®æŠç¥
WebGLã¬ã³ããŒãã³ãã«ã®ã³ãã³ããããã¡ãæé©åããå šäœçãªã¬ã³ããªã³ã°å¹çãåäžãããããã«ãããã€ãã®ãã¯ããã¯ãçšããããšãã§ããŸãïŒ
1. ã¹ããŒã倿Žã®æå°å
ç°ãªãã·ã§ãŒããŒããã°ã©ã ããã¯ã¹ãã£ããŸãã¯ãããã¡ã®ãã€ã³ããªã©ã®ã¹ããŒã倿Žã¯ãWebGLã§æãã³ã¹ãã®ãããæäœã®äžã€ã§ããåã¹ããŒã倿Žã¯GPUã«å éšç¶æ ã®åèšå®ãèŠæ±ããã¬ã³ããªã³ã°ãã€ãã©ã€ã³ã忢ãããå¯èœæ§ããããŸãããããã£ãŠãã¹ããŒã倿Žã®æ°ãæå°éã«æããããšã¯ãã³ãã³ããããã¡ã®å¹çãæé©åããããã«äžå¯æ¬ ã§ãã
ã¹ããŒã倿Žãåæžããããã®ãã¯ããã¯ïŒ
- ãããªã¢ã«ã«ãããªããžã§ã¯ãã®ãœãŒãïŒ ã¬ã³ããªã³ã°ãã¥ãŒå ã§åããããªã¢ã«ãå ±æãããªããžã§ã¯ããã°ã«ãŒãåããŸããããã«ããããããªã¢ã«ã®ããããã£ïŒã·ã§ãŒããŒããã°ã©ã ããã¯ã¹ãã£ããŠããã©ãŒã ïŒãäžåºŠèšå®ãããã®ãããªã¢ã«ã䜿çšãããã¹ãŠã®ãªããžã§ã¯ããæç»ã§ããŸãã
- ãã¯ã¹ãã£ã¢ãã©ã¹ã®äœ¿çšïŒ è€æ°ã®å°ããªãã¯ã¹ãã£ãåäžã®å€§ããªãã¯ã¹ãã£ã¢ãã©ã¹ã«çµåããŸããããã«ãããã¢ãã©ã¹ãäžåºŠãã€ã³ãããã ãã§ããããã¯ã¹ãã£åº§æšã䜿çšããŠåã ã®ãã¯ã¹ãã£ããµã³ããªã³ã°ããããããã¯ã¹ãã£ãã€ã³ãã£ã³ã°æäœã®æ°ãæžå°ããŸãã
- é ç¹ãããã¡ã®çµåïŒ å¯èœã§ããã°ãè€æ°ã®é ç¹ãããã¡ãåäžã®ã€ã³ã¿ãŒãªãŒããããé ç¹ãããã¡ã«çµåããŸããããã«ããããããã¡ãã€ã³ãã£ã³ã°æäœã®æ°ãæžå°ããŸãã
- ãŠããã©ãŒã ãããã¡ãªããžã§ã¯ãïŒUBOïŒã®äœ¿çšïŒ UBOã䜿çšãããšãåäžã®ãããã¡æŽæ°ã§è€æ°ã®ãŠããã©ãŒã 倿°ãæŽæ°ã§ããŸããããã¯ãåã ã®ãŠããã©ãŒã 倿°ãèšå®ãããããå¹ççã§ãã
äŸïŒãããªã¢ã«ã«ãããœãŒãïŒïŒ
ãªããžã§ã¯ãããã®ãããªã©ã³ãã ãªé åºã§æç»ãã代ããã«ïŒ
draw(object1_materialA);
draw(object2_materialB);
draw(object3_materialA);
draw(object4_materialC);
ãããªã¢ã«ã§ãœãŒãããŸãïŒ
draw(object1_materialA);
draw(object3_materialA);
draw(object2_materialB);
draw(object4_materialC);
ããã«ããããããªã¢ã«Aã¯object1ãšobject3ã«å¯ŸããŠäžåºŠã ãèšå®ããã°ãããªããŸãã
2. ãããŒã³ãŒã«ã®ãããåŠç
GPUã«ç¹å®ã®ããªããã£ãïŒäžè§åœ¢ãç·ãç¹ïŒãã¬ã³ããªã³ã°ããããæç€ºããåãããŒã³ãŒã«ã«ã¯ãããçšåºŠã®ãªãŒããŒããããçºçããŸãããããã£ãŠããããŒã³ãŒã«ã®æ°ãæå°éã«æããããšã§ãããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãã
ãããŒã³ãŒã«ããããåŠçããããã®ãã¯ããã¯ïŒ
- ãžãªã¡ããªã€ã³ã¹ã¿ã³ã·ã³ã°ïŒ ã€ã³ã¹ã¿ã³ã·ã³ã°ã䜿çšãããšãåäžã®ãããŒã³ãŒã«ã§ç°ãªã倿ãæã€åããžãªã¡ããªã®è€æ°ã®ã€ã³ã¹ã¿ã³ã¹ãæç»ã§ããŸããããã¯ãæšãããŒãã£ã¯ã«ã岩ãªã©ã®å€§éã®åäžãªããžã§ã¯ããã¬ã³ããªã³ã°ããã®ã«ç¹ã«åœ¹ç«ã¡ãŸãã
- é ç¹ãããã¡ãªããžã§ã¯ãïŒVBOïŒïŒ VBOã䜿çšããŠGPUã«é ç¹ããŒã¿ãæ ŒçŽããŸããããã«ãããåãã¬ãŒã ã§CPUããGPUã«è»¢éããå¿ èŠãããããŒã¿éãæžå°ããŸãã
- ã€ã³ããã¯ã¹æç»ïŒ ã€ã³ããã¯ã¹æç»ã䜿çšããŠé ç¹ãåå©çšããæ ŒçŽããã³éä¿¡ããå¿ èŠãããé ç¹ããŒã¿ã®éãåæžããŸãã
- ãžãªã¡ããªã®ããŒãžïŒ è€æ°ã®é£æ¥ãããžãªã¡ããªãåäžã®å€§ããªãžãªã¡ããªã«ããŒãžããŸããããã«ãããã·ãŒã³ãã¬ã³ããªã³ã°ããããã«å¿ èŠãªãããŒã³ãŒã«ã®æ°ãæžå°ããŸãã
äŸïŒã€ã³ã¹ã¿ã³ã·ã³ã°ïŒïŒ
1000æ¬ã®æšã1000åã®ãããŒã³ãŒã«ã§æç»ãã代ããã«ãã€ã³ã¹ã¿ã³ã·ã³ã°ã䜿çšããŠ1åã®ãããŒã³ãŒã«ã§æç»ããŸããåæšã®ã€ã³ã¹ã¿ã³ã¹ã®äœçœ®ãšå転ã衚ãè¡åã®é åãã·ã§ãŒããŒã«æäŸããŸãã
3. å¹ççãªãããã¡ç®¡ç
é ç¹ãããã¡ãšã€ã³ããã¯ã¹ãããã¡ã®ç®¡çæ¹æ³ã¯ãããã©ãŒãã³ã¹ã«å€§ããªåœ±é¿ãäžããå¯èœæ§ããããŸããé »ç¹ã«ãããã¡ãå²ãåœãŠããè§£æŸããããããšãã¡ã¢ãªã®æçåãCPUãªãŒããŒãããã®å¢å ã«ã€ãªããå¯èœæ§ããããŸããäžèŠãªãããã¡ã®äœæãšç Žæ£ã¯é¿ããŠãã ããã
å¹ççãªãããã¡ç®¡çã®ããã®ãã¯ããã¯ïŒ
- ãããã¡ã®åå©çšïŒ æ°ãããããã¡ãäœæãã代ããã«ãå¯èœãªéãæ¢åã®ãããã¡ãåå©çšããŸãã
- åçãããã¡ã®äœ¿çšïŒ é »ç¹ã«å€æŽãããããŒã¿ã«ã¯ã
gl.DYNAMIC_DRAW䜿çšãã³ããæã€åçãããã¡ã䜿çšããŸããããã«ãããGPUã¯é »ç¹ã«å€æŽãããããŒã¿ã®ãããã¡æŽæ°ãæé©åã§ããŸãã - éçãããã¡ã®äœ¿çšïŒ é »ç¹ã«å€æŽãããªãããŒã¿ã«ã¯ã
gl.STATIC_DRAW䜿çšãã³ããæã€éçãããã¡ã䜿çšããŸãã - é »ç¹ãªãããã¡ã¢ããããŒãã®åé¿ïŒ GPUã«ããŒã¿ãã¢ããããŒãããåæ°ãæå°éã«æããŸãã
- äžå€ã¹ãã¬ãŒãžã®äœ¿çšãæ€èšïŒ `GL_EXT_immutable_storage`ã®ãããªWebGLæ¡åŒµæ©èœã¯ãäœæåŸã«å€æŽã§ããªããããã¡ãäœæã§ããããã«ããããšã§ããããªãããã©ãŒãã³ã¹äžã®å©ç¹ãæäŸã§ããŸãã
4. ã·ã§ãŒããŒããã°ã©ã ã®æé©å
ã·ã§ãŒããŒããã°ã©ã ã¯ã¬ã³ããªã³ã°ãã€ãã©ã€ã³ã§éèŠãªåœ¹å²ãæããããã®ããã©ãŒãã³ã¹ã¯å šäœçãªã¬ã³ããªã³ã°é床ã«å€§ããªåœ±é¿ãäžããå¯èœæ§ããããŸããã·ã§ãŒããŒããã°ã©ã ãæé©åããããšã§ãå€§å¹ ãªããã©ãŒãã³ã¹åäžãæåŸ ã§ããŸãã
ã·ã§ãŒããŒããã°ã©ã ãæé©åããããã®ãã¯ããã¯ïŒ
- ã·ã§ãŒããŒã³ãŒãã®ç°¡çŽ åïŒ ã·ã§ãŒããŒã³ãŒãããäžèŠãªèšç®ãè€éããåãé€ããŸãã
- äœç²ŸåºŠããŒã¿åã®äœ¿çšïŒ å¯èœãªéãäœç²ŸåºŠã®ããŒã¿åïŒäŸïŒ
mediumpãlowpïŒã䜿çšããŸãããããã®ããŒã¿åã¯ãå¿ èŠãªã¡ã¢ãªãšåŠçèœåãå°ãªããŠæžã¿ãŸãã - åçåå²ã®åé¿ïŒ åçåå²ïŒäŸïŒå®è¡æããŒã¿ã«äŸåãã
ifæïŒã¯ãã·ã§ãŒããŒã®ããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸããåçåå²ãæå°éã«æããããã«ãã¯ã¢ããããŒãã«ã®äœ¿çšãªã©ã®ä»£æ¿ãã¯ããã¯ã«çœ®ãæããŠãã ããã - å€ã®äºåèšç®ïŒ 宿°å€ãäºåèšç®ãããŠããã©ãŒã 倿°ã«æ ŒçŽããŸããããã«ããããã¬ãŒã ããšã«åãå€ãåèšç®ããã®ãé²ããŸãã
- ãã¯ã¹ãã£ãµã³ããªã³ã°ã®æé©åïŒ ãããããããšãã¯ã¹ãã£ãã£ã«ã¿ãªã³ã°ã䜿çšããŠããã¯ã¹ãã£ãµã³ããªã³ã°ãæé©åããŸãã
5. ã¬ã³ããŒãã³ãã«ã®ãã¹ããã©ã¯ãã£ã¹ã®æŽ»çš
ã¬ã³ããŒãã³ãã«ã䜿çšããéã¯ãæé©ãªããã©ãŒãã³ã¹ã®ããã«ä»¥äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããïŒ
- äžåºŠèšé²ããäœåºŠãå®è¡ããïŒ ã¬ã³ããŒãã³ãã«ã®äž»ãªå©ç¹ã¯ãäžåºŠèšé²ããŠäœåºŠãå®è¡ããããšããåŸãããŸãããã®åå©çšã广çã«æŽ»çšããŠããããšã確èªããŠãã ããã
- ãã³ãã«ãå°ãããçŠç¹ãçµã£ããã®ã«ããïŒ å°ãããŠçŠç¹ã®çµããããã³ãã«ã¯ã倧ãããŠã¢ããªã·ãã¯ãªãã³ãã«ãããå¹ççã§ããããšãå€ãã§ããããã«ãããGPUã¯ã¬ã³ããªã³ã°ãã€ãã©ã€ã³ãããè¯ãæé©åã§ããŸãã
- ãã³ãã«å ã§ã®ã¹ããŒã倿Žãé¿ããïŒå¯èœãªå ŽåïŒïŒ åè¿°ã®éããã¹ããŒã倿Žã¯ã³ã¹ããããããŸããã¬ã³ããŒãã³ãã«å ã§ã®ã¹ããŒã倿Žãæå°éã«æããããã«ããŠãã ãããã¹ããŒã倿Žãå¿ èŠãªå Žåã¯ããã³ãã«ã®æåãŸãã¯æåŸã«ãŸãšããŠãã ããã
- éçãžãªã¡ããªã«ãã³ãã«ã䜿çšããïŒ ã¬ã³ããŒãã³ãã«ã¯ãé·æé倿Žãããªãéçãžãªã¡ããªã®ã¬ã³ããªã³ã°ã«æé©ã§ãã
- ãã¹ããšãããã¡ã€ãªã³ã°ïŒ ã¬ã³ããŒãã³ãã«ãå®éã«ããã©ãŒãã³ã¹ãåäžãããŠããããšã確èªããããã«ãåžžã«ãã¹ããšãããã¡ã€ãªã³ã°ãè¡ã£ãŠãã ãããWebGLãããã¡ã€ã©ãããã©ãŒãã³ã¹åæããŒã«ã䜿çšããŠãããã«ããã¯ãç¹å®ããã³ãŒããæé©åããŠãã ããã
6. ãããã¡ã€ãªã³ã°ãšãããã°
ãããã¡ã€ãªã³ã°ãšãããã°ã¯ãæé©åããã»ã¹ã®äžå¯æ¬ ãªã¹ãããã§ããWebGLã¯ãããã©ãŒãã³ã¹ãåæããããã«ããã¯ãç¹å®ããããã®ããŸããŸãªããŒã«ãšãã¯ããã¯ãæäŸããŠããŸãã
ãããã¡ã€ãªã³ã°ãšãããã°ã®ããã®ããŒã«ïŒ
- ãã©ãŠã¶ã®éçºè ããŒã«ïŒ ã»ãšãã©ã®ã¢ãã³ãã©ãŠã¶ã«ã¯ãJavaScriptã³ãŒãã®ãããã¡ã€ãªã³ã°ãã¡ã¢ãªäœ¿çšéã®åæãWebGLã®ç¶æ ã®æ€æ»ãå¯èœã«ããçµã¿èŸŒã¿ã®éçºè ããŒã«ãæäŸãããŠããŸãã
- WebGLãããã¬ïŒ Spector.jsãWebGL Insightãªã©ã®å°çšWebGLãããã¬ã¯ãã·ã§ãŒããŒã®æ€æ»ãç¶æ ã®è¿œè·¡ããšã©ãŒå ±åãªã©ãããé«åºŠãªãããã°æ©èœãæäŸããŸãã
- GPUãããã¡ã€ã©ïŒ NVIDIA Nsight GraphicsãAMD Radeon GPU Profilerãªã©ã®GPUãããã¡ã€ã©ã䜿çšãããšãGPUã®ããã©ãŒãã³ã¹ãåæããã¬ã³ããªã³ã°ãã€ãã©ã€ã³ã®ããã«ããã¯ãç¹å®ã§ããŸãã
ãããã°ã®ãã³ãïŒ
- WebGLãšã©ãŒãã§ãã¯ã®æå¹åïŒ WebGLã®ãšã©ãŒãã§ãã¯ãæå¹ã«ããŠãéçºããã»ã¹ã®æ©ã段éã§ãšã©ãŒãèŠåããã£ããããŸãã
- ã³ã³ãœãŒã«ãã®ã³ã°ã®äœ¿çšïŒ ã³ã³ãœãŒã«ãã®ã³ã°ã䜿çšããŠå®è¡ã®æµãã远跡ããæœåšçãªåé¡ãç¹å®ããŸãã
- ã·ãŒã³ã®ç°¡çŽ åïŒ ããã©ãŒãã³ã¹ã®åé¡ãçºçããŠããå Žåã¯ããªããžã§ã¯ããåé€ããããã·ã§ãŒããŒã®è€éããæžããããããŠãã·ãŒã³ãç°¡çŽ åããŠã¿ãŠãã ããã
- åé¡ã®åãåãïŒ ã³ãŒãã®ã»ã¯ã·ã§ã³ãã³ã¡ã³ãã¢ãŠãããããç¹å®ã®æ©èœãç¡å¹ã«ãããããŠãåé¡ãåãåããŠã¿ãŠãã ããã
å®äžçã®äŸãšã±ãŒã¹ã¹ã¿ãã£
ãããã®æé©åãã¯ããã¯ãã©ã®ããã«é©çšã§ããããããã€ãã®å®äžçã®äŸãèããŠã¿ãŸãããã
äŸ1ïŒ3Dã¢ãã«ãã¥ãŒã¢ã®æé©å
ãŠãŒã¶ãŒãè€éãª3Dã¢ãã«ã衚瀺ããæäœã§ããWebGLããŒã¹ã®3Dã¢ãã«ãã¥ãŒã¢ãæ³åããŠã¿ãŠãã ãããåœåããã®ãã¥ãŒã¢ã¯ãç¹ã«ããªãŽã³æ°ãå€ãã¢ãã«ãã¬ã³ããªã³ã°ããéã«ãããã©ãŒãã³ã¹ã®äœäžã«æ©ãŸãããŠããŸããã
äžèšã§èª¬æããæé©åãã¯ããã¯ãé©çšããããšã§ãéçºè ã¯ããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãïŒ
- ãžãªã¡ããªã€ã³ã¹ã¿ã³ã·ã³ã°ïŒ ãã«ãããªããããªã©ã®ç¹°ãè¿ãèŠçŽ ã®è€æ°ã®ã€ã³ã¹ã¿ã³ã¹ãã¬ã³ããªã³ã°ããããã«äœ¿çšã
- ãã¯ã¹ãã£ã¢ãã©ã¹ïŒ è€æ°ã®ãã¯ã¹ãã£ãåäžã®ã¢ãã©ã¹ã«çµåãããã¯ã¹ãã£ãã€ã³ãã£ã³ã°æäœã®æ°ãåæžããããã«äœ¿çšã
- 詳现床ïŒLODïŒïŒ ã¢ãã«ãã«ã¡ã©ããé ãå Žåã«ããã詳现床ã®äœãããŒãžã§ã³ã®ã¢ãã«ãã¬ã³ããªã³ã°ããããã«LODãå®è£ ã
äŸ2ïŒããŒãã£ã¯ã«ã·ã¹ãã ã®æé©å
ç ãç«ãªã©ã®è€éãªèŠèŠå¹æãã·ãã¥ã¬ãŒãããWebGLããŒã¹ã®ããŒãã£ã¯ã«ã·ã¹ãã ãèããŠã¿ãŸãããããã®ããŒãã£ã¯ã«ã·ã¹ãã ã¯åœåããã¬ãŒã ããšã«ã¬ã³ããªã³ã°ãããããŒãã£ã¯ã«ã®æ°ãå€ããããããã©ãŒãã³ã¹ã®åé¡ã«æ©ãŸãããŠããŸããã
äžèšã§èª¬æããæé©åãã¯ããã¯ãé©çšããããšã§ãéçºè ã¯ããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãïŒ
- ãžãªã¡ããªã€ã³ã¹ã¿ã³ã·ã³ã°ïŒ åäžã®ãããŒã³ãŒã«ã§è€æ°ã®ããŒãã£ã¯ã«ãã¬ã³ããªã³ã°ããããã«äœ¿çšã
- ãã«ããŒãåãããããŒãã£ã¯ã«ïŒ ããŒãã£ã¯ã«ãåžžã«ã«ã¡ã©ãåãå¹³ããªåè§åœ¢ãšããŠã¬ã³ããªã³ã°ããé ç¹ã·ã§ãŒããŒã®è€éãã軜æžããããã«äœ¿çšã
- ããŒãã£ã¯ã«ã«ãªã³ã°ïŒ èŠéå°ã®å€ã«ããããŒãã£ã¯ã«ãã«ãªã³ã°ããã¬ã³ããªã³ã°ããå¿ èŠãããããŒãã£ã¯ã«ã®æ°ãåæžã
WebGLããã©ãŒãã³ã¹ã®æªæ¥
WebGLã¯é²åãç¶ããŠãããããã©ãŒãã³ã¹ãšæ©èœãåäžãããããã®æ°ããæ©èœãæ¡åŒµæ©èœã宿çã«å°å ¥ãããŠããŸããWebGLã®ããã©ãŒãã³ã¹æé©åã«ãããæ°ããªãã¬ã³ãã«ã¯ã以äžã®ãããªãã®ããããŸãïŒ
- WebGPUïŒ WebGPUã¯æ¬¡äžä»£ã®ãŠã§ãã°ã©ãã£ãã¯ã¹APIã§ãããWebGLãå€§å¹ ã«äžåãããã©ãŒãã³ã¹åäžãçŽæããŠããŸããã³ã³ãã¥ãŒãã·ã§ãŒããŒãã¬ã€ãã¬ãŒã·ã³ã°ãªã©ã®æ©èœã«å¯Ÿå¿ãããããã¢ãã³ã§å¹ççãªAPIãæäŸããŸãã
- WebAssemblyïŒ WebAssemblyã䜿çšãããšãéçºè ã¯ãã©ãŠã¶ã§é«æ§èœãªã³ãŒããå®è¡ã§ããŸããç©çã·ãã¥ã¬ãŒã·ã§ã³ãè€éãªã·ã§ãŒããŒèšç®ãªã©ãèšç®è² è·ã®é«ãã¿ã¹ã¯ã«WebAssemblyã䜿çšããããšã§ãå šäœçãªããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãã
- ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã«ããã¬ã€ãã¬ãŒã·ã³ã°ïŒ ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã«ããã¬ã€ãã¬ãŒã·ã³ã°ãããæ®åããã«ã€ããŠãéçºè ã¯ãããªã¢ã«ã§èŠèŠçã«é åçãªãŠã§ãã°ã©ãã£ãã¯ã¹äœéšãåµåºã§ããããã«ãªããŸãã
çµè«
WebGLã¬ã³ããŒãã³ãã«ã®ã³ãã³ããããã¡ãæé©åããããšã¯ãè€éãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ã§ã¹ã ãŒãºã§å¿çæ§ã®é«ãããã©ãŒãã³ã¹ãéæããããã«äžå¯æ¬ ã§ããã¹ããŒã倿Žãæå°éã«æãããããŒã³ãŒã«ããããåŠçãããããã¡ãå¹ççã«ç®¡çããã·ã§ãŒããŒããã°ã©ã ãæé©åããã¬ã³ããŒãã³ãã«ã®ãã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãéçºè ã¯CPUãªãŒããŒããããå€§å¹ ã«åæžããå šäœçãªã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
æé©ãªæé©åãã¯ããã¯ã¯ãç¹å®ã®ã¢ããªã±ãŒã·ã§ã³ãããŒããŠã§ã¢ã«ãã£ãŠç°ãªãããšãå¿ããªãã§ãã ãããåžžã«ã³ãŒãããã¹ããããããã¡ã€ãªã³ã°ããŠããã«ããã¯ãç¹å®ããããã«å¿ããŠæé©åããŠãã ãããWebGPUãWebAssemblyã®ãããªæ°ããæè¡ã«ã泚ç®ããŠãã ããããããã¯å°æ¥çã«WebGLã®ããã©ãŒãã³ã¹ãããã«åäžãããããšãçŽæããŠããŸãã
ãããã®ååãçè§£ããé©çšããããšã§ãWebGLã®æœåšèœåãæå€§éã«åŒãåºããäžçäžã®ãŠãŒã¶ãŒã«é åçã§é«æ§èœãªãŠã§ãã°ã©ãã£ãã¯ã¹äœéšãæäŸããããšãã§ããŸãã