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;
void main(void) {
//gl_FragColor = texture2D(u_texture, v_uv);
gl_FragColor = vec4(0.0,0.0,1.0,1.0);
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">

40
src/main.ts
View File

@@ -24,6 +24,10 @@ function initGL(canvas: HTMLCanvasElement) {
gl = <WebGLRenderingContext>gltemp;
}
function genereateGrid(precision: number) {
}
/** Init Geomtry for an Triangle */
var VBO: WebGLBuffer | null = null;
function initGeometry() {
@@ -138,21 +142,24 @@ function initShaders() {
/** Init an FBO used for the first render pass / perlin noise */
var perlinNoiseFBO: WebGLFramebuffer | null = null;
var perlinNoiseFBOWidth = 400;
var ferlinNoiseFBOHeight = 400;
var textureFBO : WebGLTexture | null = null;
var perlinNoiseFBOWidth = 256;
var ferlinNoiseFBOHeight = 256;
function initFBO() {
perlinNoiseFBO = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
// Add attachments
let tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
textureFBO = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, textureFBO);
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_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) {
console.log("Framebuffer creation failed.");
@@ -184,8 +191,8 @@ function drawScene() {
//--- First render pass -> Perlin Noise ---
{/*
gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO); //TODO: Fix me
{
gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
//Clear buffer content
@@ -193,7 +200,7 @@ function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer
//draw a fullscreen quad
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
// There are 7 floating-point values per vertex
let stride = 5 * Float32Array.BYTES_PER_ELEMENT;
@@ -202,23 +209,24 @@ function drawScene() {
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.enableVertexAttribArray(1);
gl.useProgram(program);
let uTime = gl.getUniformLocation(program, "uTime");
gl.useProgram(perlinNoiseProgram);
let uTime = gl.getUniformLocation(<WebGLProgram>perlinNoiseProgram, "uTime");
gl.uniform1f(uTime, timeSpent);
gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw quadr
*/}
}
//--- Second render pass -> Geomtry with displacement by perlin noise texture ---
{
{
gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Bind default framebuffer
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.bindTexture(gl.TEXTURE_2D, textureFBO);
// There are 7 floating-point values per vertex
let stride = 5 * Float32Array.BYTES_PER_ELEMENT;