Skip to content

Instantly share code, notes, and snippets.

@royguo

royguo/buffers.js

Last active December 19, 2015 01:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save royguo/5873503 to your computer and use it in GitHub Desktop.
Save royguo/5873503 to your computer and use it in GitHub Desktop.
Download ZIP
WebGL-Test. index.html里是shader，buffers.js里是所有的物体
Raw
buffers.js
/**
* Global variables:
* bgVertexBuffer
* trianglesVertexBuffer
* cubeVertexBuffer
* cubeIndexBuffer
*/
function initBuffers() {
// bg
bgVertexBuffer = gl.createBuffer();
// bind current buffer for further operations.
gl.bindBuffer(gl.ARRAY_BUFFER, bgVertexBuffer);
var vertices = [
2.0, 2.0, 0.0,
-2.0, 2.0, 0.0,
2.0, -2.0, 0.0,
-2.0, -2.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
bgVertexBuffer.itemSize = 3;
bgVertexBuffer.numItems = 4;
bgVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bgVertexColorBuffer);
var colors = [
0.0, 1.0, 1.0, 1,
1.0, 0.0, 1.0, 1,
0.0, 0.0, 1.0, 1,
0.0, 0.0, 0.0, 1
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
bgVertexColorBuffer.itemSize = 4;
bgVertexColorBuffer.numItems = 4;
// Triangle
trianglesVertexBuffer = gl.createBuffer();
// bind current buffer for further operations.
gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVertexBuffer);
vertices = [
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
trianglesVertexBuffer.numItems = 3;
trianglesVertexBuffer.itemSize = 3;
triangleVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
colors = [
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize = 4;
triangleVertexColorBuffer.numItems = 3;
// Cube
cubeVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBuffer);
vertices = [
// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
// Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0,
// Bottom face
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,
// Right face
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
// Left face
-1.0, -1.0, -1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
cubeVertexBuffer.itemSize = 3;
cubeVertexBuffer.numItems = 24;
cubeVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
colors = [
[1.0, 0.0, 0.0, 1.0], // Front face
[1.0, 1.0, 0.0, 1.0], // Back face
[0.0, 1.0, 0.0, 1.0], // Top face
[1.0, 0.5, 0.5, 1.0], // Bottom face
[1.0, 0.0, 1.0, 1.0], // Right face
[0.0, 0.0, 1.0, 1.0] // Left face
];
var unpackedColors = [];
for (var i in colors) {
var color = colors[i];
for (var j=0; j < 4; j++) {
unpackedColors = unpackedColors.concat(color);
}
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColors), gl.STATIC_DRAW);
cubeVertexColorBuffer.itemSize = 4;
cubeVertexColorBuffer.numItems = 24;
// Square vertex index.
cubeIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer);
var cubeVertexIndices = [
0, 1, 2, 0, 2, 3, // Front face
4, 5, 6, 4, 6, 7, // Back face
8, 9, 10, 8, 10, 11, // Top face
12, 13, 14, 12, 14, 15, // Bottom face
16, 17, 18, 16, 18, 19, // Right face
20, 21, 22, 20, 22, 23 // Left face
];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
cubeIndexBuffer.itemSize = 1;
cubeIndexBuffer.numItems = 36;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="Oak3D_v_0_5_9_Debug.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="buffers.js"></script>
<script type="text/javascript" src="shaders.js"></script>
<script type="text/javascript" src="main.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
</script>
<script id="shader-fs-alpha" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vColor;
void main(void) {
if( gl_FragCoord.x < 350.0 && gl_FragCoord.x > 300.0
&& gl_FragCoord.y < 300.0 && gl_FragCoord.y > 230.0
) {
gl_FragColor = vec4(0, 0 ,0, 0.0);
} else {
gl_FragColor = vec4(vColor.rgb, 1.0);
}
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
// attribute float type;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
// if(type > 0.0) {
// }
}
</script>
<script id="shader-vs-alpha" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
if(gl_Position.x > -2.0 && gl_Position.x < 2.0) {
vColor = vec4(aVertexColor.rgb, 0.0);
} else {
vColor = vec4(aVertexColor.rgb, 1.0);
}
}
</script>
</head>
<body onload = "webGLStart();">
<canvas id="canvas" style="border: none;" width="500" height="500"></canvas>
</body>
</html>
Raw
main.js
var gl;
var shaderProgram;
// Objects
var bgVertexBuffer;
var bgVertexColorBuffer;
var trianglesVertexBuffer;
var triangleVertexColorBuffer;
var cubeVertexBuffer;
var cubeVertexColorBuffer;
var cubeIndexBuffer;
var mvMatrix ;
var mvMatrixStack = [];
var pMatrix ;
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
pMatrix = okMat4Proj(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);
// bg
mvMatrix = okMat4Trans(0, 0, -8.0);
gl.bindBuffer(gl.ARRAY_BUFFER, bgVertexBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, bgVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, bgVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, bgVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, bgVertexBuffer.numItems);
// Triangle
mvMatrix = okMat4Trans(0.5, 0, -5.0);
// bind current buffer for further operations.
gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVertexBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, trianglesVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
// gl.drawArrays(gl.TRIANGLES, 0, trianglesVertexBuffer.numItems);
// The cube
shaderProgram = initShaderAlpha(gl);
mvMatrix = okMat4Trans(0.5, 0, -7.0);
// Cube rotation
mvMatrix.rotY(OAK.SPACE_LOCAL, 10, true);
mvMatrix.rotX(OAK.SPACE_LOCAL, 30, true);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, cubeVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer); // Cube needs position index.
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, cubeIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
// shaderProgram = initShader(gl);
}
function webGLStart() {
var canvas = document.getElementById('canvas');
initGL(canvas);
initBuffers();
gl.clearColor(0, 0, 0, 0.0);
gl.enable(gl.DEPTH_TEST);
// this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
// this.gl.enable(this.gl.BLEND);
// this.gl.disable(this.gl.DEPTH_TEST);
shaderProgram = initShader(gl);
drawScene();
}
Raw
shaders.js
/**
*
*
*/
function initShader(gl) {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
// shaderProgram.objectTypeAttribute = gl.getAttribLocation(shaderProgram, "type");
// gl.enableVertexAttribArray(shaderProgram.objectTypeAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
return shaderProgram;
}
function initShaderAlpha(gl) {
var fragmentShader = getShader(gl, "shader-fs-alpha");
var vertexShaderAlpha = getShader(gl, "shader-vs");
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShaderAlpha);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
// shaderProgram.objectTypeAttribute = gl.getAttribLocation(shaderProgram, "type");
// gl.enableVertexAttribArray(shaderProgram.objectTypeAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
return shaderProgram;
}
Raw
utils.js
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix.toArray());
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix.toArray());
}
function initGL(canvas) {
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
if(!gl) {
alert("couldn't init webGL !");
}
}
function mvPushMatrix() {
var copy = new okMat4();
mvMatrix.clone(copy);
mvMatrixStack.push(copy);
}
function mvPopMatrix() {
if (mvMatrixStack.length == 0) {
throw "Invalid popMatrix!";
}
mvMatrix = mvMatrixStack.pop();
}
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment