cables
cables is under heavy development. There might be one or another bug, please let us know about it! Cables is a tool for creating beautiful interactive content.With an easy to navigate interface and real time visuals, it allows for rapid prototyping and fast adjustments. You are provided with a set of operators, such as mathematical functions, shapes, materials and post processing effects. Connect
新しいWebVRフレームワークA-Frame入門 - Qiita
とりあえずサンプル！ A-Frameを用いたWebVRサンプルとして，うさぎ(stanford bunny)がぴょんぴょんするサンプルを作りました＞＜ このサンプルは1行もjavascriptを記述していません！ すごい！ 混沌としたWebVR界隈に突如現れたWebVRフレームワーク A-Frame． さっそく試してみたので，本記事ではその使い方を解説してみるよ！ この記事には， 1. ステップバイステップで一通りの機能を使いながらWebVRシーンを作成する方法と， 2. 各機能や要素の詳細な説明 が書かれています． 公式サイト: https://aframe.io/ ドキュメント: https://aframe.io/docs/guide/ はじめに A-Frameってどういうもの？ HTMLのタグとしてシーンを記述できるWebVR用のフレームワークです． 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)
物理演算ライブラリの Oimo.js 作者が贈る最高の実験室！ あまりのカッコよさに思わず絶句しました - WebGL 総本山
史上最高の WebGL Labs！ 今回ご紹介するのは、javascript の物理演算ライブラリとして非常に有名な Oimo.js の作者さんが作った、Example 集のサイトです。 ページのタイトルはシンプルに「 Labs 」とだけ記されています。しかしその内容は圧巻の充実度。インターフェースや配色、画面遷移の方法など、ウェブコンテンツとしていろいろな意味でかなり完成されています。 ベースは three.js 実装 独自のコードもかなり書かれていますが、3D 表現のベースになっているのは three.js です。実際に three.js で実装を行う場合には非常に参考になるのではないでしょうか。 トップページは中央に作者さんのよく利用されているアイコンが置かれています。その周囲にはサークル上に Examples が展開される仕組みですね。枝のように伸びるそれぞれの小さなサークルが、す
WebGL と GLSL で気軽にレイトレーシングに挑戦してみよう！ - Qiita
はじめに 全国 8,120 万人のレイトレファン の皆様こんにちは！ WebGL でレイトレがどうしてもやりたいんだというお便りがついに 1,021 万通を超えたので、そろそろ WebGL で簡単なレイトレーシングの実装について解説する頃合いかなと思い立ち筆を執った次第です。 今回はあくまでも 基本に忠実 に、簡単なレイトレーシングの実装を GLSL だけで行ってみましょう。全国のレイトレファンの皆さんの声援に応えてがんばって解説記事を書いていこうと思います。 前置き 私は幸運なことに WebGL について解説する機会がそれなりにあります。 そういった席ではよく、数学的な知識はとりあえず後回しにしてまずはやってみることからスタートしましょうという話をします。たとえば行列やクォータニオンについて、その数学的な詳細にまで勉強するのは大変です。ですから、まずは使い方から覚えようという促し方をする
Shadertoy BETA
Build and Share your best shaders with the world and get Inspired Latest contributions: "Gradinhas" by Elsio 9 minutes ago, "cirlccleMaking" by jessesound 45 minutes ago, "Simple Raytraced Sphere Example" by Spheya 1 hour ago, "Better Graphing Calculator" by ThePlaneGuy45 2 hours ago, "dancing points" by nayk 2 hours ago
BabylonJS - 3D engine based on WebGL/Web Audio and JavaScript
Welcome to Babylon.js 6.0 Our mission is to build one of the most powerful, beautiful, simple, and open web rendering engines in the world, and we are excited to announce the next step forward in that journey: the release of Babylon.js 6.0. This new version brings a smorgasbord of performance improvements, rendering enhancements, and exciting new features that you will NOT want to miss.
WebGLを利用して3Dな地図を作成できるライブラリ「Cesium」
Cesium はApache 2.0ライセンスの下、オープンソースとして作成された3D地図作成ライブラリです。 ハードウェアアクセラレーショングラフィックスにWebGLを使用しており、クロスプラットフォーム、クロスブラウザで、動的なデータ可視化を行うのに利用することができます。 公式サイトのデモなどを見ると、その性能の高さを感じることができます。 (以下スクリーンショット、公式サイトより） ほんの少しだけ触ってみました。 サンプルコード ぐんまちゃんを群馬に貼り付けてみました。 //セシウムウィジェットを作成 var widget = new Cesium.CesiumWidget('cesiumContainer'); //イメージレイヤーを取得 var layers = widget.centralBody.getImageryLayers(); //イメージレイヤにぐんまちゃん画像を
多彩な表現力のWebGLを扱いやすくする「Three.js」
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（1/5 ページ） Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリだ。サンプルコードと見比べながら、効率良く学習しよう Three.jsの基礎 本連載も5回目を迎え、いよいよ佳境に入ります。今回の題材は、Webブラウザ上で3次元グラフィックを実現する「WebGL」です。ただし、これまでと違ってAPIを直接は触れず、「Three.js」を利用します。Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリです。Mr.Doob氏を中心にオープンソースで開発が進められており、WebGL界隈ではデファクトスタンダードに近い地位を築いています。 Three.jp公式サイト WebGLはこれまで解説し
「webgl-loader」を使ってみた - 強火で進め
昨日紹介した「webgl-loader」を使ってみました。 objファイルを独自形式に変換 まずは.objファイルをこのライブラリ向けの形式に変換する必要が有ります。変換ツールのソースコードが bin フォルダに有るのでこのフォルダで ./build.sh を実行し、ビルドします。 objcompress が変換(独自形式に圧縮)するツールです。以下の様に使用します。 ./objcompress test.obj test.utf8この例の場合は変換後のファイルは test.utf8 となります。 今回、テストのための3Dモデルはこちらのサイトの「ケルプバス」のモデルデータを使わせて貰いました。 Free 3D Models http://toucan.web.infoseek.co.jp/3DCG/3ds/FishModels.html こちらは.3dsファイルで公開されていたのでChe
.objファイルのローダー「webgl-loader」 - 強火で進め
「webgl-loader」はobjファイルを独自形式に変換して圧縮するツールとそのファイルを読み込んでWebGLで表示する為のライブラリが含まれたパッケージです。 Google Bodyで使われたものみたいです。 webgl-loader - Simple, fast, and compact mesh compression for WebGL - Google Project Hosting http://code.google.com/p/webgl-loader/ こちらのブログで知りました。 Transcript: Brandon Jones’ WebGL talk at onGameStart http://tinysubversions.com/2011/09/transcript-brandon-jones-webgl-talk-at-ongamestart/ 実際に使っ
Aerotwist - Home
Web Development Most of them will probably be about front-end performance work, or possibly broader coding things. The odd one will be tagged #personal or #opinion, so if you have the RSS feed you can filter those out if you don't want them! 18/Jun 2022 Dear Zach #update, #longtimenospeak 10/Dec 2016 🌟 When everything's important, nothing is! 🌟 #performance, #loading 30/Aug 2016 Slicing SVG 9 Wa
WebGL and Three.js
Colin Barre-Brisebois - GDC 2011 - Approximating Translucency for a Fast, Che...Colin Barré-Brisebois
#CEDEC2012 JavaScriptベースゲームエンジン徹底比較
#CEDEC2012 JavaScriptベースゲームエンジン徹底比較 1. HTML5+JSフレームワークを 用いたゲームUI開発手法株式会社ユビキタスエンターテインメント 秋葉原リサーチセンター 伏見 遼平 2. このスライドは以下のサイトからダウンロードできます 3. タイムテーブル• 15:50 ‒ 16:20 … フレームワークを比べる・使う – HTML5 とは? – JavaScript ゲームエンジンの勘所 – 各種ゲームエンジンの紹介• 16:20 ‒ 16:40 … フレームワークを作る – enchant.js の紹介 – サンプル・デモ• 16:40 ‒ 16:50 … 質疑応答 4. 自己紹介伏見 遼平 (@sidestepism)株式会社ユビキタスエンターテインメント秋葉原リサーチセンター (UEI/ARC)enchant.js 開発プロジェクト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
> mattatz
http://www.gooengine.com/demofiles/pearl-boy/
GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012 - Adventar
Once Upon a Time In Wonder Christmas ： 伊勢丹
どこでも動くゲームを作るためのベタープラクティス
Site Suspended - This site has stepped out for a bit