re-set gl.viewport() does not work

re-set gl.viewport() does not work - webgl

When I resize my four canvases (actual width and height, not just CSS, to adapt to screen ratio when going fullscreen), the canvas which uses webgl does not update. Though I call
gl.viewport( 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight );
it stays with original ratio, and so it is offset from the other canvas.
What am I missing ?
The only info I could find on the internet is to update my matrix too, but I do not use any matrix, I just use a texture on two triangles.
creation code :
gl.viewport(0, 0, game.w, game.h);
gl.vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
gl.fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
gl.program = createProgram(gl, [gl.vertexShader, gl.fragmentShader]);
gl.useProgram( gl.program);
gl.positionLocation = gl.getAttribLocation( gl.program, "a_position");
gl.texCoordLocation = gl.getAttribLocation( gl.program, "a_texCoord");
gl.texCoordBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, gl.texCoordBuffer );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0]), gl.STATIC_DRAW);
gl.enableVertexAttribArray( gl.texCoordLocation );
gl.vertexAttribPointer( gl.texCoordLocation , 2, gl.FLOAT, false, 0, 0);
gl.posBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER , gl.posBuffer );
gl.bufferData( gl.ARRAY_BUFFER , new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0]), gl.STATIC_DRAW);
gl.enableVertexAttribArray( gl.positionLocation );
gl.vertexAttribPointer( gl.positionLocation, 2, gl.FLOAT, false, 0, 0 );
gl.resolutionLocation = gl.getUniformLocation( gl.program, "u_resolution" );
webglalpha = gl.getUniformLocation( gl.program, "alpha" );

I found out by myself, the resolution uniform has to be updated too :
gl.uniform2f( gl.resolutionLocation , game.width , game.height );

Related

How stencil buffer and masking work?

I want to draw object in just specific area. Please take a look this image for reference
The 2 triangles (picture A) being draw just in the area inside the quad (picture B), so the result will look clipped (picture C).
First i draw the quad just in stencil buffer.
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
gl.stencilFunc(gl.ALWAYS, 1, 0xff);
gl.stencilMask(0xff);
gl.depthMask(false);
gl.colorMask(false, false, false, false);
drawQuads();
in my understanding, now the stencil buffer has value 1s in the quad area. Then, draw the triangles.
gl.stencilFunc(gl.EQUAL, 1, 0xff);
gl.stencilMask(0x00);
gl.depthMask(true);
gl.colorMask(true, true, true, true);
drawTriagles();
I was expect the result will be like on the picture (C), but it's not. What I am doing wrong?
Please find the complete code here https://jsfiddle.net/z11zhf01/1

