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

add grid init method

Browse Source
This commit is contained in:
Julian
2020-01-24 17:05:02 +01:00
parent 4015847e72
commit a79d670999
1 changed files with 45 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/main.ts
View File

@@ -1,4 +1,4 @@
var gl: WebGLRenderingContext; var gl: WebGL2RenderingContext;
var viewportWidth = 0; var viewportWidth = 0;
var viewportHeight = 0; var viewportHeight = 0;
@@ -6,9 +6,9 @@ var viewportHeight = 0;
function initGL(canvas: HTMLCanvasElement) { function initGL(canvas: HTMLCanvasElement) {
var gltemp; var gltemp;
try { try {
gltemp = canvas.getContext("webgl"); gltemp = canvas.getContext("webgl2");
if (!gltemp) if (!gltemp)
gltemp = canvas.getContext("experimental-webgl"); gltemp = canvas.getContext("experimental-webgl2");
if (gltemp != null) { if (gltemp != null) {
viewportWidth = canvas.width; viewportWidth = canvas.width;
viewportHeight = canvas.height; viewportHeight = canvas.height;
@@ -21,16 +21,15 @@ function initGL(canvas: HTMLCanvasElement) {
if (gltemp == null) { if (gltemp == null) {
alert("Unable to initialize WebGL. Your browser or machine may not support it."); alert("Unable to initialize WebGL. Your browser or machine may not support it.");
} }
gl = <WebGLRenderingContext>gltemp; gl = <WebGL2RenderingContext>gltemp;
} }
var gridIndices = []; /** Grid for the watersurface */
var gridVertices = []; var gridIndices: number[] = [];
function genereateGrid(N: number) { var gridVertices: number[] = [];
for (let j = 0; j <= N; ++j) function generateGrid(N: number) {
{ for (let j = 0; j <= N; ++j) {
for (let i = 0; i <= N; ++i) for (let i = 0; i <= N; ++i) {
{
//Generate Vertices //Generate Vertices
let x = i / N; let x = i / N;
let y = j / N; let y = j / N;
@@ -58,6 +57,24 @@ function genereateGrid(N: number) {
} }
} }
} }
var gridVAO: WebGLVertexArrayObject | null = null;
function initGridVAO() {
generateGrid(2);
gridVAO = gl.createVertexArray();
gl.bindVertexArray(gridVAO);
let vboGrid: WebGLBuffer | null = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vboGrid);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(gridVertices), gl.STATIC_DRAW);
let iboGrid: WebGLBuffer | null = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iboGrid);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(gridIndices), gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
gl.enableVertexAttribArray(0);
}
/** Init Geomtry for an Triangle */ /** Init Geomtry for an Triangle */
var VBO: WebGLBuffer | null = null; var VBO: WebGLBuffer | null = null;
@@ -275,11 +292,11 @@ function drawScene() {
function main() { function main() {
const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window"); const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
initGL(canvas); initGL(canvas);
initShaders(); initShaders();
initGeometry(); initGeometry();
initFBO(); initFBO();
initGridVAO();
if (gl.getError() != gl.NO_ERROR) { if (gl.getError() != gl.NO_ERROR) {
console.log("OpenGL Error!: "); console.log("OpenGL Error!: ");