WebGL のデータ

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

GLSL データ型

GLSL ドキュメントの Data Types を参照してください。

GLSL 変数

GLSL には属性、varyings、ユニフォーム の 3 種類の「変数」またはデータストレージがあり、それぞれに独自の目的と用途があります。

属性

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

js
// 色を初期化
const 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
];
const cBuffer = gl.createBuffer();

js
// 続き
// 色を保存するバッファーを作成し、GLSLの "vColor" を参照します。
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW);

const vColor = gl.getAttribLocation(program, "vColor");
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);

cpp
//glsl
attribute  vec4 vColor;

void main()
{
  fColor = vColor;
}

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2023年12月5日 by MDN contributors.

View this page on GitHub • Report a problem with this content

WebGL のデータ

In this article

GLSL データ型

GLSL 変数

属性

Varying

ユニフォーム

バッファー

テクスチャ

Help improve MDN