Skip to content

Commit 0cfa662

Browse files
anderflashanderflash
committed
teste
1 parent 1edde11 commit 0cfa662

File tree

2 files changed

+598
-0
lines changed

2 files changed

+598
-0
lines changed

‎e03-bandeira/index.html‎

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8"/>
4+
<script id="shader-vs" type="x-shader/x-vertex">
5+
#define M_PI 3.14159265358979323846
6+
attribute vec3 aVertexPosition;
7+
attribute vec4 aVertexColor;
8+
9+
uniform mat4 uMMatrix;
10+
uniform mat4 uVMatrix;
11+
uniform mat4 uPMatrix;
12+
13+
uniform float uTempo;
14+
uniform float uLargura;
15+
uniform float uAmplitude;
16+
17+
varying vec4 vColor;
18+
19+
void main(void)
20+
{
21+
float primeiraParte = M_PI*2.0/uLargura;
22+
gl_Position = uPMatrix * uVMatrix * uMMatrix * vec4(aVertexPosition.x, uAmplitude*sin(primeiraParte*(aVertexPosition.x)+uTempo), aVertexPosition.z, 1.0);
23+
vColor = aVertexColor;
24+
}
25+
</script>
26+
<script id="shader-fs" type="x-shader/x-fragment">
27+
precision mediump float;
28+
varying vec4 vColor;
29+
30+
void main(void)
31+
{
32+
gl_FragColor = vColor;
33+
}
34+
</script>
35+
36+
<!--Funções-->
37+
<script type="text/javascript" src="../glMatrix-0.9.5.min.js"></script>
38+
<script type="text/javascript" src="../jquery-2.1.0.min.js"></script>
39+
<script type="text/javascript" src="../webgl-utils.js"></script>
40+
41+
<script type="text/javascript">
42+
43+
var gl;
44+
var shaderProgram;
45+
var bandeiraVertexPositionBuffer;
46+
var bandeiraVertexColorBuffer;
47+
var bandeiraVertexIndexBuffer;
48+
49+
50+
var mMatrix = mat4.create();
51+
var mMatrixPilha = [];
52+
var pMatrix = mat4.create();
53+
var vMatrix = mat4.create();
54+
55+
var numX = 100;
56+
var numZ = 100;
57+
58+
var rBandeira = 0;
59+
60+
var ultimo = 0;
61+
var tempo = 0;
62+
var largura = 0.25;
63+
var amplitude = 0.5;
64+
var xVelo = 90;
65+
var xRot = 0;
66+
67+
// Iniciar o ambiente quando a página for carregada
68+
$(function()
69+
{
70+
iniciaWebGL();
71+
});
72+
73+
// Iniciar o ambiente
74+
function iniciaWebGL()
75+
{
76+
var canvas = $('#licao01-canvas')[0];
77+
iniciarGL(canvas); // Definir como um canvas 3D
78+
iniciarShaders(); // Obter e processar os Shaders
79+
iniciarBuffers(); // Enviar o triângulo e quadrado na GPU
80+
iniciarAmbiente(); // Definir background e cor do objeto
81+
tick();
82+
}
83+
84+
function tick()
85+
{
86+
requestAnimFrame(tick);
87+
desenharCena();
88+
animar();
89+
}
90+
91+
function iniciarGL(canvas)
92+
{
93+
try
94+
{
95+
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
96+
gl.viewportWidth = canvas.width;
97+
gl.viewportHeight = canvas.height;
98+
}
99+
catch(e)
100+
{
101+
if(!gl)
102+
{
103+
alert("Não pode inicializar WebGL, desculpe");
104+
}
105+
}
106+
}
107+
108+
function iniciarShaders()
109+
{
110+
var vertexShader = getShader(gl, "#shader-vs");
111+
var fragmentShader = getShader(gl, "#shader-fs");
112+
113+
shaderProgram = gl.createProgram();
114+
gl.attachShader(shaderProgram, vertexShader);
115+
gl.attachShader(shaderProgram, fragmentShader);
116+
gl.linkProgram(shaderProgram);
117+
118+
if(!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
119+
{
120+
alert("Não pode inicializar shaders");
121+
}
122+
123+
gl.useProgram(shaderProgram);
124+
125+
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
126+
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
127+
128+
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
129+
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
130+
131+
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
132+
shaderProgram.vMatrixUniform = gl.getUniformLocation(shaderProgram, "uVMatrix");
133+
shaderProgram.mMatrixUniform = gl.getUniformLocation(shaderProgram, "uMMatrix");
134+
shaderProgram.tempoUniform = gl.getUniformLocation(shaderProgram, "uTempo");
135+
shaderProgram.larguraUniform = gl.getUniformLocation(shaderProgram, "uLargura");
136+
shaderProgram.amplitudeUniform = gl.getUniformLocation(shaderProgram, "uAmplitude");
137+
}
138+
139+
function getShader(gl, id)
140+
{
141+
var shaderScript = $(id)[0];
142+
if(!shaderScript)
143+
{
144+
return null;
145+
}
146+
147+
var str = "";
148+
var k = shaderScript.firstChild;
149+
while(k)
150+
{
151+
if(k.nodeType == 3)
152+
str += k.textContent;
153+
k = k.nextSibling;
154+
}
155+
156+
var shader;
157+
if(shaderScript.type == "x-shader/x-fragment")
158+
{
159+
shader = gl.createShader(gl.FRAGMENT_SHADER);
160+
}
161+
else if(shaderScript.type == "x-shader/x-vertex")
162+
{
163+
shader = gl.createShader(gl.VERTEX_SHADER);
164+
}
165+
else
166+
{
167+
return null;
168+
}
169+
170+
gl.shaderSource(shader, str);
171+
gl.compileShader(shader);
172+
173+
if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
174+
{
175+
alert(gl.getShaderInfoLog(shader));
176+
return null;
177+
}
178+
179+
return shader;
180+
}
181+
182+
function iniciarBuffers()
183+
{
184+
var vertices = Array();
185+
var cores = Array();
186+
var indices = Array();
187+
188+
for(var i = 0; i < numZ; i++)
189+
{
190+
for(var j = 0; j < numX; j++)
191+
{
192+
vertices.push(i/numX,0.0,-j/numZ);
193+
//cores.push(1.0, 1.0, 1.0, 1.0);
194+
cores.push(Math.random(),Math.random(),Math.random(),1.0);
195+
if(i%2) indices.push((i+1)*numX-(j+1),(i+2)*numX-(j+1));
196+
else indices.push(i*numX+j,(i+1)*numX+j);
197+
}
198+
}
199+
200+
// Vértices
201+
bandeiraVertexPositionBuffer = gl.createBuffer();
202+
gl.bindBuffer(gl.ARRAY_BUFFER, bandeiraVertexPositionBuffer);
203+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
204+
bandeiraVertexPositionBuffer.itemSize = 3;
205+
bandeiraVertexPositionBuffer.numItems = numX * numZ;
206+
207+
// Cores
208+
bandeiraVertexColorBuffer = gl.createBuffer();
209+
gl.bindBuffer(gl.ARRAY_BUFFER, bandeiraVertexColorBuffer);
210+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cores), gl.STATIC_DRAW);
211+
bandeiraVertexColorBuffer.itemSize = 4;
212+
bandeiraVertexColorBuffer.numItems = numX*numZ;
213+
214+
// Índices
215+
bandeiraVertexIndexBuffer = gl.createBuffer();
216+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bandeiraVertexIndexBuffer);
217+
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
218+
bandeiraVertexIndexBuffer.itemSize = 1;
219+
bandeiraVertexIndexBuffer.numItems = 2*numX*(numZ-1);
220+
}
221+
222+
function iniciarAmbiente()
223+
{
224+
gl.clearColor(0.0, 0.0, 0.0, 1.0);
225+
gl.enable(gl.DEPTH_TEST);
226+
}
227+
228+
function desenharCena()
229+
{
230+
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
231+
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
232+
mat4.identity(mMatrix);
233+
mat4.identity(vMatrix);
234+
//mat4.scale(mMatrix, [2.0, 1.0, 2.0]);
235+
236+
mat4.translate(mMatrix,[-5,-1.0,-7.0]);
237+
//mat4.rotate(mMatrix, degToRad(xRot), [0, 1, 0]);
238+
mat4.scale(mMatrix,[10, 1.0, 10]);
239+
240+
241+
242+
243+
244+
// Desenhando o Quadrado
245+
gl.bindBuffer(gl.ARRAY_BUFFER, bandeiraVertexPositionBuffer);
246+
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, bandeiraVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
247+
gl.bindBuffer(gl.ARRAY_BUFFER, bandeiraVertexColorBuffer);
248+
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, bandeiraVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
249+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bandeiraVertexIndexBuffer);
250+
setMatrixUniforms();
251+
gl.drawElements(gl.TRIANGLE_STRIP, bandeiraVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT,0);
252+
}
253+
254+
function setMatrixUniforms()
255+
{
256+
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
257+
gl.uniformMatrix4fv(shaderProgram.vMatrixUniform, false, vMatrix);
258+
gl.uniformMatrix4fv(shaderProgram.mMatrixUniform, false, mMatrix);
259+
gl.uniform1f(shaderProgram.tempoUniform , tempo );
260+
gl.uniform1f(shaderProgram.larguraUniform, largura);
261+
gl.uniform1f(shaderProgram.amplitudeUniform, amplitude);
262+
}
263+
264+
// o 'var ultimo = 0' está no topo (todos as vars globais estão juntas)
265+
function animar()
266+
{
267+
var agora = new Date().getTime();
268+
if(ultimo != 0)
269+
{
270+
var diferenca = agora-ultimo;
271+
//xRot += ((xVelo*diferenca)/1000.0) % 360.0;
272+
xRot += ((xVelo*diferenca)/1000.0) % 360.0;
273+
tempo += 3*diferenca/1000.0;
274+
}
275+
ultimo = agora;
276+
}
277+
278+
function degToRad(graus)
279+
{
280+
return graus * Math.PI / 180;
281+
}
282+
</script>
283+
284+
<!--Aparência da página (canvas, background...)-->
285+
<style>
286+
canvas
287+
{
288+
border:none;
289+
width:500px;
290+
height:500px;
291+
}
292+
</style>
293+
294+
</head>
295+
296+
<body>
297+
<canvas id="licao01-canvas" width="500" height="500"></canvas>
298+
</body>
299+
</html>

0 commit comments

Comments
 (0)