Soumettre la recherche
Mettre en ligne
HTML5 Conference 2015 WebGLハンズオン資料
•
11 j'aime
•
3,150 vues
Kazuya Hiruma
Suivre
HTML5 Conference 2015のWebGLハンズオンの最初で話した資料です。
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 29
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
WebGL入門ハンズオン資料
WebGL入門ハンズオン資料
Kazuya Hiruma
WebGLことはじめ
WebGLことはじめ
Kazuya Hiruma
IoT Hub と Azure Funxtions とかで片桐ヒマボタンを作った話
IoT Hub と Azure Funxtions とかで片桐ヒマボタンを作った話
Koichi Ota
Frontend Fantasy 〜ミスリルの戦士たち〜
Frontend Fantasy 〜ミスリルの戦士たち〜
Masashi MATSUI
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
サーバを運用する時代は終わった
サーバを運用する時代は終わった
Yuki Ishikawa
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
Recommandé
WebGL入門ハンズオン資料
WebGL入門ハンズオン資料
Kazuya Hiruma
WebGLことはじめ
WebGLことはじめ
Kazuya Hiruma
IoT Hub と Azure Funxtions とかで片桐ヒマボタンを作った話
IoT Hub と Azure Funxtions とかで片桐ヒマボタンを作った話
Koichi Ota
Frontend Fantasy 〜ミスリルの戦士たち〜
Frontend Fantasy 〜ミスリルの戦士たち〜
Masashi MATSUI
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
サーバを運用する時代は終わった
サーバを運用する時代は終わった
Yuki Ishikawa
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
Takumi Ohashi
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
sairoutine
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
About SnapKit - Open source lab -
About SnapKit - Open source lab -
Daisuke Yamashita
Iron rubyとsilverlightとゲームと
Iron rubyとsilverlightとゲームと
kumaryu
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Yutaro Miyazaki
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方
Yusuke Wada
僕はどうしてもLibsassが使いたかったんだ!
僕はどうしてもLibsassが使いたかったんだ!
Masato Noguchi
Nodeにしましょう
Nodeにしましょう
Yuzo Hebishima
RailsのRailから解放される始めの一歩
RailsのRailから解放される始めの一歩
Masato Noguchi
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
pinmarch_t Tada
Yeoman ELT
Yeoman ELT
Jun Ishitsuka
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
Koji Nakamura
Begin cucumber-in-real-world
Begin cucumber-in-real-world
Kyosuke MOROHASHI
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
MySQL Fabricつらい
MySQL Fabricつらい
yoku0825
Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築
AimingStudy
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
AdobeTarget-AutomatedPersonalizationCertificate2016
AdobeTarget-AutomatedPersonalizationCertificate2016
Greg Wenzel
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
Naoki Matsuda
Contenu connexe
Tendances
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
Takumi Ohashi
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
sairoutine
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
About SnapKit - Open source lab -
About SnapKit - Open source lab -
Daisuke Yamashita
Iron rubyとsilverlightとゲームと
Iron rubyとsilverlightとゲームと
kumaryu
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Yutaro Miyazaki
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方
Yusuke Wada
僕はどうしてもLibsassが使いたかったんだ!
僕はどうしてもLibsassが使いたかったんだ!
Masato Noguchi
Nodeにしましょう
Nodeにしましょう
Yuzo Hebishima
RailsのRailから解放される始めの一歩
RailsのRailから解放される始めの一歩
Masato Noguchi
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
pinmarch_t Tada
Yeoman ELT
Yeoman ELT
Jun Ishitsuka
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
Koji Nakamura
Begin cucumber-in-real-world
Begin cucumber-in-real-world
Kyosuke MOROHASHI
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
MySQL Fabricつらい
MySQL Fabricつらい
yoku0825
Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築
AimingStudy
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
Tendances
(20)
スマホにおけるWebGL入門
スマホにおけるWebGL入門
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
JSでファミコンエミュレータを作った時の話
JSでファミコンエミュレータを作った時の話
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
About SnapKit - Open source lab -
About SnapKit - Open source lab -
Iron rubyとsilverlightとゲームと
Iron rubyとsilverlightとゲームと
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方
僕はどうしてもLibsassが使いたかったんだ!
僕はどうしてもLibsassが使いたかったんだ!
Nodeにしましょう
Nodeにしましょう
RailsのRailから解放される始めの一歩
RailsのRailから解放される始めの一歩
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
Yeoman ELT
Yeoman ELT
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
Begin cucumber-in-real-world
Begin cucumber-in-real-world
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
MySQL Fabricつらい
MySQL Fabricつらい
Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
En vedette
AdobeTarget-AutomatedPersonalizationCertificate2016
AdobeTarget-AutomatedPersonalizationCertificate2016
Greg Wenzel
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
Naoki Matsuda
Java script初心者のためのnode.jsで学ぶドローン制御プログラミング
Java script初心者のためのnode.jsで学ぶドローン制御プログラミング
健一 茂木
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
Shin Fujisawa
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション
第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション
Sayuri Tsukida
En vedette
(6)
AdobeTarget-AutomatedPersonalizationCertificate2016
AdobeTarget-AutomatedPersonalizationCertificate2016
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
Java script初心者のためのnode.jsで学ぶドローン制御プログラミング
Java script初心者のためのnode.jsで学ぶドローン制御プログラミング
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション
第3回 HTML5飯 少ない工数で豊かな表現!これが私のCSSアニメーション
Plus de Kazuya Hiruma
MESONプロジェクトから学ぶこれからのAR開発に必要なこと
MESONプロジェクトから学ぶこれからのAR開発に必要なこと
Kazuya Hiruma
PORTAL with Nreal in CES 2020 開発の学び @XR Hub
PORTAL with Nreal in CES 2020 開発の学び @XR Hub
Kazuya Hiruma
ARグラスで 魅力的な絵作り
ARグラスで 魅力的な絵作り
Kazuya Hiruma
AWE Nite ARKit3 Hackathon
AWE Nite ARKit3 Hackathon
Kazuya Hiruma
レイマーチ入門勉強会資料
レイマーチ入門勉強会資料
Kazuya Hiruma
MESONで手がけたARアプリ AR Developer Meetup #2
MESONで手がけたARアプリ AR Developer Meetup #2
Kazuya Hiruma
みんなレイ飛ばしてる?
みんなレイ飛ばしてる?
Kazuya Hiruma
VRゲーム制作楽しいよ! @UnityおとなのLT大会
VRゲーム制作楽しいよ! @UnityおとなのLT大会
Kazuya Hiruma
ElminaAR - Unity x ARKit 入門Meetup
ElminaAR - Unity x ARKit 入門Meetup
Kazuya Hiruma
今すぐ始められるモバイルVR〜あなたも今日からVRエンジニア〜
今すぐ始められるモバイルVR〜あなたも今日からVRエンジニア〜
Kazuya Hiruma
UnityでARKitハンズオン
UnityでARKitハンズオン
Kazuya Hiruma
すぐそこにある未来〜AR〜
すぐそこにある未来〜AR〜
Kazuya Hiruma
VRで酔わないコンテンツ作り
VRで酔わないコンテンツ作り
Kazuya Hiruma
WebVRコンテンツ制作入門
WebVRコンテンツ制作入門
Kazuya Hiruma
WebVRってこんなことできるよ!
WebVRってこんなことできるよ!
Kazuya Hiruma
そしてWebVR
そしてWebVR
Kazuya Hiruma
Unity入門ハンズオン
Unity入門ハンズオン
Kazuya Hiruma
WebVR 酔いづらいコンテンツの作り方
WebVR 酔いづらいコンテンツの作り方
Kazuya Hiruma
WebVRことはじめ
WebVRことはじめ
Kazuya Hiruma
集まっTail #5 LT
集まっTail #5 LT
Kazuya Hiruma
Plus de Kazuya Hiruma
(20)
MESONプロジェクトから学ぶこれからのAR開発に必要なこと
MESONプロジェクトから学ぶこれからのAR開発に必要なこと
PORTAL with Nreal in CES 2020 開発の学び @XR Hub
PORTAL with Nreal in CES 2020 開発の学び @XR Hub
ARグラスで 魅力的な絵作り
ARグラスで 魅力的な絵作り
AWE Nite ARKit3 Hackathon
AWE Nite ARKit3 Hackathon
レイマーチ入門勉強会資料
レイマーチ入門勉強会資料
MESONで手がけたARアプリ AR Developer Meetup #2
MESONで手がけたARアプリ AR Developer Meetup #2
みんなレイ飛ばしてる?
みんなレイ飛ばしてる?
VRゲーム制作楽しいよ! @UnityおとなのLT大会
VRゲーム制作楽しいよ! @UnityおとなのLT大会
ElminaAR - Unity x ARKit 入門Meetup
ElminaAR - Unity x ARKit 入門Meetup
今すぐ始められるモバイルVR〜あなたも今日からVRエンジニア〜
今すぐ始められるモバイルVR〜あなたも今日からVRエンジニア〜
UnityでARKitハンズオン
UnityでARKitハンズオン
すぐそこにある未来〜AR〜
すぐそこにある未来〜AR〜
VRで酔わないコンテンツ作り
VRで酔わないコンテンツ作り
WebVRコンテンツ制作入門
WebVRコンテンツ制作入門
WebVRってこんなことできるよ!
WebVRってこんなことできるよ!
そしてWebVR
そしてWebVR
Unity入門ハンズオン
Unity入門ハンズオン
WebVR 酔いづらいコンテンツの作り方
WebVR 酔いづらいコンテンツの作り方
WebVRことはじめ
WebVRことはじめ
集まっTail #5 LT
集まっTail #5 LT
Dernier
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Dernier
(7)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
HTML5 Conference 2015 WebGLハンズオン資料
1.
THREE.JSハンズオン 面白法人カヤック 比留間 和也
2.
自己紹介
3.
面白法人カヤック 技術部/比留間 和也
4.
お台場合衆国 リアルスコープブース サイネージ カヤック サイコロ給 EBICHU CUBE ルービックキューブ
5.
THREE.JSでインタラクションを作る 本題
6.
THREE.JSとは
7.
Three.js WebGLを劇的に使いやすくしてくれるライブラリ
8.
オブジェクトを表示する STEP1
9.
突然ですが質問です。
10.
映画撮影に必要なものは?
11.
• 役者 • カメラ •
ライト • シーン • 再生機
12.
• 役者 • カメラ •
ライト • シーン • 再生機 →オブジェクト →カメラ →ライト →シーン →レンダラー Three.jsで考えると・・・
13.
イメージ
14.
イメージ
15.
イメージ
16.
イメージ
17.
イメージ シーン
18.
イメージ THREE.PerspectiveCamera THREE.Mesh THREE.DirectionalLight THREE.Scene THREE.Mesh
19.
THREE.Mesh?
20.
THREE.Meshは 「形」と「材質」で決まる
21.
形 ・・・ Geometry e.g.
THREE.BoxGeometry, THREE.PlaneGeometry, etc. 材質 ・・・ Material e.g. THREE.MeshLambertMaterial, THREE.MeshPhongMaterial, etc.
22.
ハンズオンの前に補足
23.
座標系を理解する
24.
実際にやってみましょう
25.
マウスでオブジェクトを選択する STEP2
26.
THREE.JSの世界は”3D” スクリーンは”2D”
27.
マウスが指し示す場所はどこか
28.
“点” ではなく ”線”
29.
実際にやってみましょう
Télécharger maintenant