WebGL - cannot reader property createShader of null

WebGL - cannot reader property createShader of null - javascript

I am following a book called professional WebGL, I am hand writing stuff making sure of my understanding, I have this code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>2-1 A first WebGL example</title>
<meta charset="utf-8">
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
void main() {
gl_Position = vec4(aVertexPosition, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script type="text/javascript">
var gl;
var canvas;
var shaderProgram;
var vertexBuffer;
/*Function to create the webgl context*/
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 we don't find an element with the specified id
//we do an early exit
if(!shaderScript) {
return null;
}
//loop through the children for the found DOM element and
//build up the shader source code as a string.
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 to setup the shaders*/
function setupShaders() {
var vertexShader = loadShaderFromDOM("shader-vs");
var 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 toe setup shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
}
/*Function to setup the buffers*/
function setupBuffers() {
vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
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);
vertexBuffer.itemSize = 3;
vertexBuffer.numberOfItems = 3;
}
/*Function to draw the triangle*/
function draw() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.celar(gl.COLOR_BUFFER_BIT);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);
}
/*Function to kick everything off*/
function startup() {
canvas = document.getElementById("myGLCanvas");
gl = createGLContext(canvas);
setupShaders();
setupBuffers();
gl.clearColor(0.0, 0.0, 0.0, 0.1);
draw();
}
</script>
</head>
<body onload="startup()">
<canvas id="myGLCnvas" width="500" height="300"></canvas>
</body>
</html>
for some reason, it says that it can't read property null for createShader here:
shader = gl.createShader(gl.VERTEX_SHADER);
But it doesn't complain at all for the same declaration but with the fragment shader.

Slightly changed version.
gl.celar was wrong and main loop for getting context.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>2-1 A first WebGL example</title>
<meta charset="utf-8">
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
void main() {
gl_Position = vec4(aVertexPosition, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script type="text/javascript">
var gl;
var canvas;
var shaderProgram;
var vertexBuffer;
/*Function to create the webgl context*/
function createGLContext(canvas) {
var names = ["webgl", "experimental-webgl"];
gl = null;
for(var i = 0; i < names.length; i++) {
gl = canvas.getContext(names[i]);
if(gl)
break;
}
if(gl) {
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} else {
console.log("Failed to create webgl context");
}
}
function loadShaderFromDOM(id) {
var shaderScript = document.getElementById(id);
//if we don't find an element with the specified id
//we do an early exit
if(!shaderScript) {
return null;
}
//loop through the children for the found DOM element and
//build up the shader source code as a string.
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 to setup the shaders*/
function setupShaders() {
var vertexShader = loadShaderFromDOM("shader-vs");
var 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 toe setup shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
}
/*Function to setup the buffers*/
function setupBuffers() {
vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
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);
vertexBuffer.itemSize = 3;
vertexBuffer.numberOfItems = 3;
}
/*Function to draw the triangle*/
function draw() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);
}
/*Function to kick everything off*/
function startup() {
canvas = document.getElementById("myGLCnvas");
createGLContext(canvas);
setupShaders();
setupBuffers();
gl.clearColor(0.0, 0.0, 0.0, 0.1);
draw();
}
</script>
</head>
<body onload="startup()">
<canvas id="myGLCnvas" width="500" height="300"></canvas>
</body>
</html>

I had the same problem, where I have one page that is an open scene that starts as a html that works and the other page is a death match with and the map and unitsize using and external main file and not hard coded and it doesn't work. Both pages are the same code
The difference was between three.js and three.min.js. The .min file worked.

Related

WebGL Unable to compile a basic vertex shader

