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

perlin noise rendered as a texture.

Browse Source
This commit is contained in:
Julian
2020-01-24 13:27:38 +01:00
parent 54ecea00e2
commit 63a80c908d
2 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -92,8 +92,8 @@
uniform sampler2D u_texture; uniform sampler2D u_texture;
void main(void) { void main(void) {
//gl_FragColor = texture2D(u_texture, v_uv); gl_FragColor = texture2D(u_texture, v_uv);
gl_FragColor = vec4(0.0,0.0,1.0,1.0); //gl_FragColor = vec4(0.0,0.0,1.0,1.0);
} }
</script> </script>
<script id="ndc-vs" type="x-shader/x-vertex"> <script id="ndc-vs" type="x-shader/x-vertex">

38
src/main.ts
View File

@@ -24,6 +24,10 @@ function initGL(canvas: HTMLCanvasElement) {
gl = <WebGLRenderingContext>gltemp; gl = <WebGLRenderingContext>gltemp;
} }
function genereateGrid(precision: number) {
}
/** Init Geomtry for an Triangle */ /** Init Geomtry for an Triangle */
var VBO: WebGLBuffer | null = null; var VBO: WebGLBuffer | null = null;
function initGeometry() { function initGeometry() {
@@ -138,21 +142,24 @@ function initShaders() {
/** Init an FBO used for the first render pass / perlin noise */ /** Init an FBO used for the first render pass / perlin noise */
var perlinNoiseFBO: WebGLFramebuffer | null = null; var perlinNoiseFBO: WebGLFramebuffer | null = null;
var perlinNoiseFBOWidth = 400; var textureFBO : WebGLTexture | null = null;
var ferlinNoiseFBOHeight = 400; var perlinNoiseFBOWidth = 256;
var ferlinNoiseFBOHeight = 256;
function initFBO() { function initFBO() {
perlinNoiseFBO = gl.createFramebuffer(); perlinNoiseFBO = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO); gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
// Add attachments // Add attachments
let tex = gl.createTexture(); textureFBO = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex); gl.bindTexture(gl.TEXTURE_2D, textureFBO);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RGB, gl.UNSIGNED_BYTE, null); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RGB, gl.UNSIGNED_BYTE, null);
// set the filtering so we don't need mips
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureFBO, 0);
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) { if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
console.log("Framebuffer creation failed."); console.log("Framebuffer creation failed.");
@@ -184,8 +191,8 @@ function drawScene() {
//--- First render pass -> Perlin Noise --- //--- First render pass -> Perlin Noise ---
{/* {
gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO); //TODO: Fix me gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight); gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
//Clear buffer content //Clear buffer content
@@ -193,7 +200,7 @@ function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer
//draw a fullscreen quad //draw a fullscreen quad
gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
// There are 7 floating-point values per vertex // There are 7 floating-point values per vertex
let stride = 5 * Float32Array.BYTES_PER_ELEMENT; let stride = 5 * Float32Array.BYTES_PER_ELEMENT;
@@ -202,23 +209,24 @@ function drawScene() {
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0); gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
gl.enableVertexAttribArray(0); gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, 3 * Float32Array.BYTES_PER_ELEMENT); gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, 3 * Float32Array.BYTES_PER_ELEMENT);
gl.enableVertexAttribAray(1); gl.enableVertexAttribArray(1);
gl.useProgram(program); gl.useProgram(perlinNoiseProgram);
let uTime = gl.getUniformLocation(program, "uTime"); let uTime = gl.getUniformLocation(<WebGLProgram>perlinNoiseProgram, "uTime");
gl.uniform1f(uTime, timeSpent); gl.uniform1f(uTime, timeSpent);
gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw quadr gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw quadr
*/} }
//--- Second render pass -> Geomtry with displacement by perlin noise texture --- //--- Second render pass -> Geomtry with displacement by perlin noise texture ---
{ {
gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Bind default framebuffer gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Bind default framebuffer
gl.viewport(0, 0, viewportWidth, viewportHeight); gl.viewport(0, 0, viewportWidth, viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, VBO); gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
gl.bindTexture(gl.TEXTURE_2D, textureFBO);
// There are 7 floating-point values per vertex // There are 7 floating-point values per vertex
let stride = 5 * Float32Array.BYTES_PER_ELEMENT; let stride = 5 * Float32Array.BYTES_PER_ELEMENT;