WebGLの紹介（2）-WebGLに属するHello Word

その他 2021-03-01 18:07:55 訪問数: null

WebGLに属するHelloWord

1.デモ効果

ここに画像の説明を挿入
上記のように、WebGLを使用して400px400pxのキャンバスに30px30pxの赤い正方形を描くと、見た目はシンプルですが、スズメは小さくて完全で、多くの知識ポイントをカバーしています。慎重に話しましょう。

2.関連知識ポイント

2.1キャンバス

Canvasはキャンバスです。名前が示すように、ペイントの場所です。CanvasはHTML5でラベルとして定義されています。それ以降、フロントエンド開発者はこのラベルとスクリプト言語（JavaScript）を使用して想像力を最大限に活用できます。キャンバスキャンバスは、2次元のグラフィックを描画できるだけでなく、3次元のグラフィックも描画できます。

2.1.1Canvasオブジェクトを取得する

キャンバスキャンバスはTHMLでラベルとして定義されているため、DOM操作関数getElementById（）メソッドを使用してキャンバスキャンバスオブジェクトを取得する必要があります。

<body>
  <!--canvas标签创建一个宽高均为400像素蓝色背景的画布-->
  <canvas id="webgl" width="400" height="400" style="background-color: blue"></canvas>

  <script>
    //通过getElementById()方法获取canvas画布
    var canvas = document.getElementById('webgl');
  </script>
</body>

2.1.2Canvasのコンテキストを取得する

Canvasは描画できますが、描画メソッドは提供しませんが、描画用のコンテキスト（コンテキスト）メカニズムと呼ばれるものを提供するために、Canvasオブジェクトは特別なコンテキストを取得するメソッドを提供します。getContext（）、getContext（）メソッドは取得できるだけではありません。二次元グラフィックスのコンテキストは、三次元グラフィックスのコンテキスト、ニーズに応じてそれを使用する方法を取得することもできます

//获取上下文-二维
var gl = canvas.getContext('2d');

//获取上下文-三维
var gl = canvas.getContext('webgl');

2.2シェーダー

呼び出されるWebGLは、シェーダー（Shader）描画プロットメカニズムに依存し、グラフィックを描画するための柔軟で強力な方法を提供します。WebGLはすべてそれを使用する必要があり、非常に強力ですが、より複雑でもあります。シェーダーは、WebGLの重要な調和メカニズムです。エンコードプロセスでは、文字列の形式でJavaScriptコードに埋め込まれます。

2.2.1シェーダー分類

WebGL 2つのシェーダー、頂点シェーダー（頂点シェーダー）とフラグメントシェーダー（フラグメントシェーダー）

  • 頂点シェーダー頂点シェーダーは、頂点の特性（位置、サイズなど）を記述するために使用されるプログラムです。頂点とは、2次元または3次元空間内の点、端点、または交点を指します。

  • フラグメントシェーダーフラグメント単位の処理（ライティングなど）を実行するプログラム。フラグメントはWebGL用語であり、ピクセルとして理解できます。

2.2.2シェーダーの初期化

ここで、WebGLプログラムには、ブラウザで実行されるJavaScriptプログラムとWebGLシステムで実行されるシェーダープログラムが含まれていることを知っておく必要があります。シェーダープログラムは、Javascriptコードを介して文字列の形式でWebGLシステムに渡されます。簡単に説明します。ここでは、記述されたシェーダー言語（GLSL ES）を使用した文字列シェーダープログラムとして具体化されています。

2.2.2.1シェーダー言語のデータ型（この場合）

シェーダー言語は強く型付けされたプログラミング言語であるため、ここではシェーダー言語のデータ型について説明します。値を割り当てるときは、左側と右側のデータ型が同じである必要があります。同じでない場合、プログラムはエラーを報告します。

  • floatは浮動小数点数を意味します
  • vec4は、同次座標
    と呼ばれる4つの成分で構成される4つの浮動小数点ベクトルで構成されるベクトルを示します。同次座標（x、y、z、w ）は、3次元座標（x / w、y / w ）と同等です。 、z / w）つまり、3次元座標を同次座標に変換する場合は、コンポーネントを追加するだけで済みます。値は1.0です。

