2 - ol3.3ex 91b - Layer WebGL clipping example 2

「layer-clipping-webgl.js（291-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
（WebGL での描画について事前に学習しておくと理解の助けになります。））

「291-ol3ex.js」

if (!ol.has.WEBGL) {
/** ol.has.WEBGL{boolean}
 * True if browser supports WebGL.
 * ブラウザが WebGL をサポートしていたら true。（ol3 API）
 */

 var info = document.getElementById('no-webgl');
 /**
  * display error message
  */
 info.style.display = '';
} else {

 var osm = new ol.layer.Tile({

  source: new ol.source.OSM()
  /** ol.source.OSM 
   * Layer source for the OpenStreetMap tile server.
   * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
   */

 });

 var map = new ol.Map({
  layers: [osm],
  renderer: 'webgl',
  target: 'map',

  controls: ol.control.defaults({
  /** controls
   * Controls initially added to the map. 
   * If not specified, ol.control.defaults() is used.
   * 初期設定で、マップに追加されたコントロール。
   * 明示されていなければ、ol.control.defaults() が使用されま
   * す。（ol3 API）
   */

  /** ol.control.defaults()
   * デフォルトでは、マップに含まコントロールのセット。
   * 特に設定しない限り、これは、以下の各コントロールの
   * インスタンスを含むコレクションを返します。(ol3 API）
   * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
   */

   attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
   /** @type 
    * 値のタイプ（型）の説明 - 式などで表示
    * （@use JSDoc[http://usejsdoc.org/]より）
    */

    collapsible: false // 折りたたみ
   })
  }),
  view: new ol.View({
   center: [0, 0],
   zoom: 2
  })
 });

 var fragmentShaderSource = [

  'precision mediump float;',
  /** precision　数値の精度を指定するためのキーワード
   * mediump 精度修飾子（中程度）
   * float フラグメントシェーダ内の float 型の数値全てに 
   *  mediump を適用
   */

  'void main() {',
  /** void main()
   * レンダリングの際に main 関数が実行
   */

  '}'

 ].join('');
 /** Array.join
  * 配列の全ての要素を繋いで文字列にします。
  * （MDN [https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Array/join]）
  */

 var vertexShaderSource = [

  'attribute vec2 a_position;',
  /** attribute 変数の宣言
   * vec2 変数の型（要素数が２のベクトル）
   * a_position 頂点の情報をシェーダ側で受け取る変数
   */

  /** vec系変数
   * vec2(1.0, 1.0)
   * vec3(1.0, 1.0, 1.0)
   * vec4(1.0, 1.0, 1.0, 1.0)
   */

  'void main() {',

  '  gl_Position = vec4(a_position, 0, 1);',
  /** gl_Position
   * 頂点データを渡す組み込み変数
   */

  '}'
 ].join('');

 osm.on('precompose', function(event) {
 /** on()
  * Listen for a certain type of event.
  * Returns: Unique key for the listener.（ol3 API）
  */

 /** precompose　イベント
  * レイヤを描画する前に発生するイベント。
  * （「Layer spy example」参照）
  */

  var context = event.glContext;
  /** glContext()
   * WebGL context. Only available when a WebGL renderer 
   * is used, null otherwise.
   * WebGLのコンテキスト。WebGL レンダラを使用する場合にだけ
   * 利用でき、そうでない場合は null。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  var gl = context.getGL();
  /** getGL()
   * Returns: GL.
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  var program = gl.createProgram();
  /** glCreateProgram()
   * Creates a program object
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glCreateProgram.xhtml]）
   */

  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  /** glCreateShader()
   * Creates a shader object
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glCreateShader.xhtml]）
   */

  /** GL_VERTEX_SHADER
   * A shader of type GL_VERTEX_SHADER is a shader that 
   * is intended to run on the programmable vertex 
   * processor.
   * GL_VERTEX_SHADER　型のシェーダは、プログラマブルバーテッ
   * クスプロセッサで実行することを意図しているシェーダです。
   */

  gl.shaderSource(vertexShader, vertexShaderSource);
  /** glShaderSource
   * Replaces the source code in a shader object
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glShaderSource.xhtml]）
   */

  gl.compileShader(vertexShader);
  /** glCompileShader
   * Compiles a shader object
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glCompileShader.xhtml]）
   */

  gl.attachShader(program, vertexShader);
  /** glAttachShader
   * Attaches a shader object to a program object
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glCompileShader.xhtml]）
   */

  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  /**  GL_FRAGMENT_SHADER
   * A shader of type GL_FRAGMENT_SHADER is a shader that 
   * is intended to run on the programmable fragment 
   * processor.
   * GL_FRAGMENT_SHADER　型のシェーダは、プログラマブルフラグ
   * メントプロセッサで実行することを意図しているシェーダです。
   */

  gl.shaderSource(fragmentShader, fragmentShaderSource);
  gl.compileShader(fragmentShader);
  gl.attachShader(program, fragmentShader);

  gl.linkProgram(program);
  /** glLinkProgram
   * Links a program object
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glLinkProgram.xhtml]）
   */

  context.useProgram(program);
  /** glUseProgram
   * Installs a program object as part of current 
   * rendering state
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glUseProgram.xhtml]）
   */

  var positionLocation = gl.getAttribLocation(program, 'a_position');
  /** glGetAttribLocation
   * Returns the location of an attribute variable
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glGetAttribLocation.xhtml]）
   */

  gl.enable(gl.STENCIL_TEST);
  /** glEnable
   * enable or disable server-side GL capabilities
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glEnable.xhtml]）
   */

  /** GL_STENCIL_TEST
   * If enabled, do stencil testing and update the 
   * stencil buffer.
   * 有効なら、ステンシルテストを実行し、ステンシルバッファを
   * 更新します。
   */

  gl.colorMask(false, false, false, false);
  /** glColorMask
   * enable and disable writing of frame buffer color 
   * components
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glColorMask.xhtml]）
   */

  gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
  /** glStencilOp
   * set front and back stencil test actions
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glStencilOp.xhtml]）
   */

  /** GL_KEEP
   * Keeps the current value.
   * 現在の値を保持します。
   */

  /** GL_REPLACE
   * Sets the stencil buffer value to ref, as specified 
   * by glStencilFunc. 
   * ステンシルバッファ値を glStencilFunc によって指定された
   * リファレンスに設定します。
   */

  gl.stencilFunc(gl.ALWAYS, 1, 0xff);
  /** glStencilFunc
   * set front and back function and reference value for 
   * stencil testing
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glStencilFunc.xhtml]）
   */

  /** GL_ALWAYS
   * Always passes. 常に通します。
   */

  var buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  /** glBindBuffer
   * bind a named buffer object
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glBindBuffer.xhtml]）
   */

  /** GL_ARRAY_BUFFER
   * Vertex attributes 
   */

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  /** glBufferData
   * creates and initializes a buffer object's data store
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glBufferData.xhtml]）
   */

  /** Float32Array
   * Float32Array タイプは、32 ビット浮動小数点数 (C 言語
   * の float データタイプに相当します) の配列を表します。
   * これが設定されると、オブジェクトのメソッドあるいは配列の
   * 添字構文 (括弧を用いる表記) を用いて、配列の要素を参照す
   * ることが可能になります。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Typed_arrays/Float32Array]）
   */

    // first band
    -1.0, -1.0, -0.75, -1.0, -1.0, 1.0,
    -1.0, 1.0, -0.75, -1.0, -0.75, 1.0,
    // second band
    -0.5, -1.0, -0.25, -1.0, -0.5, 1.0,
    -0.5, 1.0, -0.25, -1.0, -0.25, 1.0,
    // third band
    0.0, -1.0, 0.25, -1.0, 0.0, 1.0,
    0.0, 1.0, 0.25, -1.0, 0.25, 1.0,
    // forth band
    0.5, -1.0, 0.75, -1.0, 0.5, 1.0,
    0.5, 1.0, 0.75, -1.0, 0.75, 1.0

  ]), gl.STATIC_DRAW);
  /** STATIC
   * The data store contents will be modified once and 
   * used many times.
   * データストアコンテンツは、一度および使用された多くの回数
   * 修正されます。
   * DRAW
   * The data store contents are modified by the 
   * application, and used as the source for GL drawing 
   * and image specification commands.
   * データストアコンテンツは、アプリケーションによって修正さ
   * れ、GL 描画とイメージ仕様コマンドのソースとして使用され
   * ます。
   */

  gl.enableVertexAttribArray(positionLocation);
  /** glEnableVertexAttribArray
   * Enable or disable a generic vertex attribute array
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glEnableVertexAttribArray.xhtml]）
   */

  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
  /** glVertexAttribPointer
   * define an array of generic vertex attribute data
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glVertexAttribPointer.xhtml]）
   */

  gl.drawArrays(gl.TRIANGLES, 0, 24);
  /** glDrawArrays
   * render primitives from array data
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glDrawArrays.xhtml]）
   */

  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  gl.deleteBuffer(buffer);
  /** glDeleteBuffers
   *  delete named buffer objects
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glDeleteBuffers.xhtml]）
   */

  gl.colorMask(true, true, true, true);

  gl.stencilFunc(gl.NOTEQUAL, 0, 0xff);
  /** GL_NOTEQUAL
   * Passes if ( ref & mask ) != ( stencil & mask ). 
   */

  gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
 });

 osm.on('postcompose', function(event) {
 /** postcompose　イベント
  * レイヤを描画した後に発生するイベント。
  * （「Layer spy example」参照）
  */

  var context = event.glContext;
  var gl = context.getGL();

  gl.disable(gl.STENCIL_TEST);
  /** glDisable
   * enable or disable server-side GL capabilities
   * （OpenGL4 Reference Pages[https://www.opengl.org/
   * sdk/docs/man/html/glEnable.xhtml]）
   */

 });
}