window.onload = main;
var randomizeColors;
var fixedColors;
var rotacionar0;
var rotacionar1;
function main() {
// Obtendo o contexto WebGL
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
// inicializando o programa GLSL
var vertexShader = createShaderFromScriptElement(gl, "shader-vs");
var fragmentShader = createShaderFromScriptElement(gl, "shader-fs");
var program = createProgram(gl, [vertexShader, fragmentShader]);
gl.useProgram(program);
// Criando o buffer e definindo as variáveis de posição dos vértices, além dos dados do buffer
var aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([+1.0, +1.0, +1.0, -1.0, -1.0, +1.0, -1.0, -1.0]),
gl.STATIC_DRAW);
gl.enableVertexAttribArray(aVertexPosition);
gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0);
// Criando o buffer e definindo as variáveis de cores iniciais e finais
var colorLocation0 = gl.getAttribLocation(program, "aVertexColor0");
gl.enableVertexAttribArray(colorLocation0);
var bufferColors0 = gl.createBuffer();
var colorLocation1 = gl.getAttribLocation(program, "aVertexColor1");
gl.enableVertexAttribArray(colorLocation1);
var bufferColors1 = gl.createBuffer();
function corAleatoria() {
var c = [Math.random(), Math.random(), Math.random()];
var max = Math.max.apply(null, c);
var c2 = c.map(function(i) {
return i / max;
});
return c2;
}
function corAleatoriaX4() {
var c = [];
c.push.apply(c, corAleatoria());
c.push.apply(c, corAleatoria());
c.push.apply(c, corAleatoria());
c.push.apply(c, corAleatoria());
return c;
}
var corInicial, corFinal;
function setColors(cores0, cores1) {
corInicial = cores0;
corFinal = cores1;
gl.bindBuffer(gl.ARRAY_BUFFER, bufferColors0);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(corInicial), gl.STATIC_DRAW);
gl.vertexAttribPointer(colorLocation0, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, bufferColors1);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(corFinal), gl.STATIC_DRAW);
gl.vertexAttribPointer(colorLocation1, 3, gl.FLOAT, false, 0, 0);
}
function rotacionar(lista) {
lista.push(lista.shift());
lista.push(lista.shift());
lista.push(lista.shift());
setColors(corInicial, corFinal);
}
rotacionar0 = function() {
rotacionar(corInicial);
};
rotacionar1 = function() {
rotacionar(corFinal);
};
randomizeColors = function() {
setColors(
corAleatoriaX4(),
corAleatoriaX4());
}
fixedColors = function() {
setColors(
[0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 1, 0], [1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1]);
}
fixedColors();
var uTempo = gl.getUniformLocation(program, "uTempo");
var tempo = 0.0;
setInterval(function() {
gl.uniform1f(uTempo, tempo);
// desenhando o fundo
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
tempo += 0.1;
}, 100);
}
<script src="http://greggman.github.io/webgl-fundamentals/webgl/resources/webgl-utils.js"></script><divstyle="height:0;">
<canvas id="canvas" width="600" height="150"></canvas>
</div>
<div style="position: relative; width:600px; height: 150px; padding: 10px;">
<button onclick="randomizeColors()">randomizeColors</button>
<button onclick="fixedColors()">fixedColors</button>
<button onclick="rotacionar0()">rotacionar0</button>
<button onclick="rotacionar1()">rotacionar1</button>
</div>
<script id="shader-vs" type="x-shader/x-vertex">
const float speed = 0.1;
attribute vec3 aVertexPosition;
attribute vec3 aVertexColor0;
attribute vec3 aVertexColor1;
uniform float uTempo;
varying lowp vec4 vColor;
const float PI = 3.14159265359;
void main(void) {
gl_Position = vec4(aVertexPosition, 1.0);
float t = (cos(uTempo*2.*PI*speed)+1.)*0.5;
vColor = vec4(aVertexColor0, 1.0) * t + vec4(aVertexColor1, 1.0) * (1.-t);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
varying lowp vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
</script>
