HTML5周辺技術ã®WebGLã¨JavaScriptã§ã‚¸ãƒ‹ãƒ¼ã‚¨ãƒ•ã‚§ã‚¯ãƒˆ | ClockMaker BlogJavaScriptã§Mac定番ã®ã‚¸ãƒ‹ãƒ¼ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’作ã£ã¦ã¿ã¾ã—ãŸã€‚今回利用ã—ãŸã®ã¯HTML5周辺技術ã®WebGLã¨ã„ã†ã‚‚ã®ã§ã€ãƒ—ラウザãƒã‚¤ãƒ†ã‚£ãƒ–ã§GPUを利用ã§ãる機能ã§ã™ã€‚ デモを見る (2023å¹´ãƒãƒ¼ã‚¸ãƒ§ãƒ³) デモを見る (2012å¹´ãƒãƒ¼ã‚¸ãƒ§ãƒ³) ※2023å¹´ã«ãƒ‡ãƒ¢ã‚’Three.js r151ã§å‹•ä½œã™ã‚‹ã‚ˆã†ã«ãƒ¡ãƒ³ãƒ†ãƒŠãƒ³ã‚¹ã—ã¾ã—ãŸã€‚ WebGLã¨Canvasã®é•ã„ 今回ã¯WebGLを使ã£ã¦ã„ã‚‹ãŸã‚å†ç”Ÿå¯èƒ½ãªç’°å¢ƒãŒé™ã‚‰ã‚Œã¦ã„ã¾ã™ã€‚本当ã¯å†ç”Ÿã§ãる環境を増やã™ãŸã‚ã«WebGLã§ã¯ãªãCanvasタグを利用ã—ãŸã‹ã£ãŸã®ã§ã™ãŒã€Canvasã‚¿ã‚°ã ã¨ã‚¢ãƒ³ãƒã‚¨ã‚¤ãƒªã‚¢ã‚¹ã®é™ç•Œã§ã€Œãƒ’ビ割れã€ãŒç™ºç”Ÿã—ã¦å®Œæˆã•ã›ã‚‹ã“ã¨ãŒã§ãã¾ã›ã‚“ã§ã—ãŸã€‚ 失敗作A (自å‰ã§ä½œæˆã—ãŸãƒãƒ¼ã‚¸ãƒ§ãƒ³) 失敗作B (Three.jsã®Canvasレンダラーを利用ã—ãŸãƒãƒ¼ã‚¸ãƒ§ãƒ³) 対ç–ã¨ã—ã¦ãƒˆãƒ©ã‚¤ã‚¢ãƒ³ã‚°ãƒ«ã‚’外å´ã«åºƒã’ã‚‹ãªã©è‰²ã€…試ã—ãŸ
{{#tags}}- {{label}}
{{/tags}}