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

remove perlin noise. animation loop now with request.

Browse Source
This commit is contained in:
Julian
2020-01-24 12:53:09 +01:00
parent 49b4563fd8
commit 54ecea00e2
2 changed files with 93 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@@ -2,7 +2,7 @@
<html>
<header>
<title>Web Ocean</title>
<script id="shader-fs" type="x-shader/x-fragment">
<script id="noise-fs" type="x-shader/x-fragment">
precision mediump float;
uniform float uTime;
@@ -85,12 +85,26 @@
gl_FragColor = vec4(color,1.0);
}
</script>
<script id="default-fs" type="x-shader/x-fragment">
precision mediump float;
<script id="shader-vs" type="x-shader/x-vertex">
varying vec2 v_uv;
uniform sampler2D u_texture;
void main(void) {
//gl_FragColor = texture2D(u_texture, v_uv);
gl_FragColor = vec4(0.0,0.0,1.0,1.0);
}
</script>
<script id="ndc-vs" type="x-shader/x-vertex">
attribute vec3 positionAttr;
attribute vec2 uv;
varying vec2 v_uv;
void main(void) {
gl_Position = vec4(positionAttr, 1.0);
v_uv = uv;
}
</script>
</header>

105
src/main.ts
View File

@@ -25,20 +25,21 @@ function initGL(canvas: HTMLCanvasElement) {
}
/** Init Geomtry for an Triangle */
var VBO: WebGLBuffer | null = null;
function initGeometry() {
let VBO = gl.createBuffer();
VBO = gl.createBuffer();
//Vertex data represent fullscreen quad in NDC-Space
let vertexData = [-1.0, -1.0, 0.0, //BOTTOM LEFT
1.0, -1.0, 0.0, //BOTTOM RIGHT
-1.0, 1.0, 0.0, // TOP LEFT
1.0, -1.0, 0.0, //BOTTOM RIGHT
-1.0, 1.0, 0.0, // TOP LEFT
1.0, 1.0, 0.0, // TOP RIGHT
// X, Y, Z, U, V
let vertexData = [-1.0, -1.0, 0.0, /*BOTTOM LEFT*/ 0.0, 0.0,
1.0, -1.0, 0.0, /*BOTTOM RIGHT*/ 1.0, 0.0,
-1.0, 1.0, 0.0, /*TOP LEFT */ 0.0, 1.0,
1.0, -1.0, 0.0, /*BOTTOM RIGHT */ 1.0, 0.0,
-1.0, 1.0, 0.0, /*TOP LEFT */ 0.0, 1.0,
1.0, 1.0, 0.0, /*TOP RIGHT */ 1.0, 1.0
];
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
return VBO;
}
/** Get shader source by HTML-Element<id> */
@@ -76,34 +77,63 @@ function getShader(id: string) {
}
/** Init all Shaders that are needed */
var perlinNoiseProgram: WebGLProgram | null;
var textureProgram: WebGLProgram | null;
function initShaders() {
var vertexShader = getShader("shader-vs");
var fragmentShader = getShader("shader-fs");
{ //Get perlinNoiseProgram
let vertexShader = getShader("ndc-vs");
let fragmentShader = getShader("noise-fs");
if (vertexShader == null || fragmentShader == null) {
console.log("Didn't find shader sources!")
return null;
}
let program: WebGLProgram | null = gl.createProgram();
if (program == null) {
perlinNoiseProgram = gl.createProgram();
if (perlinNoiseProgram == null) {
console.log("Program not created!")
return null
}
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.attachShader(perlinNoiseProgram, vertexShader);
gl.attachShader(perlinNoiseProgram, fragmentShader);
gl.linkProgram(perlinNoiseProgram);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
if (!gl.getProgramParameter(perlinNoiseProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(program);
gl.useProgram(perlinNoiseProgram);
let positionAttr = gl.getAttribLocation(program, "positionAttr");
let positionAttr = gl.getAttribLocation(perlinNoiseProgram, "positionAttr");
gl.enableVertexAttribArray(positionAttr);
}
{ //Get textueShaderProgram
let vertexShader = getShader("ndc-vs");
let fragmentShader = getShader("default-fs");
return program;
if (vertexShader == null || fragmentShader == null) {
console.log("Didn't find shader sources!")
return null;
}
textureProgram = gl.createProgram();
if (textureProgram == null) {
console.log("Program not created!")
return null
}
gl.attachShader(textureProgram, vertexShader);
gl.attachShader(textureProgram, fragmentShader);
gl.linkProgram(textureProgram);
if (!gl.getProgramParameter(textureProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(textureProgram);
let positionAttr = gl.getAttribLocation(textureProgram, "positionAttr");
gl.enableVertexAttribArray(positionAttr);
}
}
/** Init an FBO used for the first render pass / perlin noise */
@@ -137,7 +167,7 @@ var timeSpent = 0.0;
var lastTime = new Date().getTime();
var counter = 0.0;
var fps = 0;
function drawScene(buffer: WebGLBuffer, program: WebGLProgram) {
function drawScene() {
fps++;
let now = new Date();
let delta = now.getTime() - lastTime;
@@ -166,16 +196,18 @@ function drawScene(buffer: WebGLBuffer, program: WebGLProgram) {
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// There are 7 floating-point values per vertex
let stride = 3 * Float32Array.BYTES_PER_ELEMENT;
let stride = 5 * Float32Array.BYTES_PER_ELEMENT;
// Set up position stream
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, 3 * Float32Array.BYTES_PER_ELEMENT);
gl.enableVertexAttribAray(1);
gl.useProgram(program);
let uTime = gl.getUniformLocation(program, "uTime");
gl.uniform1f(uTime, timeSpent);
gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw quad
gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw quadr
*/}
//--- Second render pass -> Geomtry with displacement by perlin noise texture ---
@@ -185,43 +217,36 @@ 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);
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
// There are 7 floating-point values per vertex
let stride = 3 * Float32Array.BYTES_PER_ELEMENT;
let stride = 5 * Float32Array.BYTES_PER_ELEMENT;
// Set up position stream
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, 3 * Float32Array.BYTES_PER_ELEMENT);
gl.enableVertexAttribArray(1);
gl.useProgram(program);
let uTime = gl.getUniformLocation(program, "uTime");
gl.uniform1f(uTime, timeSpent);
gl.useProgram(textureProgram);
gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw two triangles
}
requestAnimationFrame(drawScene);
}
function main() {
const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
initGL(canvas);
let shaderProgram = initShaders();
let triangleVBO = initGeometry();
let fbo = initFBO();
// Setze clear color auf schwarz, vollständig sichtbar
gl.clearColor(0.0, 1.0, 0.0, 1.0);
// Lösche den color buffer mit definierter clear color
gl.clear(gl.COLOR_BUFFER_BIT);
if (triangleVBO != null && shaderProgram != null) {
window.setInterval(drawScene, 1000 / 60, triangleVBO, shaderProgram);
}
initShaders();
initGeometry();
initFBO();
if (gl.getError() != gl.NO_ERROR) {
console.log("OpenGL Error!: ");
}
drawScene();
}
main();