A small copy of the canvas just to show that the class is working.
xmin: ymin:
width: height:
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main() {
gl_PointSize = 3.0;
gl_Position = vPosition;
}
</script>
<script id="fragment-shader1" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}
</script>
<script id="fragment-shader2" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4( 0.0, 1.0, 1.0, 1.0 );
}
</script>
<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="ui.js"></script>
<script type="text/javascript" src="GLCanvas.js"></script>
</head>
<body>
<h1>A DrawLines Demo</h1>
<script type="text/javascript">
'use strict'
var WIDTH = 500;
var HEIGHT = 500;
var canvas1 = new Canvas(WIDTH, HEIGHT, "vertex-shader", "fragment-shader1");
</script>
<p>
A small copy of the canvas just to show that the class is working.
<script type="text/javascript">
var canvas2 = new Canvas(WIDTH/2, HEIGHT/2, "vertex-shader", "fragment-shader2");
Redisplay();
</script>
<p>
<select id="Shape" onchange="UpdateScene(this.value); Redisplay()">
<option value='0'>Points</option>
<option value='1'>Line Strip</option>
<option value='2'>Line Loop</option>
<option value='3'>Lines</option>
<option value='4'>Triangle Strip</option>
<option value='5'>Triangle Fan</option>
<option value='6'>Triangles</option>
</select>
<p>
xmin: <input type="text" id="xmin" value="0"></input>
ymin: <input type="text" id="ymin" value="0"></input>
<p>
width: <input type="text" id="width" value="500"></input>
height: <input type="text" id="height" value="500"></input>
<p>
<button type="button" onclick="UpdateViewport(); Redisplay()" >Finished</button>
<p>
'use strict'
class Canvas {
vpx = 0;
vpy = 0;
constructor (width, height, vshader, fshader) {
this.height = height;
this.width = width;
this.vph = height;
this.vpw = width;
this.MakeCanvas();
this.SetupGL();
this.MakeShaders(vshader, fshader);
this.SetupVBO();
this.gl.viewport(this.vpx, this.vpy, this.vpw, this.vph);
this.Init();
return this;
}
UpdateViewport(x,y,w,h) {
this.vpx = x;
this.vpy =y;
this.vpw = w;
this.vph = h;
this.gl.viewport(this.vpx, this.vpy, this.vpw, this.vph);
}
MakeCanvas() {
if (this.width == undefined || this.width < 0) {
this.width = 300;
}
if (this.height == undefined || this.height < 0) {
this.height = 300;
}
this.canvas = document.createElement('canvas')
this.canvas.height = this.height;
this.canvas.width = this.width;
this.canvas.style="border:1px solid #000000;"
this.canvas.tabIndex = 0;
document.body.appendChild(this.canvas);
}
SetupGL() {
this.gl = WebGLUtils.setupWebGL(this.canvas);
if (!this.gl) {
alert ("WebGL isn't available");
return;
}
this.gl.getExtension('OES_standard_derivatives');
}
MakeShaders(vshader, fshader) {
this.program = initShaders(this.gl, vshader,fshader);
this.gl.useProgram(this.program);
}
SetupVBO() {
let bufferID = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, bufferID);
let vPosition = this.gl.getAttribLocation(this.program, "vPosition");
this.gl.vertexAttribPointer(vPosition,2,this.gl.FLOAT, false,0,0);
this.gl.enableVertexAttribArray(vPosition);
}
Init() {
this.list= [];
this.gl.clearColor(1.0, 1.0, 1.0, 1.0);
this.shape = '0';
var p1 = vec2(this.width/2.0, this.height-20);
var p2 = vec2(20, 20);
var p3 = vec2(this.width-20, 20);
this.tri = [p1, p2, p3]
this.MakePoints();
var gl = this.gl;
this.gl.bufferData(gl.ARRAY_BUFFER,flatten(this.list),gl.STATIC_DRAW);
}
MakePoints() {
this.count = 3*5;
let x, y, r;
let theta=0;
let dtheta = Math.PI/this.count * 2;
r = .75;
for (var i=0; i<this.count; i++) {
let tmp = vec2(r*Math.cos(theta), r*Math.sin(theta));
theta += dtheta;
this.list.push(tmp);
}
return;
}
SetShape(shape) {
this.shape = shape;
return;
}
Display() {
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
let type;
switch(this.shape) {
case '1':
type = this.gl.LINE_STRIP; break
case '2':
type = this.gl.LINE_LOOP; break
case '3':
type = this.gl.LINES; break
case '4':
type = this.gl.TRIANGLE_STRIP; break
case '5':
type = this.gl.TRIANGLE_FAN; break
case '6':
type = this.gl.TRIANGLES; break
default:
case '0':
type = this.gl.POINTS; break
}
this.gl.drawArrays(type, 0, this.count);
return;
}
};
'use strict'
function Redisplay() {
canvas1.Display();
canvas2.Display();
}
function UpdateViewport() {
let x = document.getElementById("xmin").value;
let y = document.getElementById("ymin").value;
let width = document.getElementById("width").value;
let height = document.getElementById("height").value;
canvas1.UpdateViewport(x,y,width,height);
}
function UpdateScene(val) {
canvas1.SetShape(val);
canvas2.SetShape(val);
}