Your program works absolute correctly, but you have to tell the getContext function to create a stencil buffer, when the context is created:
gl = glcanvas.getContext("webgl", {stencil:true});
See Khronos WebGL Specification - WebGLContextAttributes:
stencil
If the value is true, the drawing buffer has a stencil buffer of at least 8 bits. If the value is false, no stencil buffer is available.
See the Example:
(function() {
var gl;
var gProgram;
var gVertexAttribLocation;
var gColorAttribLocation;
var gTriangleVertexBuffer;
var gTriangleColorBuffer;
var gQuadVertexBuffer;
var gQuadColorBuffer;
function initGL() {
var glcanvas = document.getElementById("glcanvas");
gl = glcanvas.getContext("webgl", {stencil:true});
}
function createAndCompileShader(type, source) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
throw new Error(gl.getShaderInfoLog(shader));
}
return shader;
}
function createAndLinkProgram(glVertexShader, glFragmentShader) {
var glProgram = gl.createProgram();
gl.attachShader(glProgram, glVertexShader);
gl.attachShader(glProgram, glFragmentShader);
gl.linkProgram(glProgram);
if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
throw new Error("Could not initialise shaders");
}
return glProgram;
}
function initShaderPrograms() {
var gVertexShader = createAndCompileShader(gl.VERTEX_SHADER, [
"attribute vec3 a_vertex;",
"attribute vec4 a_color;",
"varying vec4 v_color;",
"void main(void) {",
"v_color = a_color;",
"gl_Position = vec4(a_vertex, 1.0);",
"}"
].join("\n"));
var gFragmentShader = createAndCompileShader(gl.FRAGMENT_SHADER, [
"precision mediump float;",
"varying vec4 v_color;",
"void main(void) {",
"gl_FragColor = v_color;",
"}"
].join("\n"));
gProgram = createAndLinkProgram(gVertexShader, gFragmentShader);
}
function initGLAttribLocations() {
gVertexAttribLocation = gl.getAttribLocation(gProgram, "a_vertex");
gColorAttribLocation = gl.getAttribLocation(gProgram, "a_color");
}
function initBuffers() {
gTriangleVertexBuffer = gl.createBuffer();
gTriangleColorBuffer = gl.createBuffer();
gQuadVertexBuffer = gl.createBuffer();
gQuadColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gTriangleVertexBuffer);
var vertices = new Float32Array([
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0,
0.0, -1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, 1.0, 0.0
]);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, gTriangleColorBuffer);
var colors = new Float32Array([
0.0, 1.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 1.0
]);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, gQuadVertexBuffer);
var vertices = new Float32Array([
-1.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, 1.0, 0.0,
1.0, -1.0, 0.0
]);
for(let i = 0, ii = vertices.length; i < ii; ++i) {
vertices[i] *= 0.75;
}
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, gQuadColorBuffer);
var colors = new Float32Array([
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
]);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
}
function drawQuads() {
gl.bindBuffer(gl.ARRAY_BUFFER, gQuadVertexBuffer);
gl.vertexAttribPointer(gVertexAttribLocation, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, gQuadColorBuffer);
gl.vertexAttribPointer(gColorAttribLocation, 4, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
function drawTriagles() {
gl.bindBuffer(gl.ARRAY_BUFFER, gTriangleVertexBuffer);
gl.vertexAttribPointer(gVertexAttribLocation, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, gTriangleColorBuffer);
gl.vertexAttribPointer(gColorAttribLocation, 4, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
function renderScene() {
gl.enable(gl.STENCIL_TEST);
gl.enable(gl.DEPTH_TEST);
// gl.enable(gl.CULL_FACE);
gl.useProgram(gProgram);
gl.clearColor(0.5, 0.5, 0.5, 1.0);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
gl.enableVertexAttribArray(gVertexAttribLocation);
gl.enableVertexAttribArray(gColorAttribLocation);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
gl.stencilFunc(gl.ALWAYS, 1, 0xff);
gl.stencilMask(0xff);
gl.depthMask(false);
gl.colorMask(false, false, false, false);
drawQuads();
gl.stencilFunc(gl.EQUAL, 1, 0xff);
gl.stencilMask(0x00);
gl.depthMask(true);
gl.colorMask(true, true, true, true);
drawTriagles();
gl.disableVertexAttribArray(gVertexAttribLocation);
gl.disableVertexAttribArray(gColorAttribLocation);
gl.flush();
}
initGL();
initShaderPrograms();
initGLAttribLocations();
initBuffers();
renderScene();
}());
<main>
<canvas id="glcanvas" width="480" height="360">
WebGL not supported!
</canvas>
</main>

How do you link together triangle strips with degenerated triangles?

var gl;
var canvas;
var shaderProgram;
var triangleVertexBuffer;
var triangleVertexColorBuffer;
var stripElementBuffer;
var stripVertexBuffer;
//Declare new variables here
function createGLContext(canvas) {
var names = ["webgl", "experimental-webgl"];
var context = null;
for (var i=0; i < names.length; i++) {
try {
context = canvas.getContext(names[i]);
} catch(e) {}
if (context) {
break;
}
}
if (context) {
context.viewportWidth = canvas.width;
context.viewportHeight = canvas.height;
} else {
alert("Failed to create WebGL context!");
}
return context;
}
function loadShaderFromDOM(id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var shaderSource = "";
var currentChild = shaderScript.firstChild;
while (currentChild) {
if (currentChild.nodeType == 3) { // 3 corresponds to TEXT_NODE
shaderSource += currentChild.textContent;
}
currentChild = currentChild.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, shaderSource);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
function setupShaders() {
vertexShader = loadShaderFromDOM("shader-vs");
fragmentShader = loadShaderFromDOM("shader-fs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Failed to setup shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
// For the triangle we want to use per-vertex color so
// the vertexColorAttribute, aVertexColor, in the vertex shader
// is enabled.
// You must enable this attribute here or in draw method before the
//triangle is drawn
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
}
function setupBuffers() {
triangleVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
var triangleVertices = [
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(triangleVertices), gl.STATIC_DRAW);
triangleVertexBuffer.itemSize = 3;
triangleVertexBuffer.numberOfItems = 3;
// Triangle vertex colours
triangleVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
var colors = [
1.0, 0.0, 0.0, 1.0, //v0
0.0, 1.0, 0.0, 1.0, //v1
0.0, 0.0, 1.0, 1.0 //v2
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize = 4;
triangleVertexColorBuffer.numberOfItems = 3;
// Add new items: the followings are newly added items
//hexagon vertices
hexagonVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, hexagonVertexBuffer);
var hexagonVertices = [
-0.3, 0.6, 0.0, //v0
-0.4, 0.8, 0.0, //v1
-0.6, 0.8, 0.0, //v2
-0.7, 0.6, 0.0, //v3
-0.6, 0.4, 0.0, //v4
-0.4, 0.4, 0.0, //v5
-0.3, 0.6, 0.0, //v6
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(hexagonVertices), gl.STATIC_DRAW);
hexagonVertexBuffer.itemSize = 3;
hexagonVertexBuffer.numberOfItems = 7;
//Triangle strip vertices.
stripVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, stripVertexBuffer);
var stripVertices = [
-0.5, 0.2, 0.0, //v0
-0.4, 0.0, 0.0, //v1
-0.3, 0.2, 0.0, //v2
-0.2, 0.0, 0.0, //v3
-0.1, 0.2, 0.0, //v4
0.0, 0.0, 0.0, //v5
0.1, 0.2, 0.0, //v6
0.2, 0.0, 0.0, //v7
0.3, 0.2, 0.0, //v8
0.4, 0.0, 0.0, //v9
0.5, 0.2, 0.0, //v10
// Second strip
-0.5, -0.3, 0.0, //v11
-0.4, -0.5, 0.0, //v12
-0.3, -0.3, 0.0, //v13
-0.2, -0.5, 0.0, //v14
-0.1, -0.3, 0.0, //v15
0.0, -0.5, 0.0, //v16
0.1, -0.3, 0.0, //v17
0.2, -0.5, 0.0, //v18
0.3, -0.3, 0.0, //v19
0.4, -0.5, 0.0, //v20
0.5, -0.3, 0.0 //v21
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(stripVertices), gl.STATIC_DRAW);
stripVertexBuffer.itemSize = 3;
stripVertexBuffer.numberOfItems = 22;
// Strip vertex indices
stripElementBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, stripElementBuffer);
var indices = [
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
// put correct indices here. Use degenerated triangles to link the
// strips together
];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
stripElementBuffer.numberOfItems = 25;
}
function draw() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw triangle. No change is made to the last week's code here
// For the triangle we want to use per-vertex color so
// the vertexColorAttribute, aVertexColor, in the vertex shader
// is enabled
// gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
// Make vertex buffer "triangleVertexBuffer" the current buffer
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
// Link the current buffer to the attribute "aVertexPosition" in
// the vertex shader
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
// Make color buffer "triangleVertexColorBuffer" the current buffer
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
// Link the current buffer to the attribute "aVertexColor" in
// the vertex shader
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexBuffer.numberOfItems);
gl.drawElements(gl.TRIANGLE_STRIP, 0, stripVertexBuffer.numberOfItems, 25);
// Draw the newly added items
}
function startup() {
canvas = document.getElementById("myGLCanvas");
gl = createGLContext(canvas);
setupShaders();
setupBuffers();
gl.clearColor(1.0, 1.0, 1.0, 1.0);
draw();
}
startup();
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
varying vec4 vColor;
void main() {
vColor = aVertexColor;
gl_Position = vec4(aVertexPosition, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
</script>
<canvas id="myGLCanvas" width="250" height="250"></canvas>
Hey guys. New to WEBGL, trying to draw the triangle strip but no clue on how to approach this.
what I know:
When drawing with gl.TRIANGLE_STRIP mode, the order of the vertex coordinates or indices in the buffer is important.
Instead of specifying triangles by the programmer, WebGL constructs triangles automatically.
It reads vertex coordinate buffer or index buffer and use them in the following order to construct triangles:

these 2 lines in the code don't make any sense
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexBuffer.numberOfItems);
gl.drawElements(gl.TRIANGLE_STRIP, 0, stripVertexBuffer.numberOfItems, 25);
It generally makes no sense to call draw twice without changing something in between since to draw 2 things requires setting up different data.
Further, the 2nd line is just plain wrong
gl.drawElements(gl.TRIANGLE_STRIP, 0, stripVertexBuffer.numberOfItems, 25);
If you had opened your JavaScript Console you would have seen an error something like
There are several issues
The code is passing a bad value to the type parameter of gl.drawElements
Type parameter to gl.drawElements is the type of data in the current ELEMENT_ARRAY_BUFFER.
The 2nd parameter is the count.
It's passing the number of vertices (stripVertexBuffer.numberOfItems) not the number of indices (stripElementBuffer.numberOfItems)
It should be something like this
{
const primitive = gl.TRIANGLE_STRIP;
const count = stripElementBuffer.numberOfItems;
const offset = 0;
const indexType = gl.UNSIGNED_SHORT;
gl.drawElements(primitive, count, indexType, offset);
}
Fixing that though isn't enough because the code does not actually put indices in the index buffer. That code
// Strip vertex indices
stripElementBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, stripElementBuffer);
var indices = [
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
// put correct indices here. Use degenerated triangles to link the
// strips together
];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
stripElementBuffer.numberOfItems = 25;
also makes no sense. Indices are unsigned integer values from 0 to N where N is the one less than the number of vertices bound to the attributes. Further only 9 values are put in but the code sets stripElementBuffer.numberOfItems to 25 .. ?
Then, on top of all of that the code is not setting up the attributes for using the strip vertices.
To draw multiple things in WebGL works like this
for each thing you want to draw
gl.useProgram(theProgramYouWantToDrawWith);
// setup attributes
for each attribute
gl.bindBuffer(gl.ARRAY_BUFFER, bufferWithDataForAttribute);
gl.enableVertexAttribArray(attribLocation);
gl.vertexAttribPointer(attribLocation, ... how to get data out of buffer ...)
// if using indices setup the ELEMENT_ARRAY_BUFFER
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferWithIndices);
// setup textures
for each texture you're going to draw with
gl.activeTexture(gl.TEXTURE0 + unit);
gl.bindTexture(gl.TEXTURE_??, someTexture);
// setup uniforms
for each uniform
gl.uniformXXX(...)
// draw
gl.drawXXX (either gl.drawArrays or gl.drawElements)
Before you can even attempt degenerate triangle strips you need to fix your code to follow that pattern. Also here's some other tutorials you might find helpful

