Daily CSS DesignHi! I'm a web designer and this is my side projectThe goal was to create one design every day for a year. All shapes, patterns and colors are made by coding. Read more
Web Graphic Experiments
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.3
Orano
Intervenir en milieu radioactif nous pousse à innover en permanence pour assurer toujours plus de sûreté et de sécurité.
WebGLでエロゲー風に部分モザイクしてみた - Qiita
ステンシルバッファ（マスク処理）にシェーダー適用して、部分的にモザイクさせてみました。 Live2D WebGL版と合わせるとこんな感じにできます♪ （エロゲー用の素材を持っていないので公式サンプルでテスト） ・Live2Dで部分モザイクデモ 上記デモページでは、モーション切替とモザイク箇所の切替ができます。 モザイクは一部の描画オブジェクトごとにかけられるように実装しています。 そのため、描画オブジェクトが動くとモザイク部分も動きますっ！ WebGLの技術としては、以下のものを使いました。 １）モザイクシェーダー ２）ステンシルバッファ ３）フレームバッファ ４）Live2DのWebGL描画 開発環境 ・Live2D WebGL SDK 2.0.04_1 ・SDKのSimpleプロジェクトをカスタム モザイクシェーダー部分の実装 モザイクシェーダーは以下の記事を参考にさせていただきました
プログラミング初心者からthree.jsに慣れるまで｜misaki nakano
こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか
スマホでもWebGLが快適に動く! HTML5で体験する3D表現の可能性 – ICS MEDIA
WebGLウェブ・ジーエルとはブラウザで3D表示するための標準仕様。いまやスマートフォンを含むすべてのブラウザでWebGLが動作します。WebGLを使えばGPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。 WebGLを使えば主に次のようなコンテンツ開発に役立ちます。 3Dモデルの表示 ゲームコンテンツ データビジュアライゼーション プログラミングアート 魅力的で華やかな画面演出（広告系サイトなど） かつてはFlash PlayerやUnity Web Playerのようなブラウザ・プラグインを使わなければ3D表現はできませんでしたが、WebGLの登場によってプラグイン未搭載のスマートフォンのブラウザでも3D表現が実現可能になりました。 本記事ではWebGL入門者にむけ、数秒で試せるオリジナルのWebGLのHTMLデモを多数掲載。どれもスマートフォンのブラウザでも利
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
tQuery API - extensions for three.js
tQuery API : three.js + jQuery Three.js Power + jQuery API Usability tQuery API is a thin library on top of three.js It is an extension system for people to write plugins. To help them share their code and build on top of each other. It mimics jquery api, well know for its usuability. tQuery API aims for "it should not be harder than playing with lego bricks." Download Boilerplate Try it Online Po
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
All Is Not Lost
大変申し訳ありませんが、このコンテンツはGoogle Chrome上で動くように最適化されています。 お使いのブラウザでは途中で止まってしまったり、正しく動かない可能性があります。 この機会に是非Google Chromeをお試しください。こちらからダウンロードできます。 ■推奨環境 ◎ブラウザについて 当コンテンツはGoogle Chrome上で動くように最適化されています。 最新のGoogle Chromeをインストールしてお楽しみください。 Google Chrome以外のブラウザでは、途中で止まってしまったり、正しく動かない可能性があります。 最新のGoogle Chromeでお楽しみいただくことを推奨します。 ◇ Windows XP/Vista/7 ◇ Mac OSX 10.6〜 ◎ハードについて ◇ Windows OS：Windows XP、Windows Vist
Tilt: Visualize your Web page in 3D – Mozilla Hacks - the Web developer blog
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. Buzu This is a really cool tool. July 20th, 2011 at 08:28 Jeff Hammel The .xpi link doesn’t auto-install for me. Plz fix July 20th, 2011 at 09:51 Joss Crowcroft Holy
HTML要素の上にWebGLの描画を合成したらどうなるの - 最速チュパカブラ研究会
みたいなことを先週、ぴろたんと話していてですね。実際どうなるのか試してみました。こうなります。 赤い点線の枠が WebGL を有効にした canvas で、中の青い三角形は WebGL で描画されています。後ろの写真と「GL Overlay Test」という文字は通常の HTML です。 一見ちゃんと描画されているように見えますが、左側の半透明の三角形が、加算合成したような描画結果になっており、少し変です。本来であればもう少し暗い色で描画されている筈です。これは Chrome/Firefox あるいは Mac/Windows を問わず同じなので、今のところWebGL の描画結果を半透明で合成すると確実におかしくなるので、やめたほうがいいと言えます。が、逆に言えば、完全に不透明か完全に透明な部分は正しく合成されるので、限定的には使えるとも言えます。（描画結果にアンチエイリアスがかかっている場
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sketch - WebGL Noise 210302a
Monument | Stonewall Forever
Dogstudio. Multidisciplinary Creative Studio.
Bruno Simon
Bruno Simon
NHKニュース 速報・最新情報
jsdo.it
http://dl.dropbox.com/u/6213850/WebGL/nyanCat/nyan.html