>>29248
ah nvm, got a response from canvas
<!DOCTYPE html>
<html>
<body>
<canvas id="glCanvas" width="640" height="480">
Your browser doesn't appear to support the
<code><canvas></code> element.
</canvas>
<script id="shader-fs" type="x-shader/x-fragment">
void main(void) {
gl_FragColor = vec4(0, 1, 0, 1);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec4 aVertexPosition;
void main(void) {
gl_Position = vec4(aVertexPosition.xyz, 1);
}
</script>
<script>
var canvas;
var gl = null;
canvas = document.getElementById('glCanvas');
gl = canvas.getContext('webgl2');
if(gl) alert(gl.getParameter(gl.VERSION));
if(gl) doGL();
alert("Fin");
function doGL(){
gl.clearColor(0.0, 0.0, 0.0, 0.5);
// Enable depth testing
gl.enable(gl.DEPTH_TEST);
// Near things obscure far things
gl.depthFunc(gl.LEQUAL);
// Clear the color as well as the depth buffer.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
alert("A");
initShaders();
alert("B");
initBuffers();
alert("C");
drawScene();
alert("D");
}
function initShaders() {
var fragmentShader = getShader(gl, 'shader-fs');
var vertexShader = getShader(gl, 'shader-vs');
// Create the shader program
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
// If creating the shader program failed, alert
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.log('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
}
gl.useProgram(shaderProgram);
vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.enableVertexAttribArray(vertexPositionAttribute);
}
function getShader(gl, id, type) {
var shaderScript, theSource, currentChild, shader;
shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
theSource = shaderScript.text;
if (!type) {
if (shaderScript.type == 'x-shader/x-fragment') {
type = gl.FRAGMENT_SHADER;
} else if (shaderScript.type == 'x-shader/x-vertex') {
type = gl.VERTEX_SHADER;
} else {
// Unknown shader type
return null;
}
}
shader = gl.createShader(type);
gl.shaderSource(shader, theSource);
// Compile the shader program
gl.compileShader(shader);
// See if it compiled successfully
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.log('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
var horizAspect = 480.0/640.0;
function initBuffers() {
squareVerticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
var vertices = [
0.2, 1.0, -2.0,
-1.0, 1.0, 2.0,
0.4, -1.0, 2.0,
-1.0, -1.0, -3.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
}
function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
//loadIdentity();
// mvTranslate([-0.0, 0.0, -6.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
// setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
</script>
</body>
</html>