I'm following Cherno's OpenGL course on YouTube,
I think I have a case of code blindness since I cant see anything wrong with my program.
Can someone help me out and tell me what I'm doing wrong or where the typo is..
I think the problem is the vertex shader or the way im linking it to the vertex attribute pointer, but im not sure; Any help would be great
The console outputs warnings:
WebGL warning: linkProgram: Must have a compiled vertex shader attached:
SHADER_INFO_LOG:
ERROR: 0:2: 'layout' : syntax error
WebGL warning: useProgram: Program must be linked successfully.
WebGL warning: drawArraysInstanced: The current program is not linked.
function main() {
const glCanvas = document.getElementById("glCanvas");
const gl = glCanvas.getContext("webgl") || glCanvas.getContext("experimental-webgl")
if (!gl) throw ("Your browser does not support WebGL");
initWebGL();
function initWebGL() {
gl.clearColor(0.7, 0.7, 0.0, 1.0);
gl.resize = function(width, height) {
glCanvas.width = width;
glCanvas.height = height;
gl.viewport(0, 0, width, height);
}
const bufferData = new Float32Array([
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
])
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 3 * bufferData.BYTES_PER_ELEMENT, 0);
const vertexShader = `
layout(location = 0) in vec4 position;
void main(){
gl_Position = position;
}
`;
const fragmentShader = `
layout(location = 0) out vec4 color;
void main(){
color = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
const program = createShader(vertexShader, fragmentShader);
gl.useProgram(program);
gl.resize(500, 500)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
function createShader(vertexShader, fragmentShader) {
const program = gl.createProgram();
const _vertexShader = compileShader(gl.VERTEX_SHADER, vertexShader);
const _fragmentShader = compileShader(gl.FRAGMENT_SHADER, fragmentShader);
gl.attachShader(program, _vertexShader);
gl.attachShader(program, _fragmentShader);
gl.linkProgram(program);
gl.validateProgram(program);
gl.deleteShader(_vertexShader);
gl.deleteShader(_fragmentShader);
return program;
}
function compileShader(type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}
}
body {
margin: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="main()">
<canvas id="glCanvas"></canvas>
</body>
</html>

glsl throws bunch of errors

I am trying to get a square drawn on to a html canvas using GLSL and I am actually having a hard time understanding the errors. Here is my code for defining vertex and fragment shaders.Also Don't forget to leave a comment about the question
<script type="x-shader/x-vertex" id="VertexShader">
attribute vec3 aSquareVertexPosition;
void(main){
gl_Position = vec4(aSquareVertexPosition, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="FragmentShader">
void(main){
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
And here is my code for loading and compiling above glsl code.
var gSimpleShader = null;
var gShaderVertexPositionAttribute = null;
function loadAndCompile(id, shaderType) {
var shaderText, shaderSource, compiledShader;
shaderText = document.getElementById(id);
shaderSource = shaderText.firstChild.textContent;
compiledShader = gGL.createShader(shaderType);
gGL.shaderSource(compiledShader, shaderSource);
gGL.compileShader(compiledShader);
var errorOrNot = gGL.getShaderParameter(compiledShader, gGL.COMPILE_STATUS);
if (!errorOrNot){
console.error(gGL.getShaderInfoLog(compiledShader));
}
return compiledShader;
}
function initSimpleShader(vertexShaderID, fragmentShaderID) {
var vertexShader = loadAndCompile(vertexShaderID, gGL.VERTEX_SHADER);
var fragmentShader = loadAndCompile(fragmentShaderID, gGL.FRAGMENT_SHADER);
gSimpleShader = gGL.createProgram();
gGL.attachShader(gSimpleShader, vertexShader);
gGL.attachShader(gSimpleShader, fragmentShader);
gGL.linkProgram(gSimpleShader);
var errorOrNot = gGL.getProgramParameter(gSimpleShader, gGL.LINK_STATUS);
if (!errorOrNot){
console.error(gGL.getProgramInfoLog(gSimpleShader));
}
gShaderVertexPositionAttribute = gGL.getAttribLocation(gSimpleShader, "aSquareVertexPosition");
gGL.bindBuffer(gGL.ARRAY_BUFFER, gSquareVertexBuffer);
gGL.vertexAttribPointer(gShaderVertexPositionAttribute, 3, gGL.FLOAT, false, 0, 0);
}
this is where the gSquareVertexBuffer variable from above code is defined.
"use strict";
var gSquareVertexBuffer = null;
function initSquareBuffer() {
var verticesOfSquare =
[
0.5, 0.5, 0.0,
-0.5, 0.5, 0.0,
0.5, -0.5, 0.0,
-0.5, -0.5, 0.0,
];
gSquareVertexBuffer = gGL.createBuffer();
gGL.bindBuffer(gGL.ARRAY_BUFFER, gSquareVertexBuffer);
gGL.bufferData(gGL.ARRAY_BUFFER, new Float32Array(verticesOfSquare), gGL.STATIC_DRAW);
}
And I call these functions in another file as below.
"use strict";
var gGL = null;
function initializeGL()
{
var canvas = document.getElementById("GLCanvas");
gGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (gGL != null){
gGL.clearColor(0.0, 0.0, 1.0, 1.0);
initSquareBuffer();
initSimpleShader("VertexShader", "FragmentShader");
}else{
document.write("<br><b>WebGL is not supported</b>");
}
}
function drawSquare()
{
gGL.clear(gGL.COLOR_BUFFER_BIT);
gGL.useProgram(gSimpleShader);
gGL.enableVertexAttribArray(gShaderVertexPositionAttribute);
gGL.drawArrays(gGL.TRANGLE_STRIP, 0, 4);
}
function doGLDraw()
{
initializeGL();
drawSquare();
}
After I open the index.html file in the browser I can only see the canvas and I get the following errors in the console.
Must have a compiled vertex shader attached: SHADER_INFO_LOG: ERROR: 0:3: '(' : syntax error
And also these WebGL warnings
WebGL warning: linkProgram: Must have a compiled vertex shader attached: SHADER_INFO_LOG: ERROR: 0:3: '(' : syntax error
WebGL warning: vertexAttribI?Pointer: index (4294967295) must be < MAX_VERTEX_ATTRIBS.
WebGL warning: useProgram: Program must be linked successfully.
WebGL warning: enableVertexAttribArray: -1 is not a valid index. This value probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program.
WebGL warning: drawArraysInstanced: The current program is not linked.
I am new to WebGL and javaScript so don't forget to leave a comment.

There is a syntax error in the vertex shader and in the fragment shader. void is the return type. The name of the main function is main:
void(main){
void main(){
// [...]
}
Furthermore, it is TRIANGLE_STRIP not TRANGLE_STRIP
gGL.drawArrays(gGL.TRANGLE_STRIP, 0, 4);
gGL.drawArrays(gGL.TRIANGLE_STRIP, 0, 4);
var gSimpleShader = null;
var gShaderVertexPositionAttribute = null;
function loadAndCompile(id, shaderType) {
var shaderText, shaderSource, compiledShader;
shaderText = document.getElementById(id);
shaderSource = shaderText.firstChild.textContent;
compiledShader = gGL.createShader(shaderType);
gGL.shaderSource(compiledShader, shaderSource);
gGL.compileShader(compiledShader);
var errorOrNot = gGL.getShaderParameter(compiledShader, gGL.COMPILE_STATUS);
if (!errorOrNot){
console.error(gGL.getShaderInfoLog(compiledShader));
}
return compiledShader;
}
function initSimpleShader(vertexShaderID, fragmentShaderID) {
var vertexShader = loadAndCompile(vertexShaderID, gGL.VERTEX_SHADER);
var fragmentShader = loadAndCompile(fragmentShaderID, gGL.FRAGMENT_SHADER);
gSimpleShader = gGL.createProgram();
gGL.attachShader(gSimpleShader, vertexShader);
gGL.attachShader(gSimpleShader, fragmentShader);
gGL.linkProgram(gSimpleShader);
var errorOrNot = gGL.getProgramParameter(gSimpleShader, gGL.LINK_STATUS);
if (!errorOrNot){
console.error(gGL.getProgramInfoLog(gSimpleShader));
}
gShaderVertexPositionAttribute = gGL.getAttribLocation(gSimpleShader, "aSquareVertexPosition");
gGL.bindBuffer(gGL.ARRAY_BUFFER, gSquareVertexBuffer);
gGL.vertexAttribPointer(gShaderVertexPositionAttribute, 3, gGL.FLOAT, false, 0, 0);
}
var gSquareVertexBuffer = null;
function initSquareBuffer() {
var verticesOfSquare =
[
0.5, 0.5, 0.0,
-0.5, 0.5, 0.0,
0.5, -0.5, 0.0,
-0.5, -0.5, 0.0,
];
gSquareVertexBuffer = gGL.createBuffer();
gGL.bindBuffer(gGL.ARRAY_BUFFER, gSquareVertexBuffer);
gGL.bufferData(gGL.ARRAY_BUFFER, new Float32Array(verticesOfSquare), gGL.STATIC_DRAW);
}
var gGL = null;
function initializeGL()
{
var canvas = document.getElementById("GLCanvas");
gGL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (gGL != null){
gGL.clearColor(0.0, 0.0, 1.0, 1.0);
initSquareBuffer();
initSimpleShader("VertexShader", "FragmentShader");
}else{
document.write("<br><b>WebGL is not supported</b>");
}
}
function drawSquare()
{
gGL.clear(gGL.COLOR_BUFFER_BIT);
gGL.useProgram(gSimpleShader);
gGL.enableVertexAttribArray(gShaderVertexPositionAttribute);
gGL.drawArrays(gGL.TRIANGLE_STRIP, 0, 4);
requestAnimationFrame(drawSquare);
}
function doGLDraw()
{
initializeGL();
drawSquare();
}
doGLDraw()
<script type="x-shader/x-vertex" id="VertexShader">
attribute vec3 aSquareVertexPosition;
void main(){
gl_Position = vec4(aSquareVertexPosition, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="FragmentShader">
void main(){
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<canvas id="GLCanvas"></canvas>

Passing an attribute to fragment shader using varying Webgl

I am new to webgl and I've been trying to pass an attribute to the fragment shader using varying in order to change all the triangles to random colors just like this:
But right now, all the triangles are just in white color, and I'm not sure what did wrong. Also, how do I do to make the triangles fit into the canvas? PLease help, thank you.
// Application info.
var app = app || {};
var nbTriangles = 20;
function getContextGL(canvasElement) {
var can = document.getElementById(canvasElement);
if (can == null) {
return [null, null];
}
var gl = can.getContext("webgl");
return [can, gl];
}
function createShaderFromElement(gl, id) {
// Grab the script element.
var scriptElt = document.getElementById(id);
if (!scriptElt) {
return null;
}
// Retrieve the source.
var scriptSource = scriptElt.textContent;
// Identify shader type based on element type.
var shaderObj;
if (scriptElt.type == "x-shader/x-fragment") {
shaderObj = gl.createShader(gl.FRAGMENT_SHADER);
}
else if (scriptElt.type == "x-shader/x-vertex") {
shaderObj = gl.createShader(gl.VERTEX_SHADER);
}
else {
return null;
}
// Compile and check status.
gl.shaderSource(shaderObj, scriptSource);
gl.compileShader(shaderObj);
var ok = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);
if (!ok) {
var msgError = gl.getShaderInfoLog(shaderObj);
alert(msgError);
gl.deleteShader(shader);
return null;
}
return shaderObj;
}
function buildProgram(gl, vertexShader, fragmentShader) {
if (!vertexShader || !fragmentShader) {
return null;
}
var progObject = gl.createProgram();
if (!progObject) {
alert("Can't create program object.");
return;
}
gl.attachShader(progObject, vertexShader);
gl.attachShader(progObject, fragmentShader);
gl.linkProgram(progObject);
var ok = gl.getProgramParameter(progObject, gl.LINK_STATUS);
if (!ok) {
var msgError = gl.getProgramInfoLog(progObject);
alert(msgError);
gl.deleteProgram(progObject);
return null;
}
return progObject;
}
function initGL() {
app.gl.viewport(0, 0, app.can.width, app.can.height);
app.gl.clearColor(0., 0., 0., 1.0);
app.gl.clear(app.gl.COLOR_BUFFER_BIT);
var vs = createShaderFromElement(app.gl, "vs");
var fs = createShaderFromElement(app.gl, "fs");
app.progObject = buildProgram(app.gl, vs, fs);
app.gl.useProgram(app.progObject);
}
function initScene() {
var gl = app.gl;
// Creer le buffer de geometrie (vertex)
//
var positions = [];
for (var i = 0; i < nbTriangles; ++i) {
var orig = [0.0, 1.0, 1.0, -1.0, -1.0, -1.0];
var scale = Math.random() * 0.2;
var Trans = [Math.random() * 1.6, Math.random() * 1.6];
var P0 = [
orig[0] * scale + Trans[0],
orig[1] * scale + Trans[1],
];
var P1 = [
orig[2] * scale + Trans[0],
orig[3] * scale + Trans[1],
];
var P2 = [
orig[4] * scale + Trans[0],
orig[5] * scale + Trans[1],
];
positions.push(...P0, ...P1, ...P2);
}
var colors = [];
for (var i = 0; i < nbTriangles; ++i) {
var newColor = [Math.random() * 256, Math.random() * 256, Math.random() * 256, 1.0];
colors.push(...newColor);
}
// Creer un nouveau buffer vide.
var posBuffer = gl.createBuffer();
var colorBuffer = gl.createBuffer();
// Ref sur l'attribut "pos" dans le vertex shader.
var posLocation = gl.getAttribLocation(app.progObject, "pos");
var colorLocation = gl.getAttribLocation(app.progObject, "color");
// Activer le buffer. Toute operation sur buffer
// sera appliquer a posBuffer (il est actif!).
gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
gl.enableVertexAttribArray(posLocation);
gl.vertexAttribPointer(posLocation, 2, gl.FLOAT, false /*no normalization*/, 0 /*stride*/, 0 /*offset*/);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(colorLocation);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
}
function render() {
var gl = app.gl;
gl.clear(gl.COLOR_BUFFER_BIT)
// Dessiner le buffer.
gl.drawArrays(gl.TRIANGLES, 0, 3 * nbTriangles);
}
function init() {
[app.can, app.gl] = getContextGL('can');
if (app.can == null || app.gl == null) {
alert("Can't init canvas or context");
return;
}
app.can.width = app.can.height * (app.can.clientWidth / app.can.clientHeight);
var rect = app.can.getBoundingClientRect();
app.scaleX = app.can.width / rect.width;
app.scaleY = app.can.height / rect.height;
initGL();
initScene();
render();
}
div
{
}
#main-div
{
display:inline-block;
}
#viewport, #manager
{
float: left;
margin: auto;
}
.color
{
width:100px;
height:50px;
}
.blue{
background:#0f0;
}
#viewport
{
width: 600px;
height:700px;
}
#can
{
width: 600px;
height: 500px;
border:1px solid orange;
}
#manager
{
width: 200px;
height:300px;
padding: 0 0 0 5px;
}
#obj-list
{
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Colored Quad</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="colored_quad.js"></script>
<script id="vs" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 pos;
attribute vec4 color;
varying vec4 fcolor;
void main()
{
vec4 pt = vec4(pos, 0.0, 1.0);
gl_Position = pt;
fcolor=color;
}
</script>
<script id="fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fcolor;
void main()
{
vec4 color= fcolor;
gl_FragColor = color;
}
</script>
</head>
<body onload="init();">
<div id="main-div">
<div id="viewport">
<canvas id="can" >Your browser doesn't seem to support canvas!</canvas>
</div>
</div>
</body>
</html>

The the color attribute has a floating point type:
attribute vec4 color;
gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 0, 0);
Hence the color values have to be specified in range [0.0, 1.0] rather than [0, 256]:
var newColor = [Math.random() * 256, Math.random() * 256, Math.random() * 256, 1.0];
var newColor = [Math.random(), Math.random(), Math.random(), 1.0];
Furthermore, each triangle has 3 vertices (corners). Each vertex coordinate has to be associated to a separate color attribute. So each triangle has to have 3 color attributes, too:
var colors = [];
for (var i = 0; i < nbTriangles; ++i) {
var newColor = [Math.random(), Math.random(), Math.random(), 1.0];
colors.push(...newColor);
colors.push(...newColor);
colors.push(...newColor);
}
// Application info.
var app = app || {};
var nbTriangles = 20;
function getContextGL(canvasElement) {
var can = document.getElementById(canvasElement);
if (can == null) {
return [null, null];
}
var gl = can.getContext("webgl");
return [can, gl];
}
function createShaderFromElement(gl, id) {
// Grab the script element.
var scriptElt = document.getElementById(id);
if (!scriptElt) {
return null;
}
// Retrieve the source.
var scriptSource = scriptElt.textContent;
// Identify shader type based on element type.
var shaderObj;
if (scriptElt.type == "x-shader/x-fragment") {
shaderObj = gl.createShader(gl.FRAGMENT_SHADER);
}
else if (scriptElt.type == "x-shader/x-vertex") {
shaderObj = gl.createShader(gl.VERTEX_SHADER);
}
else {
return null;
}
// Compile and check status.
gl.shaderSource(shaderObj, scriptSource);
gl.compileShader(shaderObj);
var ok = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);
if (!ok) {
var msgError = gl.getShaderInfoLog(shaderObj);
alert(msgError);
gl.deleteShader(shader);
return null;
}
return shaderObj;
}
function buildProgram(gl, vertexShader, fragmentShader) {
if (!vertexShader || !fragmentShader) {
return null;
}
var progObject = gl.createProgram();
if (!progObject) {
alert("Can't create program object.");
return;
}
gl.attachShader(progObject, vertexShader);
gl.attachShader(progObject, fragmentShader);
gl.linkProgram(progObject);
var ok = gl.getProgramParameter(progObject, gl.LINK_STATUS);
if (!ok) {
var msgError = gl.getProgramInfoLog(progObject);
alert(msgError);
gl.deleteProgram(progObject);
return null;
}
return progObject;
}
function initGL() {
app.gl.viewport(0, 0, app.can.width, app.can.height);
app.gl.clearColor(0., 0., 0., 1.0);
app.gl.clear(app.gl.COLOR_BUFFER_BIT);
var vs = createShaderFromElement(app.gl, "vs");
var fs = createShaderFromElement(app.gl, "fs");
app.progObject = buildProgram(app.gl, vs, fs);
app.gl.useProgram(app.progObject);
}
function initScene() {
var gl = app.gl;
// Creer le buffer de geometrie (vertex)
//
var positions = [];
for (var i = 0; i < nbTriangles; ++i) {
var orig = [0.0, 1.0, 1.0, -1.0, -1.0, -1.0];
var scale = Math.random() * 0.2;
var Trans = [Math.random() * 1.6, Math.random() * 1.6];
var P0 = [
orig[0] * scale + Trans[0],
orig[1] * scale + Trans[1],
];
var P1 = [
orig[2] * scale + Trans[0],
orig[3] * scale + Trans[1],
];
var P2 = [
orig[4] * scale + Trans[0],
orig[5] * scale + Trans[1],
];
positions.push(...P0, ...P1, ...P2);
}
var colors = [];
for (var i = 0; i < nbTriangles; ++i) {
var newColor = [Math.random(), Math.random(), Math.random(), 1.0];
colors.push(...newColor);
colors.push(...newColor);
colors.push(...newColor);
}
// Creer un nouveau buffer vide.
var posBuffer = gl.createBuffer();
var colorBuffer = gl.createBuffer();
// Ref sur l'attribut "pos" dans le vertex shader.
var posLocation = gl.getAttribLocation(app.progObject, "pos");
var colorLocation = gl.getAttribLocation(app.progObject, "color");
// Activer le buffer. Toute operation sur buffer
// sera appliquer a posBuffer (il est actif!).
gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
gl.enableVertexAttribArray(posLocation);
gl.vertexAttribPointer(posLocation, 2, gl.FLOAT, false /*no normalization*/, 0 /*stride*/, 0 /*offset*/);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(colorLocation);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
}
function render() {
var gl = app.gl;
gl.clear(gl.COLOR_BUFFER_BIT)
// Dessiner le buffer.
gl.drawArrays(gl.TRIANGLES, 0, 3 * nbTriangles);
}
function init() {
[app.can, app.gl] = getContextGL('can');
if (app.can == null || app.gl == null) {
alert("Can't init canvas or context");
return;
}
app.can.width = app.can.height * (app.can.clientWidth / app.can.clientHeight);
var rect = app.can.getBoundingClientRect();
app.scaleX = app.can.width / rect.width;
app.scaleY = app.can.height / rect.height;
initGL();
initScene();
render();
}
div
{
}
#main-div
{
display:inline-block;
}
#viewport, #manager
{
float: left;
margin: auto;
}
.color
{
width:100px;
height:50px;
}
.blue{
background:#0f0;
}
#viewport
{
width: 600px;
height:700px;
}
#can
{
width: 600px;
height: 500px;
border:1px solid orange;
}
#manager
{
width: 200px;
height:300px;
padding: 0 0 0 5px;
}
#obj-list
{
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Colored Quad</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="colored_quad.js"></script>
<script id="vs" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 pos;
attribute vec4 color;
varying vec4 fcolor;
void main()
{
vec4 pt = vec4(pos, 0.0, 1.0);
gl_Position = pt;
fcolor=color;
}
</script>
<script id="fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fcolor;
void main()
{
vec4 color= fcolor;
gl_FragColor = color;
}
</script>
</head>
<body onload="init();">
<div id="main-div">
<div id="viewport">
<canvas id="can" >Your browser doesn't seem to support canvas!</canvas>
</div>
</div>
</body>
</html>

Unknown cause for difference in error between two html files with virtually the same codes

So besides the fact that there is actually an error, which I still need to figure out why, there is a difference in the error shown in the developer's tool console in Brackets editor and I'm not sure why.
The main.html file is the one that I made changes to based on the codes found here "view-source:http://learningwebgl.com/lessons/lesson01/index.html" (view-source needs to be included in the url), while the file main_copy.html is the actual codes that I copied and pasted from the link, and then backtracked through and added in my changes to see if I missed anything (thus the subtle differences in some warning strings).
Here are the two pictures showing the errors, the first one from running a Live Preview of main.html, and the second of main_copy.html:
HTML
main.html
<html>
<head>
<title>Rubik's Cube Interactive</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/canvas.css">
<script type="text/javascript" src="js/gl-matrix-min.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
<script type="text/javascript">
var gl;
function initGL(canvas) {
try {
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {}
if (!gl) {
alert("Unable to initialize WebGL.");
}
}
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;
}
var shaderProgram;
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Unable to initialize shaders.");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
var triangleVertexPositionBuffer;
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize = 3;
triangleVertexPositionBuffer.numItems = 3;
}
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(pMatrix, 45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, mvMatrix, [-1.5, 0.0, -7.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
}
function webGLStart() {
var canvas = document.getElementById("project-canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}
</script>
</head>
<body onload="webGLStart()">
<canvas id="project-canvas"></canvas>
</body>
</html>
main_copy.html
<html>
<head>
<title>Learning WebGL — lesson 1</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/canvas.css">
<script type="text/javascript" src="js/gl-matrix-min.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
<script type="text/javascript">
var gl;
function initGL(canvas) {
try {
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}
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;
}
var shaderProgram;
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
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.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
var triangleVertexPositionBuffer;
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize = 3;
triangleVertexPositionBuffer.numItems = 3;
}
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(pMatrix, 45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, mvMatrix, [-1.5, 0.0, -7.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
}
function webGLStart() {
var canvas = document.getElementById("lesson01-canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}
</script>
</head>
<body onload="webGLStart()">
<canvas id="lesson01-canvas"></canvas>
</body>
</html>
CSS
canvas.css
* { /* Remove top and left whitespace */
margin: 0;
padding: 0;
}
html, body { /* Set to full screen */
width: 100%;
height: 100%;
}
canvas { /* Remove scroll bars */
display: block;
}
JS
gl-matrix-min.js can be found here https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix-min.js

WebGL how to render 3d array?

I'm trying to figure out a good way to render mathematical functions using WebGL. Or just everything that I put in an array, like basic mathematical functions. So here I just put some 3D coordinate in an array, it does not seem to work.
This are my code lines:
arrays.js [UPDATED]
var myPosArray = [];
var myArrBuffer = null;
var x = 0, y = 0, z = 0;
/*Function that fills the array*/
function dotter() {
myArrBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, myArrBuffer);
for (var i = 0; i < 10; ++i) {
x = Math.cos(i * Math.PI / 3);
y = Math.sin(i * Math.PI / 4);
z = x + y;
myPosArray.push(x);
myPosArray.push(y);
myPosArray.push(z);
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(myPosArray), gl.STATIC_DRAW);
myArrBuffer.itemSize = 3;
myArrBuffer.numItems = myPosArray.lenght / 3;
}
/*This function is supposed to draw the points*/
function drawPoints(){
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0,
pMatrix);
// mat4.identity(mvMatrix);
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Draw triangle*/
mat4.translate(mvMatrix, [ -1.5, 0.0, -7.0 ]);
gl.bindBuffer(gl.ARRAY_BUFFER, myArrBuffer);
gl.vertexAttribArray(shaderProgram.vertexPositionAttribute, myArrBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.POINTS, 0, myArrBuffer.numItems);
}
shaders:
i set up the shaders here [UPDATED]:
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vec4(0.5, 0.5, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 mvMatrix;
uniform mat4 pMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = pMatrix * mvMatrix * vec4(aVertexPosition, 1.0);
}
</script>
schaders.js
/* Setting shaders up */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
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;
}
var shaderProgram;
function lightingShaders(){
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "pMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "mvMatrix");
}
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
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);
lightingShaders();
}

As you say, there were some small errors, but I think the real problem here is that you didn't set the matrix uniforms before you call gl.drawArrays. I assume you're following the tutorials on http://learningwebgl.com/, so the last 3 lines in drawPoints() should be:
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
myArrBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.POINTS, 0, myArrBuffer.numItems);
where setMatrixUniforms() is defined as:
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
Note that I also changed gl.vertexAttribArray to gl.vertexAttribPointer.
Using the translation matrix
mat4.translate(mvMatrix, [ 0.0, 0.0, -7.0 ]);
and setting the point size to 10 in the vertex shader for visibility
gl_PointSize = 10.0;
here's the output I got:

We Keep Coding

JavaScript is the programming language of the Web.

WebGL - cannot reader property createShader of null - javascript

Related

WebGL Unable to compile a basic vertex shader

glsl throws bunch of errors

Passing an attribute to fragment shader using varying Webgl

Unknown cause for difference in error between two html files with virtually the same codes

WebGL how to render 3d array?

Categories

Resources