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

71
src/main.ts
View File

@@ -1,4 +1,4 @@
var gl: WebGLRenderingContext;
var gl: WebGL2RenderingContext;
var viewportWidth = 0;
var viewportHeight = 0;
@@ -6,9 +6,9 @@ var viewportHeight = 0;
function initGL(canvas: HTMLCanvasElement) {
var gltemp;
try {
gltemp = canvas.getContext("webgl");
gltemp = canvas.getContext("webgl2");
if (!gltemp)
gltemp = canvas.getContext("experimental-webgl");
gltemp = canvas.getContext("experimental-webgl2");
if (gltemp != null) {
viewportWidth = canvas.width;
viewportHeight = canvas.height;
@@ -21,42 +21,59 @@ function initGL(canvas: HTMLCanvasElement) {
if (gltemp == null) {
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
}
gl = <WebGLRenderingContext>gltemp;
gl = <WebGL2RenderingContext>gltemp;
}
var gridIndices = [];
var gridVertices = [];
function genereateGrid(N: number) {
for (let j = 0; j <= N; ++j)
{
for (let i = 0; i <= N; ++i)
{
//Generate Vertices
let x = i / N;
let y = j / N;
let z = 0;
/** Grid for the watersurface */
var gridIndices: number[] = [];
var gridVertices: number[] = [];
function generateGrid(N: number) {
for (let j = 0; j <= N; ++j) {
for (let i = 0; i <= N; ++i) {
//Generate Vertices
let x = i / N;
let y = j / N;
let z = 0;
gridVertices.push(x);
gridVertices.push(y);
gridVertices.push(z);
//Generate Indices
if (i < N && j < N) //Skip edges
{
let row1 = j * (N + 1);
let row2 = (j + 1) * (N + 1);
//Generate Indices
if (i < N && j < N) //Skip edges
{
let row1 = j * (N + 1);
let row2 = (j + 1) * (N + 1);
// triangle 1
// triangle 1
gridIndices.push(row1 + i);
gridIndices.push(row1 + i + 1);
gridIndices.push(row2 + i + 1);
// triangle 2
// triangle 2
gridIndices.push(row1 + i);
gridIndices.push(row2 + i + 1);
gridIndices.push(row2 + i);
}
}
}
}
}
}
}
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 */
@@ -173,7 +190,7 @@ function initShaders() {
/** Init an FBO used for the first render pass / perlin noise */
var perlinNoiseFBO: WebGLFramebuffer | null = null;
var textureFBO : WebGLTexture | null = null;
var textureFBO: WebGLTexture | null = null;
var perlinNoiseFBOWidth = 256;
var ferlinNoiseFBOHeight = 256;
function initFBO() {
@@ -275,11 +292,11 @@ function drawScene() {
function main() {
const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
initGL(canvas);
initShaders();
initGeometry();
initFBO();
initGridVAO();
if (gl.getError() != gl.NO_ERROR) {
console.log("OpenGL Error!: ");