Grimoire.js provides effective structure to make use of WebGL representational power in Web development.
Grimoire.js - WebGL framework for Web development -
Grimoire.js provides effective structure to make use of WebGL representational power in Web development.
生WebGL入門:åˆéŸ³ãƒŸã‚¯ã®ç¾Žéº—3Dモデルを表示ã™ã‚‹(後編)
å‰ã®è¨˜äº‹ã§ã€3Dモデルã®ãƒŸã‚¯ã•ã‚“ã®æç”»ã«æˆåŠŸã—ã¾ã—ãŸã€‚ãŸã ç¾çŠ¶ã¯ãƒ¢ãƒ‡ãƒ«ã®å¤–形を表示出æ¥ãŸã ã‘ãªã®ã§ã€ã›ã£ã‹ãã“ã“ã¾ã§è¡¨ç¤ºå‡ºæ¥ãŸã‹ã‚‰ã«ã¯è‰²ã‚’å¡—ã£ã¦ã¿ãŸã„ã¨ã“ã‚ã§ã™ã€‚今回ã®è¨˜äº‹ã§ã¯ã€è‰²ã‚’塗りテクスãƒãƒ£ã‚’è²¼ã£ã¦ã¿ã¾ã™ã€‚ã¾ãŸã€æœ€å¾Œã«åˆ¥ã®ãƒ¢ãƒ‡ãƒ«ã‚’表示ã—ã¦ã€ãƒ†ã‚¯ã‚¹ãƒãƒ£ã®å¨åŠ›ã«ã¤ã„ã¦ã‚‚ã”紹介ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ å‰ã®è¨˜äº‹ã¯ã“ã¡ã‚‰â†’ 生WebGL入門:åˆéŸ³ãƒŸã‚¯ã®ç¾Žéº—3Dモデルを表示ã™ã‚‹(ä¸ç·¨) MTLデータã®èªã¿è¾¼ã¿ã€è¡¨ç¤º ãã®1ã®è¨˜äº‹ã§æº–å‚™ã—ãŸæ™‚ã€OBJファイルã¨å…±ã«MTLファイル ãŒç”Ÿæˆã•ã‚ŒãŸã“ã¨ã‚’覚ãˆã¦ã„らã£ã—ゃるã§ã—ょã†ã‹ã€‚å‰ã®è¨˜äº‹ã§ç´¹ä»‹ã—ãŸã¨ãŠã‚Šã€OBJファイルã¯ãƒãƒªã‚´ãƒ³ã®ãƒ‡ãƒ¼ã‚¿ã‚’定義ã™ã‚‹ã‚‚ã®ã§ã—ãŸãŒã€è‰²ã®æƒ…å ±ã¯ä¸€åˆ‡ã‚ã‚Šã¾ã›ã‚“ã§ã—ãŸã€‚ãれらã®ãƒ‡ãƒ¼ã‚¿ã¯ã€MTL（マテリアル）ファイルã«å®šç¾©ã•ã‚Œã¦ã„ã¾ã™ã€‚ã¨ã„ã†ã‚ã‘ã§ã€ä»Šå›žã¯è‰²ã‚’ã¤ã‘ã‚‹ãŸã‚ã«ãƒžãƒ†ãƒªã‚¢ãƒ«ãƒ•ã‚¡ã‚¤ãƒ«ã‚’扱ã„ã¾ã™ã€‚ マテリアルファイルã®ãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆ
生WebGL入門:åˆéŸ³ãƒŸã‚¯ã®ç¾Žéº—3Dモデルを表示ã™ã‚‹(ä¸ç·¨)
å‰ã®è¨˜äº‹ã§ã¯ã€å¤§å¤‰é•·ã„コードを書ã„ã¦ã€ã‚„ã£ã¨ãƒãƒªã‚´ãƒ³ã‚’1æžšã ã‘表示ã•ã›ã‚‹ã“ã¨ã«æˆåŠŸã—ã¾ã—ãŸã€‚次ã«ç›®æŒ‡ã™ã¯ã€ãƒŸã‚¯ã•ã‚“モデルã®è¡¨ç¤ºã§ã™ã€‚ å‰ã®è¨˜äº‹ã¯ã“ã¡ã‚‰â†’ 生WebGL入門:åˆéŸ³ãƒŸã‚¯ã®ç¾Žéº—3Dモデルを表示ã™ã‚‹(å‰ç·¨) モデルデータã®èªã¿è¾¼ã¿ã€è¡¨ç¤º ã¾ãšã¯å‰ã®è¨˜äº‹ã§æº–å‚™ã§ç”¨æ„ã—ãŸã€ãƒŸã‚¯ã•ã‚“モデルã®ãƒ‡ãƒ¼ã‚¿ã‚’JavaScriptã§èªã¿è¾¼ã¿ã¾ã™ã€‚å‰ã®æº–å‚™ã§ã¯miku.objã€miku.mtlã®2ã¤ã®ãƒ•ã‚¡ã‚¤ãƒ«ãŒå‡ºåŠ›ã•ã‚Œã¾ã—ãŸã€‚ãªã‚“ã¨ãªã眺ã‚ã‚Œã°ã‚ã‹ã‚‹ã‚ˆã†ã«ã€OBJファイルã®æ–¹ã¯é ‚点ãªã©ã®ãƒ‡ãƒ¼ã‚¿ã€MTLファイルã®æ–¹ãŒè‰²ãªã©ã®ãƒ‡ãƒ¼ã‚¿ã¨ãªã£ã¦ã„ã¾ã™ã€‚ã¾ãšã€OBJファイルã®ãƒ‡ãƒ¼ã‚¿ã‚’èªã¿è¾¼ã‚“ã§ã€ãã®å†…容を出力ã—ã¦ã¿ã¾ã—ょã†ã€‚ OBJファイルã®ãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆ OBJファイルã®ãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆã¯ã€ãƒãƒƒãƒˆã§å°‘ã—調ã¹ã‚Œã°ã“ã¡ã‚‰ã®ã‚µã‚¤ãƒˆç‰ã§è©³ã—ã説明ã•ã‚Œã¦ã„ã¾ã™ãŒã€åŸºæœ¬çš„ã«ã¯é ‚点データã€ãƒ†ã‚¯ã‚¹ãƒãƒ£ãƒ‡ãƒ¼ã‚¿ã€æ³•ç·šãƒ‡ãƒ¼ã‚¿ã€ãƒãƒªã‚´ãƒ³å®š
生WebGL入門:åˆéŸ³ãƒŸã‚¯ã®ç¾Žéº—3Dモデルを表示ã™ã‚‹(å‰ç·¨)
Special Thanks to @hagat and @teehah for reviewing my articles! è¿‘å¹´ã€WebGLã«æµè¡Œã®å…†ã—ãŒå‡ºã¦ãã¾ã—ãŸã€‚WebGLã¨ã¯ã€ãƒ–ラウザã«ä½•ã‚‰ãƒ—ラグインをインストールã™ã‚‹ã“ã¨ãªãã€JavaScriptよりGPUを使用ã—ãŸ3Dã®è¡¨ç¤ºã‚’å¯èƒ½ã¨ã™ã‚‹æŠ€è¡“ã§ã™ã€‚プラグインã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ãŒå¿…è¦ãªã„ã¨ã¯ã„ãˆä»Šã¾ã§ã¯å¯¾å¿œãƒ–ラウザãŒå°‘ãªãã‚ã¾ã‚Šå®Ÿç”¨çš„ã§ã¯ã‚ã‚Šã¾ã›ã‚“ã§ã—ãŸãŒã€å…ˆæ—¥ã®iOS8ã§æ£å¼ã«å¯¾å¿œã•ã‚ŒãŸã“ã¨ã§ãƒ¢ãƒã‚¤ãƒ«ãƒ–ラウザã«ãŠã„ã¦å¯¾å¿œçŽ‡ãŒè·³ã上ãŒã‚Šã€ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã«ãŠã„ã¦ãƒ–ラウザベースã§3Dã®ã‚²ãƒ¼ãƒ ç‰ã‚’作れるå¯èƒ½æ€§ãŒæ€¥æ¿€ã«é«˜ã¾ã‚Šã¾ã—ãŸã€‚ 今回WebGL Advent Calendarã®ä¸€ç’°ã¨ã—ã¦ã€ç”ŸWebGLã§3Dã®ã‚ªãƒ–ジェクトを表示ã™ã‚‹ã¨ã“ã‚ã¾ã§æŒ‘戦ã—ã¦ã¿ã¾ã™ã€‚WebGLã«ã¯three.jsを始ã‚ã¨ã—ã¦æœ‰ç”¨ãªãƒ©ã‚¤ãƒ–ラリãŒãŸãã•ã‚“ã‚ã‚Šã€å¤§æŠµã®å ´
WebGL best practices - Web API | MDN
ã“ã®æ–‡æ›¸ã¯ WebGL を使ã£ãŸã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã®å‘上ã®ãŸã‚ã® Tips ã«ã¤ã„ã¦æ›¸ãã¾ã™ã€‚ã“れらã®æ案ã«å¾“ã†ã“ã¨ã§ã€å¤šãã®æ©Ÿå™¨ã¸ã®äº’æ›æ€§ã‚’高ã‚ãŸã‚Šã€ãƒ‘フォーマンスを上ã’ã‚‹ã“ã¨ã«ã‚‚ãªã‚Šã¾ã™ã€‚ WebGL ã®ã‚¨ãƒ©ãƒ¼ã‚’出ã•ãªã„よã†ã«æ³¨æ„ã—ã¾ã—ょã†ã€‚エラー㯠getError() ã§å¾—られã¾ã™ãŒã€Firefox ã§ã¯ webgl.verbose ã®è¨å®šã‚’有効ã«ã™ã‚‹ã“ã¨ã§ã€ã‚¦ã‚§ãƒ–コンソール㫠WebGL ã®ã‚¨ãƒ©ãƒ¼ã¨è¦å‘Šã‚’出力ã—ã¾ã™ã€‚ユーザーã®ã‚³ãƒ³ã‚½ãƒ¼ãƒ«ã«ã‚¨ãƒ©ãƒ¼ã‚’åã出ã™å¿…è¦ã¯ãªã„ã§ã—ょã†ï¼Ÿï¼ˆè¨³è¨»ï¼šãƒ‘フォーマンスã®ç†ç”±ã‚‚ã‚る。下å‚照） #ifdef GL_ES ã¯çµ¶å¯¾ã«ä½¿ã£ã¦ã¯ã„ã‘ã¾ã›ã‚“。åˆæœŸã®ä¾‹ã§ã¯ã“ã‚ŒãŒä½¿ã‚ã‚Œã¦ã„ã¾ã—ãŸãŒã€WebGL ã§ã¯å¿…ãš true ã«ãªã‚‹ã®ã§å¿…è¦ã‚ã‚Šã¾ã›ã‚“。 フラグメントシェーダ㧠highp 精度を使ã†ã®ã¯ã‚„ã‚ã¾ã—ょã†ã€‚mediump を代ã‚ã‚Šã«ä½¿ã„ã¾ã—ょã†ã€‚highp を使ã†
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}