3D куб в Webgl ⇐ Javascript

[Anonymous]

Я работал над пониманием оснований Webgl и пытаюсь сделать 3D-куб. Я написал два файла clfcube.html и clfcube.js. I want each of the 8 vertices to have a different color and I want to twist the cube along the Z axis at an angle of 30 degrees.
The colors of the vertices should be:
Black (0.0, 0.0, 0.0, 1.0)
Red (1.0, 0.0, 0.0, 1.0)
Yellow (1.0, 1.0, 0.0, 1.0)
Green (0,0, 1,0, 0,0, 1,0)
Blue (0,0, 0,0, 1,0, 1,0)
Magenta (1,0, 0,0, 1,0, 1,0)
белый (1,0, 1,0, 1,0, 1,0)
cyan (0,0, 1,0, 1,0, 1,0). изображение 2D квадрат и возиться с цветами < /p>




3D Cube


attribute vec3 vPosition;
attribute vec3 vColor;
varying vec4 color;

void
main()
{
gl_Position = vec4(vPosition, 1.0);
color = vec4(vColor, 1.0);
}



precision mediump float;

varying vec4 color;

void main()
{
gl_FragColor = color;
}










Oops ... your browser doesn’t support the HTML5 canvas element



< /code>
"use strict";

var canvas;
var gl;

var points = [];
var colors = [];

var theta = 0.0;

window.onload = function init()
{
canvas = document.getElementById("gl-canvas");

gl = WebGLUtils.setupWebGL(canvas);
if (!gl) { alert("WebGL isn't available"); }

// 8 cube vertices
var vertices = [
vec3(-0.5, -0.5, 0.5), // 0
vec3( 0.5, -0.5, 0.5), // 1
vec3( 0.5, 0.5, 0.5), // 2
vec3(-0.5, 0.5, 0.5), // 3
vec3(-0.5, -0.5, -0.5), // 4
vec3( 0.5, -0.5, -0.5), // 5
vec3( 0.5, 0.5, -0.5), // 6
vec3(-0.5, 0.5, -0.5) // 7
];

// Build cube faces
quad(vertices, 0, 1, 2, 3); // front
quad(vertices, 1, 5, 6, 2); // right
quad(vertices, 5, 4, 7, 6); // back
quad(vertices, 4, 0, 3, 7); // left
quad(vertices, 3, 2, 6, 7); // top
quad(vertices, 4, 5, 1, 0); // bottom

//
// Configure WebGL
//
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);

// Load shaders and initialize attribute buffers
var program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);

// Color buffer
var cBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);

var vColor = gl.getAttribLocation(program, "vColor");
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);

// Vertex buffer
var vBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);

var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);

// Get uniform location for MVP
program.uMVP = gl.getUniformLocation(program, "uMVP");

render(program);
};

function quad(vertices, a, b, c, d) {
triangle(vertices, a, b, c);
triangle(vertices, a, c, d);
}

function triangle(vertices, a, b, c) {
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, 1.0, 1.0), // blue
vec4(1.0, 0.0, 1.0, 1.0), // magenta
vec4(1.0, 1.0, 1.0, 1.0), // white
vec4(0.0, 1.0, 1.0, 1.0) // cyan
];

points.push(vertices[a]); colors.push(vertexColors[a]);
points.push(vertices); colors.push(vertexColors);
points.push(vertices[c]); colors.push(vertexColors[c]);
}

function render(program) {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

theta += 1.0; // rotation speed (degrees)
var model = mult(rotateY(theta), rotateX(theta * 0.7));
var view = translate(0.0, 0.0, -2.0);
var projection = perspective(45.0, 1.0, 0.1, 10.0);

var mvp = mult(projection, mult(view, model));

gl.uniformMatrix4fv(program.uMVP, false, flatten(mvp));

gl.drawArrays(gl.TRIANGLES, 0, points.length);
requestAnimationFrame(function () { render(program); });
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... e-in-webgl