Daily CSS DesignHi! I'm a web designer and this is my side projectThe goal was to create one design every day for a year. All shapes, patterns and colors are made by coding. Read more
Web Graphic Experiments
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.3
スマホã§ã‚‚WebGLãŒå¿«é©ã«å‹•ã! HTML5ã§ä½“験ã™ã‚‹3D表ç¾ã®å¯èƒ½æ€§ – ICS MEDIA
WebGLウェブ・ジーエルã¨ã¯ãƒ–ラウザã§3D表示ã™ã‚‹ãŸã‚ã®æ¨™æº–仕様。ã„ã¾ã‚„スマートフォンをå«ã‚€ã™ã¹ã¦ã®ãƒ–ラウザã§WebGLãŒå‹•ä½œã—ã¾ã™ã€‚WebGLを使ãˆã°GPUã«ã‚ˆã£ã¦æç”»ãŒé«˜é€ŸåŒ–ã•ã‚Œã‚‹ãŸã‚高度ãªã‚°ãƒ©ãƒ•ã‚£ã‚«ãƒ«è¡¨ç¾ãŒå¯èƒ½ã«ãªã‚Šã¾ã™ã€‚ WebGLを使ãˆã°ä¸»ã«æ¬¡ã®ã‚ˆã†ãªã‚³ãƒ³ãƒ†ãƒ³ãƒ„開発ã«å½¹ç«‹ã¡ã¾ã™ã€‚ 3Dモデルã®è¡¨ç¤º ゲームコンテンツ データビジュアライゼーション プãƒã‚°ãƒ©ãƒŸãƒ³ã‚°ã‚¢ãƒ¼ãƒˆ é…力的ã§è¯ã‚„ã‹ãªç”»é¢æ¼”出（広告系サイトãªã©ï¼‰ ã‹ã¤ã¦ã¯Flash Playerã‚„Unity Web Playerã®ã‚ˆã†ãªãƒ–ラウザ・プラグインを使ã‚ãªã‘ã‚Œã°3D表ç¾ã¯ã§ãã¾ã›ã‚“ã§ã—ãŸãŒã€WebGLã®ç™»å ´ã«ã‚ˆã£ã¦ãƒ—ラグイン未æ載ã®ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ã®ãƒ–ラウザã§ã‚‚3D表ç¾ãŒå®Ÿç¾å¯èƒ½ã«ãªã‚Šã¾ã—ãŸã€‚ 本記事ã§ã¯WebGL入門者ã«ã‚€ã‘ã€æ•°ç§’ã§è©¦ã›ã‚‹ã‚ªãƒªã‚¸ãƒŠãƒ«ã®WebGLã®HTMLデモを多数掲載。ã©ã‚Œã‚‚スマートフォンã®ãƒ–ラウザã§ã‚‚利
JavaScript 3Dレンダリングエンジンã®Three.jsを試ã™
ã“ã‚“ã«ã¡ã¯ã€‚ KRAYアルãƒã‚¤ãƒˆã®æµ…æµ·ã§ã™ã€‚ 今回ã¯ã€æœ€è¿‘ã¡ã¾ãŸã§å™‚ã®Three.jsã§éŠã‚“ã§ã¿ã‚ˆã†ã¨ãŠã‚‚ã„ã¾ã™ã€‚ http://github.com/mrdoob/three.js webgl対応ã®ãƒ–ラウザã§è¦‹ã¦ã„ã‚‹æ–¹ã¯ã€å³ä¸Šã«3Dã®ãƒœãƒƒã‚¯ã‚¹ãŒè¡¨ç¤ºã•ã‚Œã¦ã„ã‚‹ã¨æ€ã„ã¾ã™ã€‚ Three.jsを使ãˆã°ã€ã“ã®ã‚ˆã†ãªã“ã¨ã‚’ç°¡å˜ã«Javascriptã§å®Ÿç¾ã§ãã‚‹ã®ã§ã™ã€‚ åŠä¿¡åŠç–‘ã§ä½¿ã£ã¦ã¿ãŸã¨ã“ã‚ã€ãŸã—ã‹ã«Three.jsã§ã¯ã€3D特有ã®è¡Œåˆ—計算や数å¦çš„æ€è€ƒã‚’ã›ãšã¨ã‚‚ã€3Dを表示ã€æ“作ã™ã‚‹ã“ã¨ãŒã§ãã¾ã—ãŸã€‚ 「ã¡ã‚‡ã£ã¨ã®ãƒ—ãƒã‚°ãƒ©ãƒ ã§3DãŒã§ãる。〠ã“ã®é¢ç™½ã•ã‚’皆ã•ã‚“ã«å±Šã‘ãŸã„ã§ã™ã€‚ 目次 立方体を表示ã™ã‚‹ 光をã‚ã¦ã‚‹ テスクãƒãƒ£ã‚’貼り付ã‘ã‚‹ マウスã§å›žè»¢ã•ã›ã‚‹ マウスã§ç§»å‹•ã•ã›ã‚‹ クリック判定ã™ã‚‹ Three.js web上ã«ã¯ã€HTML5ã®canvasを利用ã—ãŸæ§˜ã€…ãªã‚µãƒ³ãƒ—ルページやアプリケーシ
HTMLè¦ç´ ã®ä¸Šã«WebGLã®æ画をåˆæˆã—ãŸã‚‰ã©ã†ãªã‚‹ã® - 最速ãƒãƒ¥ãƒ‘ã‚«ãƒ–ãƒ©ç ”ç©¶ä¼š
ã¿ãŸã„ãªã“ã¨ã‚’先週ã€ã´ã‚ãŸã‚“ã¨è©±ã—ã¦ã„ã¦ã§ã™ã。実際ã©ã†ãªã‚‹ã®ã‹è©¦ã—ã¦ã¿ã¾ã—ãŸã€‚ã“ã†ãªã‚Šã¾ã™ã€‚ 赤ã„点線ã®æž ㌠WebGL を有効ã«ã—㟠canvas ã§ã€ä¸ã®é’ã„三角形㯠WebGL ã§æç”»ã•ã‚Œã¦ã„ã¾ã™ã€‚後ã‚ã®å†™çœŸã¨ã€ŒGL Overlay Testã€ã¨ã„ã†æ–‡å—ã¯é€šå¸¸ã® HTML ã§ã™ã€‚ 一見ã¡ã‚ƒã‚“ã¨æç”»ã•ã‚Œã¦ã„るよã†ã«è¦‹ãˆã¾ã™ãŒã€å·¦å´ã®åŠé€æ˜Žã®ä¸‰è§’å½¢ãŒã€åŠ ç®—åˆæˆã—ãŸã‚ˆã†ãªæç”»çµæžœã«ãªã£ã¦ãŠã‚Šã€å°‘ã—変ã§ã™ã€‚本æ¥ã§ã‚ã‚Œã°ã‚‚ã†å°‘ã—æš—ã„色ã§æç”»ã•ã‚Œã¦ã„ã‚‹çˆã§ã™ã€‚ã“れ㯠Chrome/Firefox ã‚ã‚‹ã„㯠Mac/Windows ã‚’å•ã‚ãšåŒã˜ãªã®ã§ã€ä»Šã®ã¨ã“ã‚WebGL ã®æç”»çµæžœã‚’åŠé€æ˜Žã§åˆæˆã™ã‚‹ã¨ç¢ºå®Ÿã«ãŠã‹ã—ããªã‚‹ã®ã§ã€ã‚„ã‚ãŸã»ã†ãŒã„ã„ã¨è¨€ãˆã¾ã™ã€‚ãŒã€é€†ã«è¨€ãˆã°ã€å®Œå…¨ã«ä¸é€æ˜Žã‹å®Œå…¨ã«é€æ˜Žãªéƒ¨åˆ†ã¯æ£ã—ãåˆæˆã•ã‚Œã‚‹ã®ã§ã€é™å®šçš„ã«ã¯ä½¿ãˆã‚‹ã¨ã‚‚言ãˆã¾ã™ã€‚（æç”»çµæžœã«ã‚¢ãƒ³ãƒã‚¨ã‚¤ãƒªã‚¢ã‚¹ãŒã‹ã‹ã£ã¦ã„ã‚‹å ´
yktmt blog: MMDModel on THREE.js
2010å¹´12月31日金曜日 MMDModel on THREE.js THREE.jsを利用ã—ã¦MMDã®ãƒ¢ãƒ‡ãƒ«ãƒ‡ãƒ¼ã‚¿ã‚’表示ã—ã¾ã™ã€‚ ã“ã“ã«ãƒ¢ãƒ‡ãƒ«ãƒ‡ãƒ¼ã‚¿(.pmd)ã¨ãƒ†ã‚¯ã‚¹ãƒãƒ£(.bmp .png .tga)をアップãƒãƒ¼ãƒ‰ã™ã‚‹ã¨ã€ã“ã“ã§é–²è¦§ã§ãã¾ã™ã€‚ 動作確èªã¯Chromium(10.0.614.0)ã¨Chromeã§è¡Œã„ã¾ã—ãŸã€‚インスパイア元ã®THREE.js demoã«ã‚ˆã‚‹ã¨ã€"webGL"コンテã‚ストã¯Chrome8/9 or Firefox4ã€"2d"コンテã‚ストã¯Chrome推奨ã ãã†ã§ã™ã€‚ ãŠè©¦ã—ミクã•ã‚“ 追記 : ライトãªã—版を用æ„ã—ã¾ã—ãŸã€‚ テクスãƒãƒ£ã‚’ã»ã¨ã‚“ã©ä½¿ã‚ãªã„モデルãªã‚‰Firefox3ã§ã‚‚閲覧ã§ãã¾ã™ã€‚ã“ã¡ã‚‰ã‹ã‚‰ã©ã†ãžã€‚ ソースコードã¯ä¸‹è¨˜ã«ä¸€å¼ç½®ã„ã¦ã‚ã‚Šã¾ã™ã€‚ http://www.yktmt.com/threemmd/ å‚考ページ 御本尊 : h
グーグルãŒO3Dã®æ–¹é‡å¤‰æ›ã€‚WebGLã«æ¨™æº–を統一ã—ã€O3Dã¯JavaScriptライブラリã¸
Webブラウザ上ã§3D表示（立体表示ã§ã¯ãªãã€é 近法ãªã©ã‚’用ã„ãŸè¡¨ç¤ºï¼‰ã‚’è¡Œã†ãŸã‚ã®ä»•æ§˜ã¨ã—ã¦ã€ã‚°ãƒ¼ã‚°ãƒ«ã¯æ˜¨å¹´ã®4月ã«O3Dã®é–‹ç™ºã‚’発表ã—ã€ä¸€æ–¹ã§ãƒ¢ã‚¸ãƒ©ã‚’ä¸å¿ƒã«ã—ãŸWebGLã‚‚ãれ以å‰ã‹ã‚‰æ¨™æº–仕様ã¨ã—ã¦é–‹ç™ºãŒé€²ã‚られã¦ã„ã¾ã—ãŸã€‚ 先週5月7日付ã‘ã®ã‚°ãƒ¼ã‚°ãƒ«ã®ã€ŒThe Chromium Blogã€ã«ãƒã‚¹ãƒˆã•ã‚ŒãŸã‚¨ãƒ³ãƒˆãƒªã€ŒThe future of O3Dã€ã§ã€ã‚°ãƒ¼ã‚°ãƒ«ã¯O3Dã¯ã“ã‚Œã¾ã§ã®æ–¹é‡ã‚’変更ã—ã€WebGLをベースã¨ã—ãŸJavaScriptライブラリã¨ã™ã‚‹ã“ã¨ã‚’明らã‹ã«ã—ã¾ã—ãŸã€‚ã“ã‚Œã«ã‚ˆã‚Šã€Webブラウザã§ã®3D表示ã®æ¨™æº–APIã¯WebGLã«ä¸€æœ¬åŒ–ã•ã‚Œã¾ã™ã€‚ 性能ã¨ç’°å¢ƒã«å¯¾ã™ã‚‹WebGLã®æ‡¸å¿µãŒæ‰•æ‹ã•ã‚ŒãŸ グーグルãŒWebGLã§ã¯ãªãO3Dを開発ã—ã¦ã„ãŸç†ç”±ã¨ã—ã¦ã€WebGLã«é–¢ã™ã‚‹2ã¤ã®æ‡¸å¿µãŒã‚ã£ãŸã“ã¨ã‚’明らã‹ã«ã—ã¦ã„ã¾ã™ã€‚ 1ã¤ã¯WebGLã®æ€§èƒ½ã§ã™ã€‚WebGLã¯HTML5ã®Canva
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Sketch - WebGL Noise 210302a
{{#tags}}- {{label}}
{{/tags}}