SVGをcanvasで使う - Qiita
この記事はACCESS Advent Calendar 1日目の記事です。 こんにちは ACCESS開発本部IoT開発部の渡辺 (@sassy_watson) です。 今回は私がSVGをcanvasで使う方法についての記事を書こうと思います。 SVGとCanvas SVGはただのベクターグラフィックスというだけでなく、 マスクやクリップだったらグラデーションやフィルターだったり いろいろ高機能なのが魅力です。 ただ、XMLなのでJavaScriptでなにかしようするときのDOM操作が面倒くさいです。 一方、CanvasはAPIが簡単なのでJavaScriptで扱いやすいというメリットがあります。 SVGをCanvasで使う そこで、SVGで使いたい機能をSVGで書いて、canvasに貼り付けるというアプローチが考えられます。 素材はillustratorでつくって、Canvasでペタペタ貼
Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを
WebGLの現状と未来を、Grimoire.jsを生んだスーパークリエータに聞いてきた！
WebGLの現状と未来を、Grimoire.jsを生んだスーパークリエータに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、東京理科大学4年の石井翔さんです。 石井さんのセッション「WebGLの今とこれから ~今のWeb開発で使うからこそ知っておきたい周辺技術~」に関するスライド資料は、こちらで公開されています。 スライド資料 （注: 重いのとモバイルから見えないのはご容赦ください by 石井翔さん） 白石: 本日は取材をお受けいた
Three.js対応。Webブラウザ上で3Dモデルを作成·ThreeFab MOONGIFT
ThreeFabはTree.jsに対応した3DモデルをWebブラウザ上で作成できるソフトウェアです。 Three.jsはJavaScriptで高度な3Dモデルを描画するエンジンですが、そのモデル作成はやはり大変な作業になります。そこで使ってみたいのがThreeFabになります。 最初の画面です。3Dモデルが奇麗に描かれていて格好いいです。 マウスで視点の変更もできます。 モデルを追加できます。 回転したりライトを変更することもできます。 最終的に作成されるコードを使ってThree.jsで3Dモデルを描けます。 こんな感じにモデルを追加していきます。 ThreeFabを使えばThree.jsで使えるモデルをWebブラウザ上で作成できます。S、D、X、スペースキーがそれぞれショートカットキーとして使えます。最初、慣れるまではなかなか操作が難しいかも知れません。ThreeFabはさらにアニメーシ
【旧版】Three.js入門 (全14回) - プログラミングならドットインストール
WebGLをサポートする3D描画ライブラリ、Three.jsについて学んでいきます。
WebGLStudio
3D Development environment for the web. WebGLStudio (formerly known as WebGLStudio) is a platform to create interactive 3D scenes directly from the browser. It allows to edit the scene visually, code your behaviours, edit the shaders, and all directly from within the app. Try WebGLStudio.js Example Source on GitHub Documentation Learn or you can use the latest version (more features and more bugs)
Herlock.js for HTML5 - JavaScriptで高パフォーマンスなゲームを開発できるHerlockのブラウザ版 MOONGIFT
iOS/Androidアプリをワンソースで…というのは誰しもが夢見ることではないでしょうか。しかし現実はそうそう甘くなく、打ちのめされた人も多いでしょう。なんでもワンソースは無理がありますが、一部の分野であればこなせるようにはなっています。 3Dや高機能なゲームであればUnityがあります。もっとカジュアルなゲームであればJavaScriptで開発できるHerlockがあります。そしてさらにHerlockをHTML5として動作させようと言うプロジェクトがHerlock.js for HTML5です。 Herlock.js for HTML5の使い方 例としてこういった図形を描く場合です。 var stg,bmp; new Image( "./img/check.png").onload = function(){ stg = addLayer( new Stage()).content;
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
three.js - examples