---
title: WebGL でのデータ
slug: Web/API/WebGL_API/Data
translation_of: Web/API/WebGL_API/Data
---
<div>{{WebGLSidebar}}{{draft}}</div>

<p>シェーダープログラムは 3 種類のデータストレージにアクセスでき、それぞれに特定のユースケースがあります。それぞれの種類の変数はデータストアの種類に応じて 1 つまたは両方の種類のシェーダープログラムからアクセスでき、特定の変数の種類に応じてサイトの JavaScript コードからもアクセスできます。</p>

<h2 id="GLSL_データ型">GLSL データ型</h2>

<p>&lt;&lt;基本型、ベクトルなどを文書化します。Khronos WebGL wiki の<a href="https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)">データ型 (GLSL)</a> を参照してください&gt;&gt;</p>

<h2 id="GLSL_変数">GLSL 変数</h2>

<p>GLSL には3種類の「変数」またはデータストレージがあり、それぞれに <strong>{{anch("Attributes", "attributes")}}</strong>、<strong>{{anch("Varyings", "varyings")}}</strong> <strong>および</strong> <strong>{{anch("Uniforms", "uniforms")}}</strong> といった独自の目的とユースケースがあります。</p>

<h3 id="Attributes">Attributes</h3>

<p><strong>Attributes</strong> は GLSL 変数であり、(変数としての) 頂点シェーダーおよび JavaScript コードでのみ使用可能です。属性は通常、色情報、テクスチャ座標、および JavaScript コードと頂点シェーダー間で共有する必要がある計算または取得されたその他のデータを格納するために使用されます。</p>

<pre class="brush: js">//init colors
    var vertexColors = [
        vec4( 0.0, 0.0, 0.0, 1.0 ),  // black
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 1.0, 0.0, 1.0 ),  // yellow
        vec4( 0.0, 1.0, 0.0, 1.0 ),  // green
        vec4( 0.0, 0.0, 0.0, 1.0 ),  // black
        vec4( 1.0, 0.0, 0.0, 1.0 ),  // red
        vec4( 1.0, 1.0, 0.0, 1.0 ),  // yellow
        vec4( 0.0, 1.0, 0.0, 1.0 ),  // green
    ];
    var cBuffer = gl.createBuffer();
</pre>

<pre class="brush: js">//continued
//create buffer to store colors and reference it to "vColor" which is in GLSL
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );

    var vColor = gl.getAttribLocation( program, "vColor" );
    gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColor );
</pre>

<pre class="brush: cpp">//glsl
attribute  vec4 vColor;

void main()
{

fColor = vColor;
}

</pre>

<h3 id="Varyings">Varyings</h3>

<p><strong>Varyings</strong> は頂点シェーダーによって宣言され、頂点シェーダーからフラグメントシェーダーにデータを渡すために使用される変数です。これは、頂点シェーダーによって計算された後、頂点の {{interwiki("wikipedia", "Normal_(geometry)", "normal vector")}} を共有するために通常使用されます。</p>

<p>&lt;&lt;使用方法&gt;&gt;</p>

<h3 id="Uniforms">Uniforms</h3>

<p><strong>Uniforms</strong> は JavaScript コードによって設定され、頂点シェーダーとフラグメントシェーダーの両方で使用できます。これらは照明の位置と大きさ、グローバル変換と遠近法の詳細など、フレームに描画されるすべてのものに対して同じ値を提供するために使用されます。</p>

<p>&lt;&lt;詳細の追加&gt;&gt;</p>

<h2 id="Buffers">Buffers</h2>

<p>&lt;&lt;情報の追加&gt;&gt;</p>

<h2 id="Textures">Textures</h2>

<p>&lt;&lt;情報の追加&gt;&gt;</p>