IsometricSass - CSSだけで実現する3Dライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で3Dを描くのは大変です。多くの場合、CanvasであったりWebGLを使いますが、そのためのライブラリを利用しなければなりません。覚えることもたくさんあり、ちょっとした表示を行うのには不便です。 そこで使ってみたいのがIsometricSassです。Sassライブラリとなっており、CSSだけで3D表現を実現できます。 IsometricSassの使い方 段階的に紹介します。まずテキストを斜めに表示する例。 グリッド。 パネル。 枠線。 エッジ。ちょっと厚みが感じられます。 影付き。 キューブ。 グリッドの中で浮かせています。 アニメーションさせた例です。 さらに影を付けます。 キューブの回転。 上記のテクニックを組み合わせることで、部屋のような表現も。 Isometric
CSSとjavascriptで創る軽量な3D表現ライブラリ「voxel.css」
近年、ブラウザの発展やWEBGLなどの技術的な発展によりWEB上でも3Dを用いたクリエイティブな表現が多く取り入れられています。今日紹介するのはCSSとjavascriptで創る軽量な3D表現ライブラリ「voxel.css」です。 空間上にオブジェクトを配置したり、定めた領域・面にテクスチャを貼ってオブジェクトを生成したりといった事が簡単に実現可能となっています。 詳しくは以下 上記は立方体に、テキスチャを張り込んだもの。GPUで描画され、立体的に回転させることも可能、PNG・GIFアニメ・SVGといった様々なフォーマットをテキスチャとして利用可能です。その他にも、様公式サイトに公開されている「voxel.css • Demo」からは触りながら機能を確かめることができます。 ソースコードはGithubにて公開されており、ライセンスはMIT Licenseとなっております。サイト制作のアクセ
Works | 株式会社ワントゥーテン｜1→10,Inc.
ワントゥーテンは「新たな空間=XR」や「新たな存在=AI」で、近未来を実現するクリエイティブカンパニーです。
Works | 株式会社ワントゥーテン｜1→10,Inc.
ワントゥーテンは「新たな空間=XR」や「新たな存在=AI」で、近未来を実現するクリエイティブカンパニーです。
3Dを基礎から勉強する 再開 - デジタル・デザイン・ラボラトリーな日々
このブログはもともと３Dのことを勉強したいと思って始めたわけだが、途中で射影変換やコンピュータビジョンに興味が移ってしまったので、原点に戻る意味でも３Dについて再開する。 私の場合、ある程度理解してからでないとブログを書かないので、理解するまでに時間がかかると記事が増えない。でも、そこはもう少しゆるくして、どこに悩んでいるとかってことも書いていくことで記事を多くしていく予定です。 過去記事を見ると、３Dについてフラットシェーディングまで書いたところで止まっていて、そこからは2Dのテクスチャマッピングや射影変換になっていた。 ３Dでも立方体にテクスチャマッピングする予定だったわけだが、はや1年以上経ってしまった。 再開にあたり、とりあえず３Dモデルを表示したいと思ったわけですね。 ネットで探すわけですが、ライブラリやOpenGLを使用したものばかり、基礎からなのでライブラリを使わないで自前で
Flashゲーム講座＆ASサンプル集【３Ｄベクトルの関数を作ろう】
ベクトルの型 ここでは、ベクトルをオブジェクト形式で表現しました。配列でもいいのですが、 見た目にわかりやすくしたかったのでこの方法を取っています。 ここで紹介する３Ｄベクトルはすべてこの形式で扱います。
視差無し立体視のススメ - とあるOculusRift使いの備忘秘録
本記事は こりんさんに続く、Oculus Rift Advent Calendar 2014の第18日目の記事となります。 対象読者は、「DK2 を購入したけど、日常的に楽しめるゲームも立体視動画もまだ少ないので、 主に2Dの動画(ライブ動画、MMD動画、R18動画等）を楽しんでいる人達」向けになります。 ■はじめに 立体映画ブームの到来(2008) http://eiga.com/extra/oguchi/1/ 「3D世紀 立体映画の100年」(2012) http://www.4gamer.net/games/017/G001762/20121031071/ この辺りを読みますと、3D映像技術の発達が商業的な立体映画ブームを何度も巻き起こしてきたことが分かります。 一方の個人制作では、例えば、ニコニコ動画の総動画数 約1100万件の中に立体視タグが付いているものは786件しか無く、ごく
Webページで3Dグラフィックを表示する – NecoTech
今回はBlenderで自作した3DグラフィックをWebページ上で表示する方法を紹介いたします。 Blenderでグラフィックを作成する様子：（クリックすると拡大します） Webページで表示する様子： 実際にWeb上で表示した動画のページはこちらです。 （Chrome、Firefox最新版、IE11以上のブラウザをご利用ください） データ処理の流れ 3Dグラフィックを表示する際に利用する技術はHTML5のWebGLです。Blenderで3Dグラフィックのオブジェクトを作成し、ChromeやIE11でWebGLを利用すれば、グラフィックをWebページで表示できます。 Blenderでモデリングしたオブジェクトを、さまざまなファイル形式で外へのエクスポートが可能です。今回では平文（PlainTextObj）であるObjフォーマットを採用します。（Objフォーマットについてこちらの英語のページをご
Canvas context 2Dで自作3Dエンジンを作る - jsdo.it - Share JavaScript, HTML5 and CSS
Canvas context 2Dでポリゴンを描く 【更新履歴】 2013.04.13 Matrixのupdateを最適化しました。 2013.04.12 ライティングの計算処理が間違っていたのでそれを修正。 2013.04.11 テクスチャの指定にURLテキストを指定できるよう修正。 2013.04.09 Faceクラスに分割数を渡せるよう修正しました。 2013.04.08 フォグ、ライティング、ワイヤーフレームのON/OFFができるスイッチを追加しました。 2013.04.08 lookAtの固定・非固定を実装しました。 色テクスチャの最適化しました。 陰の処理を最適化しました。 2013.04.07 Particleクラスを実装。空間内にドットを配置できるようにしました。 さらに、マテリアルにテクスチャ以外に色を指定できるようにしました。 2013.04.07 クリップ空間外のもの
3Dプログラミング基礎知識(1) - Tech-Sketch
3Dプログラミングの基礎知識(1) はじめに 主にiPhone/AndroidからOpenGL ESを使って3D表現を行う場合に必要となる基礎知識についてまとめていきたいと思います。 基礎の基礎から説明して行くため、言語や3Dライブラリ(DirectX/OpenGL)に依存しない情報が多くなります。OpenGLに限らず「C++ + DirectX」などの環境で開発を行う人もどうぞ。 内容 5回ぐらいに分けて以下のような内容を書いていきたいと思います。 モデルを構成する頂点情報、面情報 画面に描画されるまでの流れ、平行移動・回転・拡縮行列（ワールド変換） カメラ、Zバッファ 法線、ライティング 頂点シェーダ、ピクセルシェーダ（フラグメントシェーダ） 座標系 3D表現を行う為には3次元の座標系をどのように定義するか決める必要があります。 2Dの場合はX軸、Y軸で座標系を表しますが、3Dの場
wgld.org | WebGL: シェーダのコンパイルとリンク |
積み重ねてきたもの 当サイトのテキストも、ナンバリングで言えば 11 番目のテキストです。散々基本的な部分ばかりやってきたので、いまだにポリゴン一枚すら描画できていませんね。あはは…… まぁ、何事も基本が大事ということで、ここまで積み上げてきた知識を総動員して、WebGL でポリゴンをレンダリングするための最終ステップに入りましょう。やるべきことの予備知識は既に解説してきました。あとはその手順を知るだけでポリゴンは描画できます。まずは、レンダリングに至る手順を大まかに確認しておきましょう。 HTML から canvas エレメントを取得 canvas から WebGL コンテキストの取得 シェーダのコンパイル モデルデータを用意 頂点バッファ( VBO )の生成と通知 座標変換行列の生成と通知 描画命令の発行 canvas を更新してレンダリング ここに挙げたなかで、現時点で概念を全く解説
wgld.org | WebGL: 行列(マトリックス)の基礎知識 |
お店の前にできるあれではなくて リアルタイム 3D レンダリングの世界では、行列が頻繁に登場します。 ここで言う行列とは、数学的な意味での行列です。英語で言うと Matrix (マトリックス)ですね。 一口に行列と言ってしまえば簡単そうに聞こえますが、行列にも様々な種類がありますし、その計算方法はそれなりに難解というか面倒です。簡単に言葉として説明してしまうと、行列とは数字を並べた箱のようなイメージのもので、文字通り数字が縦横に行列を形成しています。行列は普段の生活のなかではまずお目にかかることがないものだと言えますが、3D レンダリングの世界においては欠かせない存在のひとつです。 なぜ行列が必要なのか 行列が 3D レンダリングの世界に欠かせない存在だと言われても、いまいちピンとこない人もいるでしょう。そもそも、どうして行列がそこまで取り沙汰されるのでしょうか。 三次元空間をシミュレート
wgld.org | WebGL: レンダリングのための下準備 |
準備しなければならないもの 前回は 3D 描画のための基礎知識をおさらいしました。Z 座標の扱いを決める座標系の話や、座標変換の種類について解説しました。今回は、実際に WebGL で描画を行なうために準備しなければならないものについてお話します。 まず最初に言いますが、ここでは HTML や javascript に関する基本的な事柄については解説しません。もし、意味のわからない単語や言い回しが出てきた場合には各自調べてください。最低限の知識は有しているという前提で話をしますので、その点はご理解ください。 HTML の準備 さて、以前のテキスト(WebGL を始める前に canvas を知る)でも書いたように、WebGL は canvas を描画領域として利用します。当然、WebGL を使うウェブページでは HTML 内に canvas タグを含めておく必要があります。 また、その ca
3D、カメラ周りの勉強中なので、その情報集め。あと理解したもののメモ - Qiita
3Dについて勉強したのでその備忘録です。 理解につながった記事のリンク集と、自分の理解した内容をメモとして残しています。 （いくつかの画像は参考にした記事から拝借しています） 実際にJavaScriptのCanvas2Dを使って簡単な自作3Dエンジンを作ってみました。 自作3Dエンジンサンプル ##参考にした記事など フォグについてのPDF 自作Quaternionサンプル いわずとしれたTHREE.js(GitHub) その60 変換行列A×BとB×Aの違いを知ろう 3Dプログラミングの基礎知識(1) 3Dプログラミングの基礎知識(5) 3Dプログラミングの基礎知識(6) 3D座標変換 自前でビュー変換行列を作成 3D座標変換(別記事) ワールド座標→スクリーン座標変換 1-9 座標変換其の四 その39 知っていると便利？ワールド変換行列から情報を抜き出そう ##4x4行列 ##行列のか
Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング（仮題） - 最速チュパカブラ研究会
MAX 打ち上げのときに川崎さんに「英語の記事書いたら絶対ウケるから書くべきだよ」と言われていつ書こうかなーと思ってたら、そういえば11日は休日だったので、日本語の下書きだけでも一気に書いてみることにしました。 といっても、欲を出してあれもこれも書こうとして、結局まだ書ききれてませんけど。 タイトル案 Javascript と Canvas によるフルスクラッチ3Dプログラミング Javascript と Canvas 3Dプログラミング入門 ドキッ JSだらけの あと、今日（11日）は私の誕生日でもあります。25になりました。そろそろ鏡を見るのが怖くなってきますね。 以下、書きかけ Introduction Adobe MAX 2009 で Spark Project は、拡張現実（AR）のデモを展示し、来場者の注目を集めていた。Shibuya.JS のメンバーもこのデモに感激し、是非
Try the ActionScript 3D野中文雄のFlash CS4で学ぶ3次元表現
Flash CS4から搭載された3次元表現の機能を、ActionScriptから制御する方法を習得するための入門講座です。 講師はロクナナワークショップの人気講座「 野中文雄の応用力に差をつけるActionScript数学講座 」を担当され、Adobe Flashデベロッパーセンター への寄稿、Flash解説書籍の執筆など、幅広く活躍されている 野中文雄（のなかふみお）氏です。 開催概要 日時：6月19日（金）13:00 – 16:15（開場12:30） 会場：東京・代々木「 TKP代々木ビジネスセンター 2号館 B1 」 講師：野中文雄（ロクナナワークショップ講師） 料金：4,800円（税込み）※学生料金（数量限定）：2,400円（税込み） ブログなどでご紹介いただく際のバナーをご用意いたしました。 イベントレポート [野中文雄氏] 本イベントでは、ロクナナワークショップの人気講座「 野
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tamapolis : Javi Agenjo's personal blog » Blog Archive » Web Experiment: Rendering 3D without WebGL
WebGLで行列計算 - ラーメンは味噌汁
Google Code Archive - Long-term storage for Google Code Project Hosting.
3Dプログラミング入門 フラットシェーディング - jsdo.it - Share JavaScript, HTML5 and CSS