WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
【１】Cubeで遊ぼう！ 迷路生成編 - はじめてのthree.js
はじめに three.jsはレンダラを変えるだけで、Canvas(2D)にもWebGLにも書き出せるっていう、色々と技術遷移中の今の時代にピッタリなJavascript 3D Engineです。 node.jsも楽しいけど、表現系でも遊んでみたい！って時に手軽にさわれる逸品です。(3Dよくわかりませんが・・・) とりあえずは準備 まず、GitHubからソース落としてきます。gitで落としてもいいし、zipファイル(右の方にダウンロードボタンがあるよ)でも落とせます。 展開すると色々入ってますが、基本必要なのは "build/Three.js" です。サンプルでは他のも利用しますが、随時配置してください。 あー、それとthree.jsのデモを見た人は、3Dモデリングソフトで作ったモデルを読み込んでグリグリ・・・みたいなのを期待してるかもしれませんが、今回そーいうの無いですよ、自分、3Dソフト
J3D – JavaScript 3D library
Bartek Drozdz has been an active member of the Flash and Unity communities over the past years. His 3D development work has never been anything short of stunning. Fortunately for us Bartek recently decided to shift gears and get familiar with WebGL. In fact, he didn’t just get familiar with WebGL, he ripped it open and created an entire 3D engine called J3D. J3D has a steadily growing list of demo
GLGE WebGL Library/Framework
What is GLGE? GLGE is a javascript library intended to ease the use of WebGL; which is basically a native browser javascript API giving direct access to openGL ES2, allowing for the use of hardware accelerated 2D/3D applications without having to download any plugins. The aim of GLGE is to mask the involved nature of WebGL from the web developer, who can then spend his/her time creating richer con
note.x | First impression of the WebGL
HTML5の周辺技術の一つ、WebGLがどんなもんか様子を伺ってみたのでメモっとく。 WebGL概要 Mozillaが作ってたCanvas3Dがベース OpenGL 2.0 or OpenGL ES 2.0をサポートする環境でハードウェアアクセラレートされた2D、3Dグラフィックスを表示する HTML5のCanvasを通じた、JavaScriptとOpenGL ES 2.0のバインディング リソース khronos WebGLセクション WebGL Cheat Sheet WebGL対応ブラウザ（いずれも開発中） Webkit nightly Build Minefield (FireFox 3.7 nightly Build) Chorome (Chromium) Opera? ※未確認 仕事が早いというか、気が早いというかすでにいくつかのライブラリが公開されてる。 WebGLライブラリ
Ext JS Blog - Ext v1.1 Released
Grid layouts are important for creating web apps because they help organize content attractively and make sure the app functions smoothly. The component-based architecture JavaScript framework takes these layouts to the next level by adding interactivity, flexibility, and advanced functionalities beyond the capabilities of CSS alone. In this article, we’re going to explore 7 JavaScript […] No Comm
Spider GL
What Is Computer Graphics and Why Is It Important? The importance of computer graphics lies in their applications. In engineering applications (e.g. automotive and aerospace), the ability to quickly visualize newly designed shapes is indispensable. Before the advent of computer graphics, designers built expensive prototypes and time-consuming clay models. Now, designers can interactively view and
Experiments with Google
3D, A-frame, ARCore, Actions on Google, Android Live Wallpaper API, Android NDK, Android SDK, Android Things, Apps Script, Arduino, Augmented Reality, Blender, CLIP, Canvas, Canvas Quiz, Captive Portal, Cardboard SDK, Cast API, Cinder, Cloud Text-to-Speech API, Convnet.js, D3.js, Demoscene, Dialogflow, Firebase, Framer Motion, GAN, GLSL, GPT-2, Gamepad API, Google Assistant, Google Assistant SDK,
WebGL Water
Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytrac
Hack The WebGL(WebGL勉強会)
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
JavaScript でリアルタイム 3DCG を実現する WebGL の使い方 - WebOS Goodies
先日、ちょっとした思いつきで WebKit の Nightly Build をインストールし、 WebGL を試してみました。 WebGL というのは現在策定中の新しい規格で、 JavaScript を使って本格的な 3DCG を実現する API です。同じ目的を持つものとして Google の O3D がありますが、 WebGL は OpenGL ES を管理している Khronos グループを中心に Google, Mozilla, Opera, NVIDIA, AMD といった企業が参画しており、標準化という面ではリードしています。 まだ策定中の規格なので今後変化するかもしれませんが（WebGL 1.0 が正式リリースされました）、少なくとも現状の WebKit の実装については使い方がわかったので、本日はそれをご紹介します。 WebGL は Web 上の最も重要なグラフィックス A
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebGL procedural terrain [three.js]
http://www.scenejs.org/