サンプルプログラムで、シェーダの初期化に失敗し、正常に動作しない。

Question

WebGLを勉強するため、古い本になりますが、以下の本を用いてWebGLの勉強をしております。
『WebGL+HTML5 3DCGプログラミング入門』2012年出版

この本は紙面を節約するため、追記しているにも関わらず、記述していない箇所が多いため、常にサンプルプログラムと見比べて作業を進めております。しかし、書籍に付属してあるサンプルプログラムの5章で動かない不具合が多々ありました。エラー内容を確認しますと、シェーダの初期化に失敗しているとあったので、出版元のホームページで正誤表を確認したのですが、該当する箇所での修正、訂正はありませんでした。どのように対処すれば、サンプルが正しく動作するでしょうか？

心当たりあることがありましたら、何卒、ご助言のほどよろしくお願いいたします。

var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'attribute vec4 a_Color;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_Position = a_Position;\n' +
  '  gl_PointSize = 10.0;\n' +
  '  v_Color = a_Color;\n' +
  '}\n';

// フラグメントシェーダのプログラム
var FSHADER_SOURCE =
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_FragColor = v_Color;\n' +
  '}\n';

function main() {
  // Canvas要素を取得する
  var canvas = document.getElementById('webgl');

  // WebGL描画用のコンテキストを取得する
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('WebGLコンテキストの取得に失敗');
    return;
  }

  // シェーダを初期化する
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('シェーダの初期化に失敗');
    return;
  }

以下略

Answer 1

シェーダがうまくコンパイルできていない理由が、どのような内容になっているのかわからないので全然見当違いなことを言ってしまってるかもしれないですが、以下のようにしてみると、どうでしょうか。

var FSHADER_SOURCE =
  'precision mediump float;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_FragColor = v_Color;\n' +
  '}\n';

WebGL の場合は、動かない原因がブラウザの実装にある場合の他に、ハードウェア構成やドライバのせいだったりすることもあるので、実行環境も併せて記載することで、返答が得られやすくなるかもしれません。

Comments

[guest1213]

Windows 10 + Chrome 59.0.3071.115にて質問者様のフラグメントシェーダにてコンパイルエラーが発生することを確認(gl.compileShader()後にgl.getShaderInfoLog()にて「ERROR: 0:1: '' : No precision specified for (float)」という内容を確認)し、こちらの回答のように小数点の精度を明示したところコンパイルできるようになりました。たしかWebGL(とOpenGL ES)は頂点シェーダはデフォルトの精度があるけど、フラグメントシェーダはデフォルトが無いので明示しなければいけないとかそんな感じだったと記憶してます。

[zigutabi]

ありがとうございました。他のプログラムでも書き換えたところ、無事動作することを確認することができました。ハードウェアやドライバは盲点でした。この度は大変勉強となり、助かりました。本当にありがとうございました。

[doxas]

うまくいったようで、よかったです！
少しだけ補足しますと、上記で guest1213 さんがおっしゃってるとおり、明示的に float の精度などを指定するべきなのですが、恐らくこの書籍が執筆された当時は記載がなくても動いていたマシンもあったと思うのですね。
最近では WebGL も割りと浸透してきたといいますか、徐々に枯れてきてはいるのかなと思いますが、たとえば PC 向け（Windows）の Chrome なら問題ないけど ios の safari ではダメで……みたいなことは本当によくある話なんですね。よしんば動いたとしても、Windows と Mac では結果が違う、みたいなことも普通に起こります。
これは、ブラウザの実装だけでなく、搭載されている GPU やそのドライバが様々に WebGL の実行に関わってくるからなんですね。もし今後、また WebGL 関連でわからないことがあるときは、いわゆる一般的な JavaScript の質問とは違って、環境なども大きく影響するものであることを前提に質問すると、より具体的な返答が得られると思います。

[zigutabi]

参考になります。そうなると、機種依存の問題が孕んでくる恐れがありそうです。作品をさくらVPS、herokuに上げる計画なのですが、読込先のブラウザの機種が対応していないとへこんじゃいます。MAC買う金もないし……