【重要】サービス終了のお知らせ

Fork
2
Fav
5
View
9099
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • CoffeeScript 24 lines
  • HTML 114 lines
  • SCSS / Compass 28 lines

CSS ShaderでGoogle Mapを地球儀風にしてみる

chrome://flagsCSS Shaderを有効にしないと確認できません。

参考: Getting started with CSS custom filters

シェーダ内の定数などについてはこちらの記事でまとめています。

  • Google Mapの航空写真モードでiframeを読み込み。
  • CSS Shaderで球状に変形
  • JS側で回転部分を計算し、表示

URL欄に表示したいURLを入れて「SET」ボタンを押すと、地球儀の中に該当URLの内容を読み込みます。

  • CSS ShaderでGoogle Mapを地球儀風にしてみる
  • CSS ShaderでGoogle Mapを地球儀風にしてみる

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

edo_m18

Author

Unity/VRエンジニア。 最近のもっぱらの興味は機械学習(ディープラーニング)とレイマーチング(とレイトレ)。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by