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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
---
title: Scissor animation
slug: Web/API/WebGL_API/By_example/Scissor_animation
translation_of: Web/API/WebGL_API/By_example/Scissor_animation
---
<div>{{IncludeSubnav("/en-US/Learn")}}</div>
<p>{{PreviousNext("Learn/WebGL/By_example/Boilerplate_1","Learn/WebGL/By_example/Raining_rectangles")}}</p>
<div id="scissor-animation">
<div class="summary">
<p>使用剪切和清除操作实现一些动画的简单WebGL的例子。</p>
</div>
<p>{{EmbedLiveSample("scissor-animation-source",660,425)}}</p>
<div>
<h3 id="剪切动画">剪切动画</h3>
<p>本例中，我们使用{{domxref("WebGLRenderingContext.scissor()","scissor()")}} 和 {{domxref("WebGLRenderingContext.clear()","clear()")}}。我们再次建立一个动画循环使用计时器。注意,这次是方块的位置(剪切区)更新每一帧(我们设置帧率大约每17毫秒，约60 fps -帧每秒)</p>
<p>相比之下，方块的颜色(用{{domxref("WebGLRenderingContext.clearColor()","clearColor")}})仅创建一个新的方块。这是一个很好的演示{{Glossary("WebGL")}}是一个状态机。对于每一个方块，我们设置它的颜色,然后只更新它的位置每一帧。WebGL的清晰的颜色状态维持在设定值,直到我们再次改变它创建一个新的方块。</p>
</div>
<div id="scissor-animation-source">
<div class="hidden">
<pre class="brush: html"><p>WebGL animation by clearing the drawing buffer with solid
color and applying scissor test.</p>
<button id="animation-onoff">
Press here to
<strong>[verb goes here]</strong>
the animation</button>
</pre>
<pre class="brush: html"><canvas>Your browser does not seem to support
HTML5 canvas.</canvas>
</pre>
<pre class="brush: css">body {
text-align : center;
}
canvas {
display : block;
width : 280px;
height : 210px;
margin : auto;
padding : 0;
border : none;
background-color : black;
}
button {
display : block;
font-size : inherit;
margin : auto;
padding : 0.6em;
}
</pre>
</div>
<div class="hidden">
<pre class="brush: js">;(function(){
</pre>
</div>
<pre class="brush: js" id="livesample-js">"use strict"
window.addEventListener("load", setupAnimation, false);
// Variables to hold the WebGL context, and the color and
// position of animated squares.
var gl,
color = getRandomColor(),
position;
function setupAnimation (evt) {
window.removeEventListener(evt.type, setupAnimation, false);
if (!(gl = getRenderingContext()))
return;
gl.enable(gl.SCISSOR_TEST);
gl.clearColor(color[0], color[1], color[2], 1.0);
// Unlike the browser window, vertical position in WebGL is
// measured from bottom to top. In here we set the initial
// position of the square to be at the top left corner of the
// drawing buffer.
position = [0, gl.drawingBufferHeight];
var button = document.querySelector("button");
var timer;
function startAnimation(evt) {
button.removeEventListener(evt.type, startAnimation, false);
button.addEventListener("click", stopAnimation, false);
document.querySelector("strong").innerHTML = "stop";
timer = setInterval(drawAnimation, 17);
drawAnimation();
}
function stopAnimation(evt) {
button.removeEventListener(evt.type, stopAnimation, false);
button.addEventListener("click", startAnimation, false);
document.querySelector("strong").innerHTML = "start";
clearInterval(timer);
}
stopAnimation({type: "click"});
}
// Variables to hold the size and velocity of the square.
var size = [60, 60],
velocity = 3.0;
function drawAnimation () {
gl.scissor(position[0], position[1], size[0] , size[1]);
gl.clear(gl.COLOR_BUFFER_BIT);
// Every frame the vertical position of the square is
// decreased, to create the illusion of movement.
position[1] -= velocity;
// When the sqaure hits the bottom of the drawing buffer,
// we override it with new square of different color and
// velocity.
if (position[1] < 0) {
// Horizontal position chosen randomly, and vertical
// position at the top of the drawing buffer.
position = [
Math.random()*(gl.drawingBufferWidth - size[0]),
gl.drawingBufferHeight
];
// Random velocity between 1.0 and 7.0
velocity = 1.0 + 6.0*Math.random();
color = getRandomColor();
gl.clearColor(color[0], color[1], color[2], 1.0);
}
}
function getRandomColor() {
return [Math.random(), Math.random(), Math.random()];
}
</pre>
<div class="hidden">
<pre class="brush: js">function getRenderingContext() {
var canvas = document.querySelector("canvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var gl = canvas.getContext("webgl")
|| canvas.getContext("experimental-webgl");
if (!gl) {
var paragraph = document.querySelector("p");
paragraph.innerHTML = "Failed to get WebGL context."
+ "Your browser or device may not support WebGL.";
return null;
}
gl.viewport(0, 0,
gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
return gl;
}
</pre>
</div>
<div class="hidden">
<pre class="brush: js">})();
</pre>
</div>
<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation">GitHub</a>.</p>
</div>
</div>
<p>{{PreviousNext("Learn/WebGL/By_example/Boilerplate_1","Learn/WebGL/By_example/Raining_rectangles")}}</p>
|