Drawing a Cube in WebGL

I am not sure what is the problem in this code, but when I try to draw lines of a cube which are far side (last 4 lines) from the camera view than the object disappear. However, I do able to draw 8 edge lines of the cube.
Lines (points) for the Cubes are as follows. Only first 8 lines (16 points) showed, but rest 4 lines (8 points) I couldn't add to the cube.
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4( 0.5, -0.5, 0.5, 1.0) //8
/*
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4( 0.5, -0.5, 0.5, 1.0) //8
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4( 0.5, -0.5, 0.5, 1.0) //8
*/
Much appreciate any help.
Here is the Code:
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
void main()
{
gl_Position = projectionMatrix*modelViewMatrix*vPosition;
fColor = vColor;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
var canvas;
var gl;
var NumVertices = 24;
var vertices = [
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4( 0.5, -0.5, 0.5, 1.0) //8
/*
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4( 0.5, -0.5, 0.5, 1.0) //8
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4( 0.5, -0.5, 0.5, 1.0) //8
*/
];
var vertexColors = [
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
/*
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
*/
];
var near = 0.3;
var far = 10.0;
var radius = 4.0;
var theta = 0.0;
var phi = 0.0;
var dr = 5.0 * Math.PI/180.0;
var fovy = 90.0; // Field-of-view in Y direction angle (in degrees)
var aspect; // Viewport aspect ratio
var modelViewMatrix, projectionMatrix;
var modelViewMatrixLoc, projectionMatrixLoc;
var eye;
const at = vec3(0.0, 0.0, 0.0);
const up = vec3(0.0, 1.0, 0.0);
var program;
var program_originline;
var cBuffer;
var vColor;
var vBuffer;
var vPosition;
var l_vBuffer;
var l_vPosition;
var l_cBuffer;
var l_vColor;
window.onload = function init() {
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
gl.viewport( 0, 0, canvas.width, canvas.height );
aspect = 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
program_originline = initShaders( gl, "vertex-shader", "fragment-shader" );
program = initShaders( gl, "vertex-shader", "fragment-shader" );
//CUBE Buffers
cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
//gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );
vColor = gl.getAttribLocation( program, "vColor" );
//gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
//gl.enableVertexAttribArray( vColor);
vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
//gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );
vPosition = gl.getAttribLocation( program, "vPosition" );
//Static Line
var l_vertices = [
vec4(0.0, 0.0, 0.0, 1.0),
vec4(5.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 5.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 5.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(-5.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, -5.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, -5.0, 1.0),
];
// Load the data into the GPU
l_vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(l_vertices), gl.STATIC_DRAW );
// Associate out shader variables with our data buffer
l_vPosition = gl.getAttribLocation( program_originline, "vPosition" );
var l_colors = [
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
];
l_cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(l_colors), gl.STATIC_DRAW );
l_vColor = gl.getAttribLocation( program_originline, "vColor" );
// buttons for viewing parameters
document.getElementById("Button1").onclick = function(){near *= 1.1; far *= 1.1;};
document.getElementById("Button2").onclick = function(){near *= 0.9; far *= 0.9;};
document.getElementById("Button3").onclick = function(){radius *= 2.0;};
document.getElementById("Button4").onclick = function(){radius *= 0.5;};
document.getElementById("Button5").onclick = function(){theta += dr;};
document.getElementById("Button6").onclick = function(){theta -= dr;};
document.getElementById("Button7").onclick = function(){phi += dr;};
document.getElementById("Button8").onclick = function(){phi -= dr;};
render();
}
var render = function(){
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//LINE PROGRAM
gl.useProgram( program_originline );
gl.enableVertexAttribArray( l_vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
gl.vertexAttribPointer( l_vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( l_vColor );
gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
gl.vertexAttribPointer( l_vColor, 4, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.LINES, 0, 12);
modelViewMatrixLoc = gl.getUniformLocation( program_originline, "modelViewMatrix" );
projectionMatrixLoc = gl.getUniformLocation( program_originline, "projectionMatrix" );
eye = vec3(radius*Math.sin(theta)*Math.cos(phi),
radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
modelViewMatrix = lookAt(eye, at , up);
projectionMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );
//CUBE PROGRAM
gl.useProgram( program );
gl.enableVertexAttribArray( vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor);
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.LINES, 0, 18 );
modelViewMatrixLoc = gl.getUniformLocation( program, "modelViewMatrix" );
projectionMatrixLoc = gl.getUniformLocation( program, "projectionMatrix" );
eye = vec3(radius*Math.sin(theta)*Math.cos(phi),radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
modelViewMatrix = lookAt(eye, at , up);
projectionMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );
requestAnimFrame(render);
}

You have to update the drawArrays's last parameter from 18 to 24 (since there are 12 lines per cube and 2 vertices per line).
gl.drawArrays( gl.LINES, 0, 24 );
And of course remember to uncomment the lines in the vertices and vertexColors arrays (and make sure the arrays don't have any missing or extra commas in them).
Here is your code after I made all the necessary fixes:
var canvas;
var gl;
var NumVertices = 24;
var vertices = [
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4( 0.5, -0.5, 0.5, 1.0), //8
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4( 0.5, -0.5, 0.5, 1.0), //8
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4( 0.5, -0.5, 0.5, 1.0) //8
];
var vertexColors = [
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
];
var near = 0.3;
var far = 10.0;
var radius = 4.0;
var theta = 0.0;
var phi = 0.0;
var dr = 5.0 * Math.PI/180.0;
var fovy = 90.0; // Field-of-view in Y direction angle (in degrees)
var aspect; // Viewport aspect ratio
var modelViewMatrix, projectionMatrix;
var modelViewMatrixLoc, projectionMatrixLoc;
var eye;
const at = vec3(0.0, 0.0, 0.0);
const up = vec3(0.0, 1.0, 0.0);
var program;
var program_originline;
var cBuffer;
var vColor;
var vBuffer;
var vPosition;
var l_vBuffer;
var l_vPosition;
var l_cBuffer;
var l_vColor;
window.onload = function init() {
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
gl.viewport( 0, 0, canvas.width, canvas.height );
aspect = 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
program_originline = initShaders( gl, "vertex-shader", "fragment-shader" );
program = initShaders( gl, "vertex-shader", "fragment-shader" );
//CUBE Buffers
cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
//gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );
vColor = gl.getAttribLocation( program, "vColor" );
//gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
//gl.enableVertexAttribArray( vColor);
vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
//gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );
vPosition = gl.getAttribLocation( program, "vPosition" );
//Static Line
var l_vertices = [
vec4(0.0, 0.0, 0.0, 1.0),
vec4(5.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 5.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 5.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(-5.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, -5.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, -5.0, 1.0),
];
// Load the data into the GPU
l_vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(l_vertices), gl.STATIC_DRAW );
// Associate out shader variables with our data buffer
l_vPosition = gl.getAttribLocation( program_originline, "vPosition" );
var l_colors = [
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
];
l_cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(l_colors), gl.STATIC_DRAW );
l_vColor = gl.getAttribLocation( program_originline, "vColor" );
// buttons for viewing parameters
document.getElementById("Button1").onclick = function(){near *= 1.1; far *= 1.1;};
document.getElementById("Button2").onclick = function(){near *= 0.9; far *= 0.9;};
document.getElementById("Button3").onclick = function(){radius *= 2.0;};
document.getElementById("Button4").onclick = function(){radius *= 0.5;};
document.getElementById("Button5").onclick = function(){theta += dr;};
document.getElementById("Button6").onclick = function(){theta -= dr;};
document.getElementById("Button7").onclick = function(){phi += dr;};
document.getElementById("Button8").onclick = function(){phi -= dr;};
render();
}
var render = function(){
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//LINE PROGRAM
gl.useProgram( program_originline );
gl.enableVertexAttribArray( l_vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
gl.vertexAttribPointer( l_vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( l_vColor );
gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
gl.vertexAttribPointer( l_vColor, 4, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.LINES, 0, 12);
modelViewMatrixLoc = gl.getUniformLocation( program_originline, "modelViewMatrix" );
projectionMatrixLoc = gl.getUniformLocation( program_originline, "projectionMatrix" );
eye = vec3(radius*Math.sin(theta)*Math.cos(phi),
radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
modelViewMatrix = lookAt(eye, at , up);
projectionMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );
//CUBE PROGRAM
gl.useProgram( program );
gl.enableVertexAttribArray( vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor);
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.LINES, 0, 24 );
modelViewMatrixLoc = gl.getUniformLocation( program, "modelViewMatrix" );
projectionMatrixLoc = gl.getUniformLocation( program, "projectionMatrix" );
eye = vec3(radius*Math.sin(theta)*Math.cos(phi),radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
modelViewMatrix = lookAt(eye, at , up);
projectionMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );
requestAnimFrame(render);
}
<html>
<head>
<script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"></script>
<script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
<script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
void main()
{
gl_Position = projectionMatrix*modelViewMatrix*vPosition;
fColor = vColor;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
</head>
<body>
<div>
<canvas id="gl-canvas" width="300" height="300"></canvas>
</div>
<div>
<button id="Button1" type="button">1</button>
<button id="Button2" type="button">2</button>
<button id="Button3" type="button">3</button>
<button id="Button4" type="button">4</button>
<button id="Button5" type="button">5</button>
<button id="Button6" type="button">6</button>
<button id="Button7" type="button">7</button>
<button id="Button8" type="button">8</button>
</div>
</body>
</html>

Draw Multiple Shapes in WebGL

I am facing the same issue of creating multiple objects ( One rotating and One static). I want to draw a static rectangle in the following code (The rotating rectangle code is from Edward Angels WebGL examples). I try to follow the instructions that gman has said from the link Drawing many shapes in WebGL, but still not able to solve. It would be nice to get some help on this to create another static object such as rectangle along with this rotating rectangle in the code. Thanks.
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
uniform float theta;
void
main()
{
float s = sin( theta );
float c = cos( theta );
gl_Position.x = -s * vPosition.x + c * vPosition.y;
gl_Position.y = s * vPosition.y + c * vPosition.x;
gl_Position.z = 0.0;
gl_Position.w = 1.0;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void
main()
{
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}
</script>
var canvas;
var gl;
var theta = 0.0;
var thetaLoc;
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
var vertices = [
vec2( 0, 1 ),
vec2( 1, 0 ),
vec2( -1, 0 ),
vec2( 0, -1 )
];
var bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
thetaLoc = gl.getUniformLocation( program, "theta" );
render();
};
function render() {
gl.clear( gl.COLOR_BUFFER_BIT );
theta += 0.1;
gl.uniform1f( thetaLoc, theta );
gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );
window.requestAnimFrame(render);
}

So, were you define your vertices for the rectangle, simply add on more vertices to create an additional rectangle at a different point on the canvas. This one you only need to draw once, so if you have say:
var render = function(){
//Insert rest of code
if(!not_First_Time)
{
gl.drawArrays(gl.TRIANGLE_STRIP , 4 , 8 );
}
gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );
//Insert rest of code
But that's more or less the cheating way of doing it as you're still modifying the points to rotate, and if you ever re-drew them, they would rotate as the main square did.
I also notice you stripped out a few of the include commands from the HTML code. You're going to need those.

Here is what my solution...
SHADER CODE:
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
uniform float theta;
void
main()
{
float s = sin( theta );
float c = cos( theta );
gl_Position.x = -s * vPosition.x + c * vPosition.y;
gl_Position.y = s * vPosition.y + c * vPosition.x;
gl_Position.z = 0.0;
gl_Position.w = 1.0;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void
main()
{
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}
</script>
JAVASCRIPT CODE:
var canvas;
var gl;
var theta = 0.0;
var thetaLoc;
var program;
var program1;
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
//
// Configure WebGL
//
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
// Load shaders and initialize attribute buffers
program = initShaders( gl, "vertex-shader", "fragment-shader" );
program1 = initShaders( gl, "vertex-shader", "fragment-shader" );
//Rotating Rectangle
var rr_vertices = [
vec2( 0, 0.25),
vec2( 0.25, 0),
vec2(-0.25, 0 ),
vec2( 0, -0.25)
];
// Load the data into the GPU
rr_bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, rr_bufferId );
gl.bufferData( gl.ARRAY_BUFFER, flatten(rr_vertices), gl.STATIC_DRAW );
// Associate out shader variables with our data buffer
rr_vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( rr_vPosition, 2, gl.FLOAT, false, 0, 0 );
//Static Rectangle
var sr_vertices = [
vec2( 0.5, 0.5),
vec2( 1.0, 0.5),
vec2( 0.5, 1.0 ),
vec2( 1.0, 1.0)
];
// Load the data into the GPU
sr_bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, sr_bufferId );
gl.bufferData( gl.ARRAY_BUFFER, flatten(sr_vertices), gl.STATIC_DRAW );
// Associate out shader variables with our data buffer
sr_vPosition = gl.getAttribLocation( program, "vPosition" );
render();
};
var rr_vPosition;
var sr_vPosition;
var rr_bufferId;
var sr_bufferId;
function render() {
gl.clear( gl.COLOR_BUFFER_BIT );
gl.useProgram( program1 );
gl.enableVertexAttribArray( sr_vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, sr_bufferId );
gl.vertexAttribPointer( sr_vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );
gl.useProgram( program );
thetaLoc = gl.getUniformLocation( program, "theta" );
gl.enableVertexAttribArray( rr_vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, rr_bufferId );
gl.vertexAttribPointer( rr_vPosition, 2, gl.FLOAT, false, 0, 0 );
theta += 0.1;
gl.uniform1f( thetaLoc, theta );
gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );
window.requestAnimFrame(render);
}

