WebGL(OpenGL)で大事な技術がシェーダーでしょう。3Dが立体的に認識されるためには陰影があったり、頂点によって影の濃さが異なるためではないかと思います。しかしOpenGLのように整備された環境がない中、スムーズに作るのは難しいかも知れません。 そこで使ってみたいのがShader Editorです。Google ChromeのDevToolsを使ってその場でシェードを編集できます。

Shader Editorの使い方

WebGLを使っているサイトでShader Editorを立ち上げます。

するとこんな感じでシェードのパーツごとに分かれて表示されます。

コードのバリデーションも行ってくれます。

実際に使っているデモです。

Shader Editorを使えばWebGLコンテンツの調整が楽になるかも知れません。結果を見ながら作業できるので、微妙な調整向きではないでしょうか・

Shader EditorはGoogle Chrome用のオープンソース・ソフトウェア(MIT License)です。

Shader Editor - Chrome ウェブストア spite/ShaderEditorExtension