2.2.2.2頂点シェーダーの初期化

頂点シェーダーの初期化は、実際には組み込み変数に値を割り当てることです。これには、gl_Positionとgl_PointSizeの2つの組み込み変数があります。

変数名 の種類 説明
gl_Position vec4 頂点の位置を示します
gl_PointSize 浮く ドットのサイズ（ピクセル数）を示します

注意：gl_Position变量必须被赋值，否则着色器无法正常工作，gl_PointSize不是必须的，缺省时着色器默认取值1.0

頂点シェーダーの初期化の例

//顶点着色器
var VSHADER_SOURCE = '' +
  'void main(){\n' +
  //设置顶点位置(坐标原点)
  '  gl_Position =vec4(0.0,0.0,0.0,1.0);\n' +
  //设置点的大小(30px)
  '  gl_PointSize=30.0;\n' +
  '}\n';

2.2.2.3フラグメントシェーダーの初期化

頂点シェーダーはポイントの位置とサイズを制御し、フラグメントシェーダーはポイントの色を制御し、フラグメントシェーダーはポイントの色を組み込み変数gl_FragColorに割り当てます。

変数名 の種類 説明
gl_FragColor vec4 フラグメントの色を指定します（RGBA形式）

この組み込み変数に値を割り当てると、対応するポイントがこの色で表示されます。そのタイプもvec4であり、RGBAの値を表す4つの浮動小数点コンポーネントが含まれています
。フラグメントシェーダーの初期化の例

//片元着色器
var FSHADER_SOURCE = '' +
  'void main(){\n' +
  //设置片元颜色(红色)
  ' gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +
  '}\n';

3. WebGLAPI記述の一部

3.1背景色を設定するgl.clearColor（）

描画領域をクリアする前に、背景色を設定する必要があります。背景色を指定すると、背景色はWebGLシステムに常駐し、次のgl.clearColor（）の呼び出しまで変更されません。

函数功能：指定绘图区域的背景色
-----------------------------------------------------------
调用示例：gl.clearColor(red, green, blue, alpha)
-----------------------------------------------------------
参数		
			red		指定红色值（从0.0到1.0）
			green	指定绿色值（从0.0到1.0）
			blue	指定蓝色值（从0.0到1.0）
			alpha	指定透明度值（从0.0到1.0）
			小于0.0的值会被截断为0.0，大于1.0的值会被截断为1.0
-----------------------------------------------------------			
返回值		无
-----------------------------------------------------------
错  误		无

3.2作図領域をクリアするgl.clear（）

描画領域をクリアすると、実際にはバッファがクリアされます。WebGLには、カラーバッファ、深度バッファ、テンプレートバッファの3種類のバッファがあります。

函数功能：将指定缓存区设置为预定的值-预定的值指的是gl.clearColor()设置的值
-----------------------------------------------------------------------------------
调用示例：gl.clear(buffer)
-----------------------------------------------------------------------------------
参数		
			buffer					指定待清空的缓存区，位操作位|可以用来指定多个缓存区
			gl.COLOR_BUFFER_BIT		代表清空颜色缓存区
			gl.DEPTH_BUFFER_BIT		代表清空深度缓存区
			gl.STENCIL_BUFFER_BIT	代表清空模板缓存区
-----------------------------------------------------------------------------------			
返回值		无
-----------------------------------------------------------------------------------
错  误		INVALID_VALUE			缓存区不是以上三种类型

背景色が指定されていない場合（gl.clearColor（）関数が呼び出されていない場合）、gl.clear（）を直接呼び出すと、使用されるデフォルト値は次のようになります。

キャッシュ名 デフォルト 関連機能
カラーバッファ （0.0、0.0、0.0、0.0） gl.clearColor（赤、緑、青、アルファ）
デプスバッファ 1.0 gl.clearDepth（depth）
テンプレートバッファ 0 gl.clearStencil（s）

3.3描画操作gl.drawArrays（）

