aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/webgl_api/data/index.html
blob: a8570b2e6809656ac0e4fd860eff9a3754965160 (plain)
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>&lt;&lt;关于 基本数据类型, 向量等,参见Khronos WebGL Wiki的文档:<a href="https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)">Data Type (GLSL)</a> &gt;&gt;</p>

<h2 id="GLSL_变量">GLSL 变量</h2>

<p>GLSL中有三种类型的“变量”或者说数据存储类型。每一种类型都有特定的目标和使用方法:: <strong><a href="#attributes">attributes</a></strong><strong><a href="#varyings">varyings</a></strong><strong><a href="#uniforms">uniforms</a></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>&lt;&lt;how to use&gt;&gt;</p>

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

<p><strong>Uniform</strong> 通常是由 JavaScript 代码设置并且在 vertex shader 和 fragment shader 中都能够访问。 使用uniform设定在一帧的所有绘制中相同的数据,例如光源颜色、亮度、全局变换以及透视数据等等。</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>