# 黄色に塗る !「https://n3s.nadesi.com/plain/564.nako3」を取り込む # 設定 # WEBGL用キャンバンスはWEBGL用キャンバス準備 頂点バッファは空 黄塗プログラムは空 頂点LOCは空 WEBGL用キャンバンスからGLコンテキスト作成 準備する 描画する ●WEBGL用キャンバス準備とは 　CANVASは「#webgl_cv」をDOM要素取得 　もし、CANVASでなければ、 　　CANVASは「CANVAS」のDOM要素作成 　　CANVAS["id"]は「webgl_cv」 　　描画中キャンバス["parentNode"]にCANVASをDOM子要素追加 　ここまで 　CANVAS["width"]は600 　CANVAS["height"]は400 　CANVASで戻る ここまで ●準備とは 　頂点シェーダは『attribute vec2 aPosition; void main() { gl_Position = vec4(aPosition, 0.0, 1.0); }』から"頂点"のGLシェーダ作成 　黄塗シェーダは『precision mediump float; void main() { gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); }』から"フラグメント"のGLシェーダ作成 　もし、頂点シェーダ＝NULLまたは、黄塗りシェーダ＝NULLならば、 　　「シェーダのコンパイルに失敗しました」でエラー発生 　ここまで 　黄塗プログラムは頂点シェーダと黄塗シェーダからGLプログラム作成 　頂点LOCは黄塗プログラムから「aPosition」のGL属性ロケーション取得 　頂点リストは[ -1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0 ] 　頂点バッファは頂点リストから「」でGL静的配列バッファ作成 ここまで ●描画とは 　[0.0, 0.0, 0.0, 1.0]にGLクリア色設定 　{COLOR:オン}でGLクリア 　黄塗プログラムをGLプログラム使用 　頂点バッファをGLバッファ設定 　頂点LOCをGL頂点属性有効 　頂点LOCに{数:2}でGL頂点属性書式設定 　「TRIANGLE_STRIP」で4をGL配列描画 　 　GLフラッシュ ここまで