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

render fake perlin noise waves

Browse Source
This commit is contained in:
Julian
2020-01-22 02:20:25 +01:00
parent 0ae0bb80eb
commit 5a24ae7216
2 changed files with 103 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@@ -5,11 +5,13 @@
<script id="shader-fs" type="x-shader/x-fragment"> <script id="shader-fs" type="x-shader/x-fragment">
precision mediump float; precision mediump float;
uniform float uTime;
// Noise // Noise
// Source: https://medium.com/neosavvy-labs/webgl-with-perlin-noise-part-1-a87b56bbc9fb // Source: https://medium.com/neosavvy-labs/webgl-with-perlin-noise-part-1-a87b56bbc9fb function
// Description: https://flafla2.github.io/2014/08/09/perlinnoise.html // Description: https://flafla2.github.io/2014/08/09/perlinnoise.html with octaves
// https://mzucker.github.io/html/perlin-noise-math-faq. // https://mzucker.github.io/html/perlin-noise-math-faq mathematics
// http://www.huttar.net/lars-kathy/graphics/perlin-noise/perlin-noise.html deeper look
// https://thebookofshaders.com/11/ // https://thebookofshaders.com/11/
//ordered by importance //ordered by importance
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
@@ -45,9 +47,42 @@ float noise(vec3 P) {
return 2.2 * mix(mix(nz.x,nz.z,f.y), mix(nz.y,nz.w,f.y), f.x); return 2.2 * mix(mix(nz.x,nz.z,f.y), mix(nz.y,nz.w,f.y), f.x);
} }
float octavedPerlinNoise(vec3 P,int octaves,float persistence) {
float total = 0.0;
float frequency = 128.0;
float amplitude = 4.0;
float maxValue = 0.0;
for(int i = 0; i < 8; i++) {
total += noise((P*frequency)) * amplitude;
maxValue += amplitude;
amplitude *= persistence;
frequency /= 2.;
}
return total/maxValue;
}
float turbulence(vec3 P) {
float f = 0., s = 1.;
for (int i = 0 ; i < 9 ; i++) {
f += abs(noise(s * P)) / s;
s *= 2.;
P = vec3(.866 * P.x + .5 * P.z, P.y + 100., -.5 * P.x + .866 * P.z);
}
return f;
}
vec3 clouds(float x, float y) {
float L = turbulence(vec3(x, y, 1. * .1));
return vec3(noise(vec3(.5, .5, L) * .7));
}
void main(void) { void main(void) {
float n = noise(vec3(gl_FragCoord.xy*0.2,0.0)); float n = octavedPerlinNoise(vec3(gl_FragCoord.x*0.001,gl_FragCoord.y*0.007+uTime*0.1,uTime*0.05),8,2.0); //Should be scaled along arbitary axis
gl_FragColor = vec4(n,n,n,1.0); //float n = noise(vec3(gl_FragCoord.xy*0.01,uTime));
//vec3 cloudEffect = clouds(gl_FragCoord.x*0.005, gl_FragCoord.y*0.005);
vec3 color = n + (vec3(1., 1., 1.)/2.);
gl_FragColor = vec4(color,1.0);
} }
</script> </script>
@@ -59,8 +94,11 @@ float noise(vec3 P) {
} }
</script> </script>
</header> </header>
<body> <body>
<canvas id="window" width="800" height="600" style="margin:0 auto; border: solid #000000 1px; display:block;"></canvas> <canvas id="window" width="800" height="600"
style="margin:0 auto; border: solid #000000 1px; display:block;"></canvas>
<script src="build/app.js"></script> <script src="build/app.js"></script>
</body> </body>
</html> </html>

18
src/main.ts
View File

@@ -2,8 +2,6 @@ var gl: WebGLRenderingContext;
var viewportWidth = 0; var viewportWidth = 0;
var viewportHeight = 0; var viewportHeight = 0;
main();
function initGL(canvas: HTMLCanvasElement) { function initGL(canvas: HTMLCanvasElement) {
var gltemp; var gltemp;
try { try {
@@ -27,9 +25,9 @@ function initGL(canvas: HTMLCanvasElement) {
function initGeometry() { function initGeometry() {
let VBO = gl.createBuffer(); let VBO = gl.createBuffer();
let vertexData = [-0.5, -0.5, 0.0, let vertexData = [-1.0, -1.0, 0.0,
0.5, -0.5, 0.0, 1.0, -1.0, 0.0,
0.0, 0.5, 0.0]; 0.0, 1.0, 0.0];
gl.bindBuffer(gl.ARRAY_BUFFER, VBO); gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
@@ -99,20 +97,24 @@ function initShaders() {
return program; return program;
} }
var timeSpent = 0.0;
function drawScene(buffer: WebGLBuffer, program: WebGLProgram) { function drawScene(buffer: WebGLBuffer, program: WebGLProgram) {
timeSpent += 1.0 / 60.0;
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, buffer); gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// There are 7 floating-point values per vertex // There are 7 floating-point values per vertex
var stride = 3 * Float32Array.BYTES_PER_ELEMENT; let stride = 3 * Float32Array.BYTES_PER_ELEMENT;
// Set up position stream // Set up position stream
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.useProgram(program); gl.useProgram(program);
let uTime = gl.getUniformLocation(program, "uTime");
gl.uniform1f(uTime, timeSpent);
gl.drawArrays(gl.TRIANGLES, 0, 3); gl.drawArrays(gl.TRIANGLES, 0, 3);
} }
@@ -130,10 +132,12 @@ function main() {
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
if (triangleVBO != null && shaderProgram != null) { if (triangleVBO != null && shaderProgram != null) {
drawScene(triangleVBO, shaderProgram); window.setInterval(drawScene, 1000 / 60, triangleVBO, shaderProgram);
} }
if (gl.getError() != gl.NO_ERROR) { if (gl.getError() != gl.NO_ERROR) {
console.log("OpenGL Error!: "); console.log("OpenGL Error!: ");
} }
} }
main();