1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
---
title: Data in WebGL
slug: Web/API/WebGL_API/Data
tags:
- 3D
- 3D 图像
- WebGL
- WebGL API
- 中间件
- 变体
- 图形
- 属性
- 指南
- 绘图
- 统一的
- 需要内容
- 需要示例
translation_of: Web/API/WebGL_API/Data
---
<div>{{WebGLSidebar}}{{draft}}</div>
<p>GLSL 为 Shader 提供了三种不同作用的数据存储，每种都有一个特定的用例。每种数据依作用不同可以被一种或者全部shader访问（取决于数据存储类型），也可能通过站点的Javascript代码进行访问，这取决于变量的特定类型。</p>
<h2 id="GLSL_数据类型">GLSL 数据类型</h2>
<p><<关于 基本数据类型, 向量等，参见Khronos WebGL Wiki的文档：<a href="https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)">Data Type (GLSL)</a> >></p>
<h2 id="GLSL_变量">GLSL 变量</h2>
<p>GLSL中有三种类型的“变量”或者说数据存储类型。每一种类型都有特定的目标和使用方法：: <strong>{{anch("Attributes", "attributes")}}</strong>、<strong>{{anch("Varyings", "varyings")}}</strong>和<strong>{{anch("Uniforms", "uniforms")}}</strong>.</p>
<h3 id="Attributes">Attributes</h3>
<p><strong>Attributes</strong> 可以被JavaScript代码操作，也可以在 vertex shader 中被作为变量访问。Attributes 通常被用于存储颜色、纹理坐标以及其他需要在JavaScript代码和 vertex shader 之间互相传递的数据。</p>
<pre class="brush: js notranslate">//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 notranslate">//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 notranslate">//glsl
attribute vec4 vColor;
void main()
{
fColor = vColor;
}
</pre>
<h3 id="Varyings">Varyings</h3>
<p><strong>Varyings</strong> 在 vertex shader 中定义，用于从 vertex shader 向 fragment shader 传递数据。通常传递 {{interwiki("wikipedia", "Normal_(geometry)", "normal vector")}} 等在 vertex shader 中计算生成的数据会使用varying。</p>
<p><<how to use>></p>
<h3 id="Uniforms">Uniforms</h3>
<p><strong>Uniform</strong> 通常是由 JavaScript 代码设置并且在 vertex shader 和 fragment shader 中都能够访问。 使用uniform设定在一帧的所有绘制中相同的数据，例如光源颜色、亮度、全局变换以及透视数据等等。</p>
<p><<添加细节>></p>
<h2 id="Buffers">Buffers</h2>
<p><<添加信息>></p>
<h2 id="Textures">Textures</h2>
<p><<添加信息>></p>
|
