タグ

webglとsvgに関するbleu-bleutのブックマーク (2)

  • 君は使い分けられるか?CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA

    ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか? 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか? この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSSSVG・Canvas(WebGL)の3つについて、それぞれのできること・できないこと(得意・不得意)を作例とともに紹介します。 クイズ:どうやって実現する? webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSSSVG・Canvas(WebGL)のいずれかを中心に実装されています

    君は使い分けられるか?CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
    bleu-bleut
    bleu-bleut 2020/05/21
    「htmlと親和性が高く簡単に使えるCSS」「パスや図形描画に秀でたSVG」「GPUを使った高速なピクセル演算が特徴のCanvas(WebGL)」
  • 【第22回 HTML5とか勉強会レポート】 Processing.js、SVG、WebGL。HTML5周辺のグラフィック関連技術

    HTML5による最新Webアプリ 2011年10月26日、品川グランドセントラルタワーのマイクロソフト品川社にて、「第22回 HTML5とか勉強会」が開催された。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナー向けの勉強会だ。今回のテーマは「グラフィック関連API」。当日の様子をお伝えしよう。 Processing.jsってなんだ? まず、ゼロベースの田中氏(@dotimpact)からプレゼンがスタートした。田中氏は美術大学で非常勤講師をしたり、Processingの入門書執筆なども手掛けている。 Processingとは 田中氏のプレゼンは、Processingの紹介から始まった。 田中氏の@ITでのProcessingの記事「Processingの対話式スケッチプログラミングで遊ぼう」も参照いただきたい。 Processingは2001年、MITメディア

    【第22回 HTML5とか勉強会レポート】 Processing.js、SVG、WebGL。HTML5周辺のグラフィック関連技術
  • 1