Using sample2D as position in vertex shader

I'm learning how to manipulate particles with FBO in webGL, I tried to store the position with a texture and use it a position reference, but nothing came up on the stage.
Fragment Shaders
precision mediump float;
void main() {
gl_FragColor = vec4(vec3(1.0), 1.0);
}
</script>
Vertex Render Shader script
attribute vec2 aTextureUV;
uniform sampler2D uTexture;
void main() {
vec4 texture = texture2D( uTexture, aTextureUV );
gl_Position = vec4( texture.rgb, 1.0 );
gl_PointSize = 3;
}
</script>
JS Script
// Determine the UVs
var uvs = new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
1.0, 1.0
])
var uvBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, uvBuffer );
gl.bufferData( gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW );
gl.enableVertexAttribArray( defaultProgram.aTextureUVLoc );
gl.vertexAttribPointer( defaultProgram.aTextureUVLoc, 2, gl.FLOAT, false, 0, 0);
// Texture initialization
for(var i = 0; i < particleCount; i++) {
initialData.push(
Math.random(),
Math.random(),
Math.random(),
0
);
}
var texture = gl.createTexture();
gl.activeTexture( gl.TEXTURE0 );
gl.bindTexture( gl.TEXTURE_2D, texture );
gl.pixelStorei( gl.UNPACK_ALIGNMENT, 1 );
gl.texImage2D(
gl.TEXTURE_2D, 0, gl.RGBA, fboWidth, fboWidth, 0,
gl.RGBA, gl.FLOAT, new Float32Array(initialData)
);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
.....
function draw() {
requestAnimationFrame( draw );
gl.viewport( 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight );
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays( gl.POINTS, 0, particleCount );
}

Can't comment yet, but just as a desktop GL remark, I can see that 1) there are no actual draw calls in your script i.e. glDrawElements/glDrawArrays (unless you've left some parts of it out), and 2) you're missing a fragment shader. Refer to e.g. this.

Develop Reference

ios ruby-on-rails asp.net-mvc docker delphi jenkins grails google-sheets machine-learning dart

re-set gl.viewport() does not work - webgl

I found out by myself, the resolution uniform has to be updated too : gl.uniform2f( gl.resolutionLocation , game.width , game.height );

Related

How stencil buffer and masking work?

How do you link together triangle strips with degenerated triangles?

Drawing a Cube in WebGL

Draw Multiple Shapes in WebGL

Using sample2D as position in vertex shader

Categories

Resources