Gulum/WebOcean
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

let opengl print an triangle

Browse Source
This commit is contained in:
Julian
2020-01-21 20:37:48 +01:00
parent 8aaf31c114
commit 1c6a499127
2 changed files with 142 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@@ -2,6 +2,21 @@
<html> <html>
<header> <header>
<title>Web Ocean</title> <title>Web Ocean</title>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void) {
gl_FragColor = vec4(0.6,0.6,0.6,1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 positionAttr;
void main(void) {
gl_Position = vec4(positionAttr, 1.0);
}
</script>
</header> </header>
<body> <body>
<canvas id="window" width="800" height="600" style="margin:0 auto; border: solid #000000 1px; display:block;"></canvas> <canvas id="window" width="800" height="600" style="margin:0 auto; border: solid #000000 1px; display:block;"></canvas>

138
src/main.ts
View File

@@ -1,23 +1,139 @@
var gl: WebGLRenderingContext;
var viewportWidth = 0;
var viewportHeight = 0;
main(); main();
function initGL(canvas: HTMLCanvasElement) {
var gltemp;
try {
gltemp = canvas.getContext("webgl");
if (!gltemp)
gltemp = canvas.getContext("experimental-webgl");
if (gltemp != null) {
viewportWidth = canvas.width;
viewportHeight = canvas.height;
}
} catch (e) {
}
// Not the best error detection logic.
// Redirect to http://get.webgl.org in failure case.
if (gltemp == null) {
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
}
gl = <WebGLRenderingContext>gltemp;
}
function initGeometry() {
let VBO = gl.createBuffer();
let vertexData = [-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.0, 0.5, 0.0];
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
return VBO;
}
function getShader(id: string) {
var script: any = document.getElementById(id);
if (!script) {
console.log("Coudln't get shader source from HTML!");
return null;
}
var shader: WebGLShader | null;
if (script.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (script.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
console.log("Script type is wrong!");
return null;
}
if (shader == null) {
console.log("Cannot create Shaders!")
return null;
}
gl.shaderSource(shader, script.text);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
function initShaders() {
var vertexShader = getShader("shader-vs");
var fragmentShader = getShader("shader-fs");
if (vertexShader == null || fragmentShader == null) {
console.log("Didn't find shader sources!")
return null;
}
let program: WebGLProgram | null = gl.createProgram();
if (program == null) {
console.log("Program not created!")
return null
}
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(program);
let positionAttr = gl.getAttribLocation(program, "positionAttr");
gl.enableVertexAttribArray(positionAttr);
return program;
}
function drawScene(buffer: WebGLBuffer, program: WebGLProgram) {
gl.viewport(0, 0, viewportWidth, viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// There are 7 floating-point values per vertex
var stride = 3 * Float32Array.BYTES_PER_ELEMENT;
// Set up position stream
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
gl.enableVertexAttribArray(0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
function main() { function main() {
const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window"); const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
const gl = canvas.getContext("webgl");
if (!gl) { initGL(canvas);
alert("Unable to initialize WebGL. Your browser or machine may not support it."); let shaderProgram = initShaders();
return; let triangleVBO = initGeometry();
}
let vertices = [ -0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.0, 0.5, 0.0];
console.log(vertices);
// Setze clear color auf schwarz, vollständig sichtbar // Setze clear color auf schwarz, vollständig sichtbar
gl.clearColor(0.0, 1.0, 0.0, 1.0); gl.clearColor(0.0, 1.0, 0.0, 1.0);
// Lösche den color buffer mit definierter clear color // Lösche den color buffer mit definierter clear color
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
if (triangleVBO != null && shaderProgram != null) {
drawScene(triangleVBO, shaderProgram);
}
if(gl.getError() != gl.NO_ERROR) {
console.log("OpenGL Error!: ");
}
} }