🌸 「なでしこ」
>
🍯 「貯蔵庫」
WebGLのGLSLテスト(黄色で塗りつぶすだけ)
🌟新規
📒一覧
🔌
🔍検索
🚪ログイン
WebGLのGLSLテスト(黄色で塗りつぶすだけ) 📖
WebGL用のCANVASを作成して、シェーダで黄色に塗ります。
プログラム:
(→大)
# 黄色に塗る !「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フラッシュ ここまで
プログラムを実行
⭐ てぃふと@うぇいく 作
タイトル:
WebGLのGLSLテスト(黄色で塗りつぶすだけ)
ライセンス:
CC0 (著作権破棄)
タイプ:
wnako
タグ:
-
利用バージョン:
3.2.13
作成日時:
2021/05/21 22:33 (編集: 2021/06/05 12:26)
公開の投稿
⭐
ログイン
して★を付けよう!
Twitterへ投稿
📝作品を編集
作品公開情報
📍この作品のURL:
📍アプリ(即時実行)のURL:
📍アプリ(実行ボタンあり)のURL:
📍ブログパーツ:
上記HTML↑をブログに貼り付けることでアプリを埋め込めます。
📍ライブラリ直リンク - 『!「***」を取込』で使うとき:
📍なでしこハブ (最新版の反映は1日後):
ソースの確認
編集履歴の確認
通報数:
0
通報って何?