シェーダーが確立されたら、描画しようとしています。gl.drawArrays（）は、さまざまなグラフィックを描画するために使用できる強力な関数です。この関数の仕様は次のとおりです。

函数功能：执行顶点着色器，按照mode参数指定的方式绘制图形
--------------------------------------------------------------------------
调用示例：gl.drawArrays(mode, first, count)
--------------------------------------------------------------------------
参数		
			mode		指定绘制的方式，可以接收以下常量符号：
						gl.POINTS,gl.LINES,gl.LINE_STRIP,gl.LINE_LOOP
						gl.TRIANGLES,gl.TRIANGLE_STRIP,gl.TRIANGLE_FAN
			first		指定从哪个点开始绘制-整形数
			count		指定要绘制多少个顶点-整形数
						
			gl.COLOR_BUFFER_BIT		代表清空颜色缓存区
			gl.DEPTH_BUFFER_BIT		代表清空深度缓存区
			gl.STENCIL_BUFFER_BIT	代表清空模板缓存区
--------------------------------------------------------------------------		
返回值		无
--------------------------------------------------------------------------
错  误		INVALID_ENUM			传入的mode参数不是指定参数
			INVALID_VALUE			参数first或count是负数

4.デモコード

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>使用WebGL绘制一个点</title>
</head>

<body>
  <!--canvas标签创建一个宽高均为400像素蓝色背景的画布-->
  <canvas id="webgl" width="400" height="400" style="background-color: blue"></canvas>

  <script>
    //通过getElementById()方法获取canvas画布
    var canvas = document.getElementById('webgl');
    //通过方法getContext()获取WebGL上下文
    var gl = canvas.getContext('webgl');

    //顶点着色器
    var VSHADER_SOURCE = '' +
      'void main(){\n' +
      //设置顶点位置(坐标原点)
      '  gl_Position =vec4(0.0,0.0,0.0,1.0);\n' +
      //设置点的大小(30px)
      '  gl_PointSize=30.0;\n' +
      '}\n';

    //片元着色器
    var FSHADER_SOURCE = '' +
      'void main(){\n' +
      //设置片元颜色(红色)
      ' gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +
      '}\n';

    //初始化着色器
    initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE);

    // 设置canvas的背景色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //清空canvas
    gl.clear(gl.COLOR_BUFFER_BIT);

    //开始绘制，绘制顶点，从第一个顶点开始绘制，绘制一个顶点
    gl.drawArrays(gl.POINTS, 0, 1);

    //初始化着色器函数
    function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
    
    
      //创建顶点着色器对象
      var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      //创建片元着色器对象
      var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      //引入顶点、片元着色器源代码
      gl.shaderSource(vertexShader, VSHADER_SOURCE);
      gl.shaderSource(fragmentShader, FSHADER_SOURCE);
      //编译顶点、片元着色器
      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);

      //创建程序对象program
      var program = gl.createProgram();
      //附着顶点着色器和片元着色器到program
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      //链接program
      gl.linkProgram(program);
      //使用program
      gl.useProgram(program);
      //返回程序program对象
      return program;
    }
  </script>
</body>

</html>

おすすめ

転載: blog.csdn.net/qw8704149/article/details/114224905
おすすめ
ランキング
図ドロップキャンバス、液体の進展、加速模倣ボール、ボール図波
いいえ。2019年1月7日面接の準備
Microsoft: The Metaverse is coming, here's the cornerstone to protect it
春---- MyBatisの統合
Midjourney の隠されたスキルのロックを解除します。プロンプトを変更すると、4 つの正方形のグリッドが「分裂」します。
ほぼ3とサブトレンドのヒントサイズ値94621721
Kafka監視ツールkafka-eagleのインストールと使用
MobaXterm下载提示输入Master密码，如何使用ResetMasterPassword工具恢复MobaXterm和设置MobaXterm主密码
PCBアンチジャミング対策
IE8フォーカス失敗ソリューション
アーカイブ
もっと
2024-06-05(0)
2024-06-04(0)
2024-06-03(1)
2024-06-02(0)
2024-06-01(1)
2024-05-31(1)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)

コードワールド

© 2018 codetd.com