raymarching for games - primitive: blog
demoscene ã®ä¸–ç•Œã§ã¯è¿‘å¹´ raymarching ã¨ã„ã†ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°æ‰‹æ³•ãŒã‚ˆã用ã„られã¦ã„ã¾ã™ã€‚ãƒãƒªã‚´ãƒ³ãƒ¢ãƒ‡ãƒ«ã¯ä½¿ã‚ãšã€ãƒ¢ãƒ‡ãƒ«ãƒ‡ãƒ¼ã‚¿ã¯æ•°å¼ã®å›³å½¢ã¨ã—ã¦ã‚·ã‚§ãƒ¼ãƒ€ã‚³ãƒ¼ãƒ‰ã®ä¸ã§è¡¨ç¾ã—ã€pixel shader ã§å›³å½¢ã¨ã®è·é›¢ã‚’求ã‚ã¦å¯è¦–化ã—ã¦ã„ãã€ã¨ã„ã†ã‚‚ã®ã§ã™ã€‚ demoscene (4k/64k intro) ã®åŽ³ã—ã„容é‡åˆ¶é™ã®ä¸ç¶ºéº—ãªçµµã‚’出ã™ãŸã‚ã«ç”Ÿã¿å‡ºã•ã‚ŒãŸæ‰‹æ³•ã§ã™ãŒã€å¾“æ¥ã®ãƒãƒªã‚´ãƒ³ãƒ™ãƒ¼ã‚¹ã®æ‰‹æ³•ã§ã¯é›£ã—ã„独特ã®çµµã‚’出ã™ã“ã¨ãŒã§ãã‚‹ã¨ã„ã†å‰¯æ¬¡çš„効果ãŒã‚ã‚Šã¾ã™ã€‚ raymarching ã®ä»£è¡¨çš„ãªä½œå“群 ã“ã®æ‰‹æ³•ã¯ PS4 世代以é™ã€å°è¦æ¨¡ã‚²ãƒ¼ãƒ 開発ãƒãƒ¼ãƒ å‘ã‘ã®æœ‰ç”¨ãªãƒ„ールã«ãªã‚‹ã‚“ã˜ã‚ƒãªã„ã‹ã¨è€ƒãˆã¦ã„ã¦ã€atomic ã§ã¯è©¦ã—ã«èƒŒæ™¯ã«ã“ã®æ‰‹æ³•ã‚’用ã„ã¦ã„ã¾ã™ã€‚以下ã¯ãã®éŽç¨‹ã‚„考察ã§ã™ã€‚ ã¾ãšã€raymarching ã®åŸºæœ¬ã«ã¤ã„ã¦ã¯ demoscene.jp ã®äººãŸã¡ãŒç´ 晴らã—ã„解説
2Dã®æµä½“ (stable fluids) ã®è¡¨ç¾ã‚’使ã£ã¦ã‚¯ãƒªã‚¨ã‚¤ãƒ†ã‚£ãƒ–コーディングをã—ã¦ã¿ãŸã€‚｜Takumi HASEGAWA (unshift Inc.)
ã‚‚ã†ã™ã§ã«ãƒªãƒ‹ãƒ¥ãƒ¼ã‚¢ãƒ«ã•ã‚Œã¦ã—ã¾ã£ã¦ã„ã¾ã™ãŒã€æ°´æ›œæ—¥ã®ã‚«ãƒ³ãƒ‘ãƒãƒ©ã®ã‚ªãƒ•ã‚£ã‚·ãƒ£ãƒ«ã‚µã‚¤ãƒˆã®èƒŒæ™¯ã«ã“ã®è¡¨ç¾ã‚’使用ã—ã¦ã„ã¾ã—ãŸã€‚ 当時ã€ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã•ã‚“ã«ã€Œã“ã†ã„ã†ã®ã‚„ã‚ŠãŸã„ã€ã¨å‚考サイトを見ã›ã‚‰ã‚Œã¦ã€ã€Œã§ãã¾ã™ã‚ˆã€ã¨è¨€ã£ã¦ã¿ãŸã¯ã„ã„ã‚‚ã®ã®ã€WebGLã«ã‚ã¾ã‚Šæ…£ã‚Œã¦ãªã‹ã£ãŸè‡ªåˆ†ã«ã¯å®Ÿè£…難易度ãŒé«˜ãã€å¿ƒã‚’折られã‹ã‘ãŸè¡¨ç¾ã§ã™ã€‚ ã„ã‚ã„ã‚調ã¹ã¦ã„ã‚‹ã¨ã€ã“ã®è¡¨ç¾ã¯ã€Œstable fluidsã€ã§ã‚ã‚‹ã€ã¨ã„ã†ã“ã¨ã‚’知りã¾ã—ãŸã€‚ ã¡ã‚‡ã£ã¨å‰ã«ãƒ›ãƒ ンクルスã®è’井ã•ã‚“ãŒãŠã—ゃれãªã‚³ãƒ³ãƒ†ãƒ³ãƒ„を実装ã—ã¦ã„ãŸã‚Š(Chrome Experimentsã«æŽ²è¼‰ï¼ï¼)
端末性能を測るWebGLアプリ作ã£ã¦ã¿ãŸ - KAYAC Engineers' Blog
ã“ã‚“ã«ã¡ã¯ã€‚技術部平山ã§ã™ã€‚ ã“ã®è¨˜äº‹ã§ã¯ã€é›‘ã«ãƒ™ãƒ³ãƒãƒžãƒ¼ã‚¯ãƒ—ãƒã‚°ãƒ©ãƒ を作ã£ã¦ã¿ãŸã“ã¨ã¨ã€ãã‚Œã«ä»˜éšã—ã¦ã€ ベンãƒãƒžãƒ¼ã‚¯ãƒ—ãƒã‚°ãƒ©ãƒ を作りãŸããªã‚‹ã‚ˆã†ãªäº‹æƒ… テストã®è¨è¨ˆã¨ã€ãã®èƒŒå¾Œã«ã‚ã‚‹ãƒãƒ¼ãƒ‰ã‚¦ã‚§ã‚¢ ã¨ã„ã£ãŸç‚¹ã«ã¤ã„ã¦æ›¸ãã¾ã™ã€‚ ãªãŠã€å®Ÿè¡Œã¯ã“ã¡ã‚‰ã‹ã‚‰Web上ã§å¯èƒ½ã§ã™(上ã®ã‚¹ã‚¯ã‚·ãƒ§ã‚’押ã—ã¦ã‚‚飛ã¹ã¾ã™)。 Unityã®WebGLã«ã™ã‚‹ã“ã¨ã§ã€ä½™è¨ˆãªæ‰‹é–“ãªã多ãã®æ©Ÿæ¢°ã§æ¸¬ã‚Œã‚‹ã‚ˆã†ã«ã—ã¦ã„ã¾ã™ã€‚ ãŸã ã—ã€WebAssemblyを使ã£ã¦ã„る関係上ã€iOS9以å‰ã§ã¯å‹•ãã¾ã›ã‚“。ã”容赦ãã ã•ã„。 測ã£ã¦ãã ã•ã£ãŸæ–¹ã¯ã€ twitterã§çµæžœ(スクショ)ã‚’é ‚ã‘ã‚‹ã¨å¤§å¤‰ã†ã‚Œã—ã„ã§ã™ã€‚ ゲーム機ã€ãƒã‚¤ã‚¨ãƒ³ãƒ‰PCã€å¤ã„スマホã€ãªã©ã¯ç‰¹ã«æ“è¿Žã§ã™! ãªãŠã€ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã‚‚githubã«ã‚ã‚Šã¾ã™ã€‚ 測定方法 「ALLã€ã‚’押ã—ã€å…ƒã®ç”»é¢ã«æˆ»ã£ã¦ãã‚‹ã¾ã§(ã‚ャラクターã®çµµãŒå‡ºã¦ãã‚‹ã¾ã§)放ã£ã¦ãŠãã¾ã™ã€‚ 途ä¸ã§ã‚¹ãƒªãƒ¼
最新WebGL通信 〜ã„ã¾ã‚ャッãƒã‚¢ãƒƒãƒ—ã—ãŸã„WebGL2・WebGPU・WebXRã¨ã¯ã€œ - ICS MEDIA
2011å¹´ã«ä»•æ§˜ãŒæ£å¼ãƒªãƒªãƒ¼ã‚¹ã•ã‚Œã¦ä»¥æ¥ã€WebGLã¯å¤šãã®ãƒ–ラウザベンダーã€ã‚³ãƒ³ãƒ†ãƒ³ãƒ„開発コミュニティã®æ‰‹ã«ã‚ˆã£ã¦æ™®åŠã—ã¦ãã¾ã—ãŸã€‚本記事ã§ã¯ã€2019å¹´1月ç¾åœ¨ã®WebGLã®ç¾çŠ¶ã¨å‘¨è¾ºæŠ€è¡“ã€ãã—ã¦æœªæ¥ã«ã¤ã„ã¦ç´¹ä»‹ã—ã¾ã™ã€‚ 環境ãŒå®Œå…¨ã«æ™®åŠã—ãŸWebGL 1.0 WebGLã®æœ€åˆã®ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã§ã‚ã‚‹WebGL 1.0ã¯ã€ç¾åœ¨ã§ã¯ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã€ãƒ¢ãƒã‚¤ãƒ«ã¨ã‚‚ã«ã™ã¹ã¦ã®ä¸»è¦ãªãƒ–ラウザã§å¯¾å¿œã—ã¦ã„ã¾ã™ã€‚対応環境ã¨ã„ã†è¦³ç‚¹ã§ã¯ã‚‚ã¯ã‚„案件ã§ã®æŽ¡ç”¨ã‚‚å•é¡Œãªã„状æ³ã¨ã„ãˆã‚‹ã§ã—ょã†ã€‚実際ã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®WebGLサãƒãƒ¼ãƒˆç’°å¢ƒã‚’集計ã™ã‚‹ã€ŒWebGL Statsã€ã«ã‚ˆã‚‹ã¨ã€ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ã€ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã¨ã‚‚ã«98%ã‚‚ã®ç’°å¢ƒã§å‹•ä½œã—ã¦ã„ã‚‹ã“ã¨ãŒã‚ã‹ã‚Šã¾ã™ã€‚ â–²WebGL 1.0を利用å¯èƒ½ãªãƒ–ラウザã«ã¤ã„ã¦ã€‚「Can I use…ã€ã‚ˆã‚Š â–²WebGL 1.0ã®ã‚µãƒãƒ¼ãƒˆç’°å¢ƒã«ã¤ã„ã¦ã€‚「WebGL Statsã€ã‚ˆã‚Š 国内ã§ã‚‚
webgl-waterã®ã‚³ãƒ¼ã‚¹ãƒ†ã‚£ã‚¯ã‚¹è§£èª¬
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ã¯ã˜ã‚㫠最近ãƒã‚ºã£ã¦ã„ãŸwebgl-waterã®ã‚³ãƒ¼ã‚¹ãƒ†ã‚£ã‚¯ã‚¹ã‚’shadertoyã§å®Ÿè£…ã—ã¾ã—ãŸã€‚ã›ã£ã‹ããªã®ã§ç°¡å˜ã«è§£èª¬ã—ãŸã„ã¨æ€ã„ã¾ã™ã€‚ https://www.shadertoy.com/view/MttBRS https://www.shadertoy.com/view/MldfDn レイマーãƒãƒ³ã‚°ã§çµµãŒå‡ºã›ã‚‹ãらã„ã®äºˆå‚™çŸ¥è˜ãŒã‚ã‚‹ã¨ã€ã‚½ãƒ¼ã‚¹ã‚’ç†è§£ã—ã¤ã¤èªã¿é€²ã‚ã‚‹ã“ã¨ãŒå‡ºæ¥ã‚‹ã¨æ€ã„ã¾ã™ã€‚ レイマーãƒãƒ³ã‚°ã«ã¤ã„ã¦ã¯@gam0022ã•ã‚“ã®ã‚¹ãƒ©ã‚¤ãƒ‰ãŒè©³ç´°ã§åˆ†ã‹ã‚Šã‚„ã™ã解説ã•ã‚Œã¦ã„ã‚‹ã®ã§ãŠã‚¹ã‚¹ãƒ¡ã§ã™ã€‚ シェーダã ã‘ã§ä¸–界を創るï¼thr
次世代仕様ã®WebGPUã¨ã¯ï¼Ÿã€€æ¬¡æœŸmacOSã§ã®OpenGLéžæŽ¨å¥¨åŒ–ã¯WebGLã«å½±éŸ¿ã‚’ã‚‚ãŸã‚‰ã™ã®ã‹ - ICS MEDIA
次世代仕様ã®WebGPUã¨ã¯ï¼Ÿ 次期macOSã§ã®OpenGLéžæŽ¨å¥¨åŒ–㯠WebGLã«å½±éŸ¿ã‚’ã‚‚ãŸã‚‰ã™ã®ã‹ ウェブã®3Dグラフィックスを扱ã†æ–°ã—ã„仕様ã¨ã—ã¦ã€WebGPUãŒæ案ã•ã‚Œã¦ã„ã¾ã™ã€‚広ãæ™®åŠã—ãŸWebGLãŒã‚ã‚‹ä¸ã§ã€WebGPUã¨ã¯ã©ã†ã„ã£ãŸç›®çš„ã§ç”Ÿã¾ã‚Œã‚ˆã†ã¨ã—ã¦ã„ã‚‹ã®ã§ã—ょã†ã‹ï¼Ÿã€€æœ¬è¨˜äº‹ã§ã¯WebGLã¨WebGPUã®é•ã„ã¨ã€è¿‘æ³ã‚’紹介ã—ã¾ã™ã€‚ æ¥ç•Œã‚’震撼ã•ã›ãŸAppleã®OpenGLéžæŽ¨å¥¨åŒ– 今月6月上旬ã«é–‹å‚¬ã•ã‚ŒãŸWWDC 18ã§ç™ºè¡¨ã•ã‚ŒãŸmacOS 10.14 Mojaveã¨iOS 12ã®ã‚¦ã‚§ãƒ–ページã§ã¯ã€OpenGL/OpenCLãŠã‚ˆã³OpenGL ESã‚’éžæŽ¨å¥¨åŒ–ã™ã‚‹æ—¨ãŒè¨˜è¼‰ã•ã‚Œã¦ã„ã¾ã™ã€‚macOS 10.14ã¨iOS 12ã§OpenGLç‰ã¯å¼•ã続ã動作ã™ã‚‹ã‚‚ã®ã®ã€Metalã¸ã®ç½®ãæ›ãˆã‚’呼ã³ã‹ã‘ã¦ã„ã¾ã™ã€‚ â–²What’s New in macOSã«ã¯OpenGLã¨OpenC
WebGLã®åŸºæœ¬
WebGLを基本ã‹ã‚‰å¦ã¶æŽˆæ¥. ã“ã®è¨˜äº‹ã¯WebGLを基本ã‹ã‚‰æ•™ãˆã‚‹è¨˜äº‹ã§ã‚る。 ä»–ã®ã‚µã‚¤ãƒˆã«è¼‰ã›ã¦ã‚るよã†ãªæ˜”ã®OpenGLãŒæ›´æ–°ã•ã‚ŒãŸè¨˜äº‹ã§ã¯ãªã〠時代é…ã‚Œã®ã‚¢ã‚¤ãƒ‡ã‚¢ã‚’æ¨ã¦ã¦ã€ WebGLã¨ã¯ä½•ã‹ã€WebGLãŒã©ã†ã‚„ã£ã¦å‹•ãã‹ã«ã¤ã„ã¦ã€ç†è§£ã¸ã¨å°Žãã€å®Œå…¨ã«æ–°ãŸãªè¨˜äº‹ã§ã‚る。 WebGL2ã«èˆˆå‘³ãŒã‚ã‚Œã°ã“れをå‚ç…§ã—ã¦ä¸‹ã•ã„webgl2fundamentals.org 基本 基本 WebGLã®ä»•çµ„ã¿ WebGLã®ã‚·ã‚§ãƒ¼ãƒ€ãƒ¼ã¨GLSL WebGL State Diagram ç”»åƒå‡¦ç† WebGLã«ãŠã‘ã‚‹ç”»åƒå‡¦ç† WebGLã«ãŠã‘ã‚‹ç”»åƒå‡¦ç†ã€‚続ã 2Dã§ã®ç§»å‹•ã€å›žè»¢ã€æ‹¡å¤§ç¸®å°ã€è¡Œåˆ—計算 二次元ã§ã®ç§»å‹• 二次元ã§ã®å›žè»¢ 二次元ã§ã®æ‹¡å¤§ç¸®å° 二次元ã§ã®è¡Œåˆ—æ•°å¦ 3D 三次元ã®æ£æŠ•å½± 三次元é€è¦–投影 三次元ã®ã‚«ãƒ¡ãƒ© Lighting 三次元指å‘æ€§å…‰æº ä¸‰æ¬¡å…ƒç‚¹å…‰æº Spot Lighting St
[WebGL] Instanced Stereo Renderingを実装ã—ã¦ã¿ã‚‹ - Qiita
[WebGL] Instanced Stereo Renderingを実装ã—ã¦ã¿ã‚‹ WebGLã§ã€VRã«é–¢é€£ã™ã‚‹é«˜é€ŸåŒ–技術を実装ã—ã¦ã¿ãŸã¨ã„ã†è©±ã§ã™ã€‚ ã¯ã˜ã‚ã« VRã‚’è¡Œã†å ´åˆã€ä¸¡ç›®ã®æ˜ åƒã‚’レンダリングã™ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ã“ã®ãŸã‚ã€å˜ç´”ãªå®Ÿè£…ã§ã™ã¨å·¦å³ãã‚Œãžã‚Œã«å¯¾ã—ドãƒãƒ¼ã‚³ãƒ¼ãƒ«ã‚’発行ã™ã‚‹å¿…è¦ãŒã‚る為ã€éžVRã®å ´åˆã®å°‘ãªãã¨ã‚‚2å€ã®ãƒ‰ãƒãƒ¼ã‚³ãƒ¼ãƒ«ãŒå¿…è¦ã¨ãªã‚Šã¾ã™ã€‚WebGLã®å ´åˆã¯ã‚ªãƒ¼ãƒãƒ˜ãƒƒãƒ‰ãŒã‚‚ã£ã¨å¤§ãããªã‚‹ç‚ºã€äº‹æ…‹ã¯ä¸€å±¤æ·±åˆ»ã«ãªã‚Šã¾ã™ã€‚ 1回ã®ãƒ‰ãƒãƒ¼ã‚³ãƒ¼ãƒ«ã§ä¸¡ç›®ã®æ˜ åƒã‚’一度ã«æç”»ã™ã‚‹æ‰‹æ³•ã¨ã—ã¦ã€ä»¥ä¸‹ã®ã‚‚ã®ãŒæ案ã•ã‚Œã¦ã„ã¾ã™1: ジオメトリシェーダを利用ã™ã‚‹ã€‚ ã“ã®æ–¹æ³•ã¯ãƒ”クセルシェーダã®æ›¸ãæ›ãˆãŒä¸è¦ã€CPUå´ã‚³ãƒ¼ãƒ‰ã®ä¿®æ£é‡ãŒå°‘ãªã„ç‰ã®ç‚¹ã§å„ªã‚Œã¦ã„ã¾ã™ã€‚ã—ã‹ã—ã€é ‚点シェーダã®å¾®å°ãªä¿®æ£ãŒå¿…è¦ã€GPUã«ã‚ˆã£ã¦ã¯è‘—ã—ã„オーãƒãƒ˜ãƒƒãƒ‰ã‚’生ã˜ã‚‹ (660 GTXã§3x以上ã®ã‚¸ã‚ªãƒ¡ãƒˆãƒªã‚¹ãƒ«ãƒ¼ãƒ—ット低下
![[WebGL] Instanced Stereo Renderingを実装ã—ã¦ã¿ã‚‹ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/479d74d62950739fb2709462a3ea07b6c76f10a6/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzg1NzglMkZwcm9maWxlLWltYWdlcyUyRjE0ODA4NzU2MDg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTNjZmJjYWQ4NDE0YWJhOWNhYmFhMmY3YTg3NmZhNzM3%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df7d9dbec5221c237fe417df51626c950%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCV2ViR0wlNUQlMjBJbnN0YW5jZWQlMjBTdGVyZW8lMjBSZW5kZXJpbmclRTMlODIlOTIlRTUlQUUlOUYlRTglQTMlODUlRTMlODElOTclRTMlODElQTYlRTMlODElQkYlRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0wZTlkNDczOGRmZWIxOGYzZmE4NWQ3MGI2YWY0Njc4Nw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBZVlQmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz02NTJjMWZjMzY4NzgzZTlkNWVmYmE4NmJlYzM4ZGNmOQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D2760ee927610410ad34c2df144d6fce1)
three.js + ã‚ューブマップã§ãŠæ‰‹è»½IBL - Qiita
ã“ã®è¨˜äº‹ã¯ï¼ŒWebGL Advent Calendar 2016 16日目ã®è¨˜äº‹ã§ã™ã€‚ 今年も何もã—ã¦ãªã„ãªãã¨æ€ã„ãªãŒã‚‰ç”Ÿãã¦ã„ãŸã®ã§ã™ãŒã€WebGLã§è‰²ã€…æˆæžœã‚’挙ã’ã¦ã„ã‚‹å‹äººã«æ„ŸåŒ–ã•ã‚Œã¦é£›ã³å…¥ã‚Šå‚åŠ ã—ã¾ã—ãŸã€‚よã‚ã—ããŠé¡˜ã„ã—ã¾ã™ã€‚ 今回ã¯ç’°å¢ƒãƒžãƒƒãƒ—ã§ã‚ˆã利用ã•ã‚Œã¦ã„ã‚‹ã‚ューブマップを使ã£ã¦ã€WebGL上ã§æ“¬ä¼¼çš„ãªIBLã‚’ã€æ‹¡å¼µæ©Ÿèƒ½ã‚’利用ã™ã‚‹æ–¹æ³•ã¨ã—ãªã„方法ã®2ã¤å®Ÿè£…ã—ã¾ã—ãŸã€‚ ã“ã®è¨˜äº‹ã§ã¯å®Ÿè£…ã®ä¸ã§å¾—ãŸçŸ¥è¦‹ã‚’共有ã§ãã‚Œã°ã¨æ€ã„ã¾ã™ã€‚ 今回作ã£ãŸã‚‚ã® https://github.com/kaneta1992/cubemapIBL IBL(Image Based Lighting)ã¨ã¯ IBLã¨ç•¥ã™ã“ã¨ã‚‚ã‚る。実在ã™ã‚‹é¢¨æ™¯ã®å†™çœŸã‚„高精細ãªç”»åƒã‚’ライティングã®è‰²æƒ…å ±ã«ä½¿ç”¨ã—ã¦ã€ã‚·ãƒ¼ãƒ³ã‚’レンダリングã™ã‚‹æ–¹æ³•ã€‚広ã„レンジã®æ˜Žã‚‹ã•æƒ…å ±ã‚’è¨˜éŒ²ã§ãã‚‹HDRIを用ã„ã‚‹ã“ã¨ã§ã€è‡ªç„¶ãªå…‰ã¨é™°å½±ã‚’表ç¾ã§ãã‚‹
GLSL ã§å¤ªé™½ã£ã½ã„ã‚‚ã®ã‚’æã - Qiita
シェーダ書ããŸãã¦ã—ょã†ãŒãªã„ãƒžãƒ³ï¼ GLSL ã§æš–ã‚’å–ã‚ŠãŸã„ã¿ãªã•ã¾ã“ã‚“ã°ã‚“ã¯ã€‚🔥🔥🔥 世ã®ä¸ã«ã¯ãŸãã•ã‚“㮠シェーダ書ããŸãã¦ã—ょã†ãŒãªã„マン ãŒå±…ã‚‹ã¯ãšãªã‚“ã§ã™ãŒã€èº«åˆ†ã‚’明ã‹ã™ã“ã¨ã«ã‚ˆã‚Šæ‚ªã®çµ„ç¹”ã‹ã‚‰ç”Ÿå‘½ã‚’ç‹™ã‚れるå¯èƒ½æ€§ãŒã‚る彼らã¯ãŠã„ãれ㨠Advent Calendar ã«æŠ•ç¨¿ã™ã‚‹ã“ã¨ã‚‚ã¾ã¾ãªã‚Šã¾ã›ã‚“。悲ã—ã„ã§ã™ã。 ãã“ã§ã€ä¸€èˆ¬å¸‚æ°‘ã¨ã—ã¦å¹³ã€…凡々ã«ç”Ÿæ´»ã—ã¦ã„ã‚‹ç§ãŒä»£ã‚ã‚Šã«ã€GLSL ã§ä¸–ã®ä¸ã® GPU ã®æ¸©åº¦ã‚’一度ã§ã‚‚温ã‚られるよã†ã«ãŒã‚“ã°ã‚‰ãªãã¦ã¯ã¨ä¸€å¿µç™ºèµ·ã„ãŸã—ã¾ã—ãŸã€‚ GLSL ワークショップ 先日ã€GLSL ã®ãƒ¯ãƒ¼ã‚¯ã‚·ãƒ§ãƒƒãƒ—を開催ã—ã¾ã—ãŸã€‚ãã“ã§ã¯ãŸãã•ã‚“ã®ã‚·ã‚§ãƒ¼ãƒ€ä½œå“ãŒæŠ•ç¨¿ã•ã‚Œã€ã¾ã•ã« éš ã‚Œã‚·ã‚§ãƒ¼ãƒ€æ›¸ããŸãã¦ã—ょã†ãŒãªã„マン ã‚„ã€æœ‰æœ›ãª 新人シェーダ書ããŸãã¦ã—ょã†ãŒãªã„マン を発掘ã™ã‚‹ã“ã¨ãŒã§ãã¾ã—ãŸã€‚ã‚ã‚ŠãŒã¨ã†ã”ã–ã„ã¾ã—ãŸã€‚ ãã‚“ãªãƒ¯ãƒ¼ã‚¯ã‚·ãƒ§ãƒƒãƒ—ã§ç§ãŒæŠ•ç¨¿ã—ãŸ
[WebGL] 浮動å°æ•°ç‚¹ãƒ†ã‚¯ã‚¹ãƒãƒ£ã®æ‰±ã„ã§ãƒãƒžã£ãŸä»¶ - Qiita
å¿…è¦ãªæ‹¡å¼µæ©Ÿèƒ½ãã‚Œã§åˆã£ã¦ã¾ã™ã‹? 最近ã€WebGLã§é…延シェーディングã—ãŸã‚Šã™ã‚‹ã¨ã€ãƒ¢ãƒã‚¤ãƒ«ã§G-BufferãŒæã‹ã‚Œãªã„ãªã‚“ã¦ã“ã¨ãŒã‚ã£ãŸã€‚ ã„ã‚„ã€ã§ã‚‚OES_texture_floatã¯ç¢ºã‹ã«æ£å¸¸ã«getExtensionã§ãる。 CPUã§æ›¸ãè¾¼ã¿ã€GPUã§èªã¿å‡ºã™ã¨ã„ã†ã‚±ãƒ¼ã‚¹ ã‚ãã¾ã§ã€GPUå´ã§ã¯RenderTargetã¨ã—ã¦ä½¿ã‚ãšã€tetxture2Dã§èªã¿å‡ºã™ã¨è¨€ã†å ´åˆã«ã¯ç¢ºã‹ã«OES_texture_floatã®ã¿ã§å•é¡Œãªã„。 ãŸã ã—ã€ãƒ•ã‚£ãƒ«ã‚¿ã«LINEARã‚’ã‹ã‘ã‚‹ã®ã§ã‚ã‚Œã°ã€OES_texture_float_linearãŒå¿…è¦ã 。 half floatテクスãƒãƒ£ã‚’用ã„ãŸã„å ´åˆã¯ã€OES_texture_half_float,OES_texture_half_float_linearã‚’ãã‚Œãžã‚Œç”¨ã„ã‚Œã°è‰¯ã„。 ã“ã“ã¾ã§ã¯å¸¸è˜çš„ãªç¯„囲ã ã‚ã†ã€‚ GPUå´ã§æ›¸ãè¾¼ã¿ãŒå¿…è¦ãªã‚±ãƒ¼ã‚¹
![[WebGL] 浮動å°æ•°ç‚¹ãƒ†ã‚¯ã‚¹ãƒãƒ£ã®æ‰±ã„ã§ãƒãƒžã£ãŸä»¶ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/64137e17fe94cd36f30ea801aad3b2e618a8eac0/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNDE0MDIlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODg3Nzk_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTI0ZjJmYmEwM2RlODg0NjY2Zjc2M2VkNjUxODZhZDlh%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D9ca81c7f681d1121b3efbcbaa1f4894e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCV2ViR0wlNUQlMjAlRTYlQjUlQUUlRTUlOEIlOTUlRTUlQjAlOEYlRTYlOTUlQjAlRTclODIlQjklRTMlODMlODYlRTMlODIlQUYlRTMlODIlQjklRTMlODMlODElRTMlODMlQTMlRTMlODElQUUlRTYlODklQjElRTMlODElODQlRTMlODElQTclRTMlODMlOEYlRTMlODMlOUUlRTMlODElQTMlRTMlODElOUYlRTQlQkIlQjYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1kODgwYTJiYzRmMWY1OWQwMDIzMzE4Yzc4M2IwZWQyZg%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBreWFzYmFsXzE5OTQmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0yZjZiMDVkZjQ5MTUxYzI5YmEwNDAxYTA5ZDZiZTRhMw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Db5a262e6ac943043de206a3470d04bcb)
ã‚ãšã‹æ•°åè¡Œã®ã‚³ãƒ¼ãƒ‰ã§ç‰©ç†æ¼”算付ãシーンを構築ã§ãã‚‹ WebGL フレームワーク WhitestormJS - WebGL ç·æœ¬å±±
three.js ã‚’ã•ã‚‰ã«ãƒ©ãƒƒãƒ—ã—ãŸãƒ•ãƒ¬ãƒ¼ãƒ ワーク 今回ã”紹介ã™ã‚‹ã®ã¯ã€WebGL 使ã„ãªã‚‰èª°ã‚‚ãŒçŸ¥ã£ã¦ã„ã‚‹ã¨è¨€ã£ã¦ã‚‚éŽè¨€ã§ã¯ãªã„ three.js ã‚’ã€ã•ã‚‰ã«ã‚‚ã†ä¸€æ®µãƒ©ãƒƒãƒ—ã™ã‚‹ã“ã¨ã§ã‚ˆã‚Šä½¿ã„ã‚„ã™ãã™ã‚‹ãƒ•ãƒ¬ãƒ¼ãƒ ワークã€WhitestormJS ã§ã™ã€‚ Github ã‚„å…¬å¼ã‚µã‚¤ãƒˆã«ã¯ Examples ãŒæŽ²è¼‰ã•ã‚Œã¦ã„ã¾ã™ãŒã€WebGL ヘルパーライブラリã§ã‚ã‚‹ three.js ãªã©ã€ã‚³ã‚¢éƒ¨åˆ†ã«å¤–部ã®ãƒ©ã‚¤ãƒ–ラリを組ã¿è¾¼ã‚€ã“ã¨ã«ã‚ˆã£ã¦ã€é©šãã»ã©å°‘ãªã„コードã®è¨˜è¿°ã§ 3D ã®ã‚·ãƒ¼ãƒ³ã‚’構築ã§ãるよã†ã«å·¥å¤«ã•ã‚Œã¦ã„ã¾ã™ã€‚ 物ç†æ¼”ç®—ãªã©ã®ã‚²ãƒ¼ãƒ 開発ã«å¿…è¦ã¨ãªã‚‹æ©Ÿèƒ½ã‚‚è¿½åŠ ã™ã‚‹ã“ã¨ã§ã€ã‹ãªã‚Šåˆ©ä¾¿æ€§ã®é«˜ã„フレームワークã«ãªã£ã¦ã„るよã†ã§ã™ã€‚ 使ã„ã‚„ã™ã•ã‚’é‡è¦–ã—ãŸè¨è¨ˆã€ãƒ‰ã‚ュメントも完備 ã“ã® WhitestormJS ã§ã™ãŒã€å®Ÿã¯çµæ§‹æ˜”ã‹ã‚‰ãã®å˜åœ¨ã¯çŸ¥ã£ã¦ã„ã¾ã—ãŸã€‚ ã¡ã‚‡ã£ã¨å‰ã«è¦‹ãŸæ™‚ã¯ã€ä¸€è¦‹ã™ã‚‹ã¨é–‹ç™ºãŒæ¢
ã‚ã¾ã‚Šã«ã‚‚完æˆåº¦ã®é«˜ã™ãŽã‚‹ãƒ‘ーティクルã®ç¥žåŸŸï¼ ヘãƒã‚·ãƒ¼ã® WebGL 製サイトãŒå‡„ã™ãŽã‚‹ï¼ - WebGL ç·æœ¬å±±
ムービーã¨ã®å¢ƒç•Œã‚’æ„Ÿã˜ã•ã›ãªã„見事ãªæ¼”出 今回ã”紹介ã™ã‚‹ã®ã¯ã€ãƒ–ランデーã®éŠ˜æŸ„ã¨ã—ã¦ã€ãŠé…’ã«ã‚ã¾ã‚Šè©³ã—ããªã„æ–¹ã§ã‚‚耳ã«ã—ãŸã“ã¨ãŒã‚ã‚‹ã¨æ€ã‚れるã€ãƒ˜ãƒã‚·ãƒ¼ï¼ˆHennessy）ã®ã‚¦ã‚§ãƒ–サイトã§ã™ã€‚ ヘãƒã‚·ãƒ¼ã¯ã€ãƒ•ãƒ©ãƒ³ã‚¹ã®ã‚³ãƒ‹ãƒ£ãƒƒã‚¯ã¨å‘¼ã°ã‚Œã‚‹åœ°æ–¹ã§ç”Ÿç”£ã•ã‚Œã¦ã„る高級ブランデーã®ãƒ–ランドåã§ã™ã。……ã¨å‰ãã†ã«æ›¸ã„ã¦è¦‹ãŸã‚‚ã®ã®ã€ç§ã¯ãŠé…’ã¯å…¨ç„¶è©³ã—ããªã„ã®ã§ã€ãã®ç‚¹ã®è§£èª¬ã¯ã‚„ã‚ã¦ãŠãã¾ã™ã€‚ 今回ã®ã‚µã‚¤ãƒˆã¯ã€ç¾æ™‚点ã§ã® WebGL ã«ãŠã‘るパーティクル表ç¾ã¨ã—ã¦ã¯ã€é–“é•ã„ãªã世界éšä¸€ã®å‡ºæ¥æ „ãˆã¨æ–言ã§ãã¾ã™ã€‚ ムービー㨠WebGL レンダリングã¨ã®å¢ƒã„ç›®ãŒã‚ã‹ã‚‰ãªã„ã»ã©è¦‹äº‹ãªã‚·ãƒ¼ãƒ³é·ç§»ã‚‚å«ã‚ã€ã‚らゆる点ã§ä»–ã®è¿½éšã‚’許ã•ãªã„完璧ãªå®Œæˆåº¦ã¨ãªã£ã¦ã„ã¾ã™ã€‚ å…¬å¼ãƒ ービーをã•ã‚‰ã« WebGL ã§å½©ã£ãŸä½œå“ Youtube ãªã©ã§ãƒ˜ãƒã‚·ãƒ¼ã®æœ€è¿‘公開ã•ã‚ŒãŸå‹•ç”»ã‚’探ã—ã¦ã¿ã‚‹ã¨ã€ä»Šå›žã®ã‚µã‚¤ãƒˆã®èƒŒæ™¯ã«æ™‚折æµã‚Œã‚‹ã€ã‚ªãƒª
WebGL ã®ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ãƒ‘フォーマンスを感覚的ã«çŸ¥ã‚‹ | TECH BLOG
three.js 㧠WebGL ã®ã¯ãªã—。（ã¨ã„ã†ã‹ requestAnimationFrame ã ãªã€‚） stats.js 㧠60fps 出ã¦ã‚‹ã‹ã‚‰ã ã„ã˜ã‚‡ãƒ¼ã¶ãƒ¼ã¨æ€ã£ã¦ã„ã¦ã‚‚ã€å®Ÿéš›ã®ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°æ™‚間㌠1/60 秒ã§çµ‚ã‚ã£ã¦ã‚‹ã‹ 1/200 秒ã§ãŠã‚ã£ã¦ã‚‹ã‹ã¯ã‚ã‹ã‚‰ãã„ã®ã§ã™ã。ãã‚Œã¯ãƒ–ラウザ (Chrome) ãŒãƒªãƒ•ãƒ¬ãƒƒã‚·ãƒ¥ãƒ¬ãƒ¼ãƒˆã«åŒæœŸã—㦠(VSync) requestAnimationFrame ã‚’å‹•ã‹ã—ã¦ã„ã‚‹ã‹ã‚‰ã§ã€é€šå¸¸ã®æ¶²æ™¶ãƒ¢ãƒ‹ã‚¿ãƒ¼ã ã¨ãƒªãƒ•ãƒ¬ãƒƒã‚·ãƒ¥ãƒ¬ãƒ¼ãƒˆã¯ 60Hz ãªã®ã§ã€60fps ã«åˆ¶é™ã•ã‚Œã‚‹ã€ã¨ã„ã†ã‚ã‘。画é¢ãŒæ›¸ãæ›ã‚る速度以上ã«ãƒ‡ãƒ¼ã‚¿ã‚’書ãæ›ãˆã¦ã‚‚無駄ã ã‹ã‚‰ã€‚ Chrome ã§ã¯ãã®Â VSync ã‚’ã—ãªã„よã†ã«è¨å®šã§ãる。ã—ãªã„よã†ã«ã™ã‚‹ã¨ã€ç”»é¢æ›¸ã終ã‚ã£ãŸã‚ã¨ã«ã¤ãŽã®å‘¨æœŸã‚’ã¾ãŸãªããªã‚‹ã®ã§ã€å¯èƒ½ãªé™ã‚Šæœ€å¤§é™ã®é€Ÿåº¦ã§ requestAnimationFrame
ランã‚ング
ランã‚ング
ãŠçŸ¥ã‚‰ã›
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Richard Mattka | Portfolio
Graphtoy
æ¡ä»¶åˆ†å²ã®ãŸã‚ã«step関数を使ã†æ™‚ã®è€ƒãˆæ–¹ã‚’ã¾ã¨ã‚ã¦ã¿ãŸ - Qiita
https://app.famitsu.com/20161107_849726/
Microsoftã€Edgeã§WebVRを試験的ã«ã‚µãƒãƒ¼ãƒˆã€€
Moved…
{{#tags}}- {{label}}
{{/tags}}