A small copy of the canvas just to show that the class is working.
xmin: ymin:
width: height:
PointSize:
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
uniform float userPointSize;
void main() {
gl_PointSize = userPointSize;
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 src="https://mirkwood.cs.edinboro.edu/~bennett/GraphicsCode/Common/webgl-utils.js" ></script>
<script src="https://mirkwood.cs.edinboro.edu/~bennett/GraphicsCode/Common/initShaders.js"></script>
<script src="https://mirkwood.cs.edinboro.edu/~bennett/GraphicsCode/Common/MV.js"></script>
<script src="ui.js" defer></script>
<script 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");
</script>
<p>
<select id="Shape">
<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>
PointSize: <input type="text" id="PointSize" value="3"></input>
<p>
<button type="button" id="DoIt">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);
}
SetPointSize(size) {
this.gl.uniform1f(this.pointSizeLoc, size);
}
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 gl = this.gl;
let bufferID = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferID);
let vPosition = gl.getAttribLocation(this.program, "vPosition");
gl.vertexAttribPointer(vPosition,2,gl.FLOAT, false,0,0);
gl.enableVertexAttribArray(vPosition);
this.pointSizeLoc = gl.getUniformLocation(this.program,"userPointSize");
}
Init() {
this.list= [];
this.gl.clearColor(1.0, 1.0, 1.0, 1.0);
this.shape = '0';
this.MakePoints();
let gl = this.gl;
gl.bufferData(gl.ARRAY_BUFFER,flatten(this.list),gl.STATIC_DRAW);
}
MakePoints() {
this.count = 15;
let x, y, r;
let theta=0;
let dtheta = Math.PI/this.count * 2;
r = .75;
for (let 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'
let doit = document.getElementById("DoIt");
let shape = document.getElementById("Shape");
let pointSize = document.getElementById("PointSize");
function Display() {
UpdateViewport();
Redisplay();
}
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() {
let val = shape.value;
console.log(shape.value, "is the shape value");
canvas1.SetShape(val);
canvas2.SetShape(val);
Redisplay();
}
function NewPointSize() {
let size = pointSize.value;
if (size > 0) {
canvas1.SetPointSize(size);
canvas2.SetPointSize(size);
Redisplay()
}
}
doit.addEventListener("click", Display);
shape.addEventListener("change", UpdateScene);
pointSize.addEventListener("change",NewPointSize);
pointSize.value = 3.0
NewPointSize();
Display();