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

add mouseMovement

Browse Source
This commit is contained in:
Julian
2020-01-26 02:18:43 +01:00
parent 4bb5a4e162
commit 564a0d43b5
2 changed files with 94 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
index.html
View File

@@ -50,9 +50,9 @@
float octavedPerlinNoise(vec3 P,int octaves,float persistence) {
float total = 0.0;
float frequency = 128.0;
float amplitude = 4.0;
float amplitude = 1.0;
float maxValue = 0.0;
for(int i = 0; i < 8; i++) {
for(int i = 0; i < 6; i++) {
total += noise((P*frequency)) * amplitude;
maxValue += amplitude;
@@ -78,10 +78,10 @@
}
void main(void) {
float n = octavedPerlinNoise(vec3(gl_FragCoord.x*0.001,gl_FragCoord.y*0.007+uTime*0.00005,uTime*0.00005),8,2.0); //Should be scaled along arbitary axis
float n = octavedPerlinNoise(vec3(gl_FragCoord.x*0.001,gl_FragCoord.y*0.003+uTime*0.00005,uTime*0.00005),8,2.6); //Should be scaled along arbitary axis
//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.); //Scales the height off the waves (/8.0)
vec3 color = vec3(n) + (vec3(1., 1., 1.)/2.); //Scales the height off the waves (/8.0)
gl_FragColor = vec4(color,1.0);
}
</script>
@@ -95,23 +95,57 @@
<script id="default-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec3 v_normal;
varying vec3 v_fragPos;
varying vec2 v_uv;
vec3 lightPos = vec3(0.,-1.,10.);
uniform sampler2D displace_map;
vec3 lightPos = vec3(0.,0.,10.); //should be an directional light
vec3 lightColor = vec3(1.0,1.0,1.0);
void main(void) {
//gl_FragColor = vec4(0.0,0.0,1.0-v_height,1.0);
//using forward difference
//Normal vectors are compute as: https://www.scratchapixel.com/lessons/procedural-generation-virtual-worlds/perlin-noise-part-2/perlin-noise-computing-derivatives
vec3 norm = normalize(v_normal);
void main(void) {
vec4 displace = texture2D(displace_map, v_uv);
//calculate normal
float gridPointDelta = 1. / 256.;
vec3 currPoint = vec3(0.0,0.0,displace.x);
vec3 right = vec3(gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x + gridPointDelta,v_uv.y)).x);
vec3 left = vec3(-gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x - gridPointDelta,v_uv.y)).x);
vec3 up = vec3(0.,gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y + gridPointDelta)).x);
vec3 down = vec3(0.,-gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y - gridPointDelta)).x);
//vec3 tangent = normalize(right - currPoint);
//vec3 biTangent = normalize(up - currPoint);
vec3 tangent = normalize(vec3(gridPointDelta,0.,right.z-left.z));
vec3 biTangent = normalize(vec3(0.,gridPointDelta,down.z-up.z));
//vec3 normal = biTangent;
vec3 normal = cross(tangent, biTangent);
vec3 norm = normalize(normal);
vec3 lightDir = normalize(lightPos- v_fragPos);
float diff = max(dot(norm,lightDir),0.0);
vec3 diffuse = diff * lightColor;
vec3 result = (diffuse) * vec3(0.0,0.0,1.0);
//gl_FragColor = vec4(v_normal,1.0);
gl_FragColor = vec4(result,1.0);
//Old lightning
//vec3 toCameraVector = v_fragPos - vec3(0.,0.,0.);
//vec3 reflec = normalize(reflect(toCameraVector, normal));
//Schlicks approximation to Fresnelfactor
//float n1 = 1., n2 = 1.33333;
//float R0 = pow((n1-n2)/(n1+n2), 2.);
//float fresnel = R0 + (1. - R0)*pow((1.-dot(normal,reflec)),5.) ;
//vec3 waterColor = vec3(34./255.,154./255.,211./255.);
//vec3 lightColor = vec3(1.,1.,1.);
//gl_FragColor = vec4(mix(waterColor, vec3(1.,1.,1.),fresnel).xyz, 1.);
//gl_FragColor = vec4(result,1.0);
//gl_FragColor = vec4(normal,1.0);
gl_FragColor = vec4(displace.xyz,1.0); //Show Perlin Noise texture deactivate vertex distrotion before
}
</script>
<script id="default-vs" type="x-shader/x-vertex">
@@ -122,9 +156,7 @@
uniform float uTime;
uniform sampler2D displace_map;
//Normal vectors are compute as: https://www.scratchapixel.com/lessons/procedural-generation-virtual-worlds/perlin-noise-part-2/perlin-noise-computing-derivatives
//using forward difference
varying vec3 v_normal;
varying vec2 v_uv;
varying vec3 v_fragPos;
void main(void) {
@@ -132,20 +164,7 @@
vec4 worldPos = model * vec4(positionAttr.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
gl_Position = projection * worldPos;
v_fragPos = worldPos.xyz;
//calculate normal
float gridPointDelta = 1. / (128. + 1.);
vec3 currPoint = vec3(0.0,0.0,displace.x);
vec3 nextPoint = vec3(gridPointDelta,0.0,texture2D(displace_map,vec2(positionAttr.x + gridPointDelta,positionAttr.y)).x);
vec3 biNormal = normalize(nextPoint - currPoint);
vec3 upperPoint = vec3(0.0,gridPointDelta,texture2D(displace_map,vec2(positionAttr.x,positionAttr.y+gridPointDelta)).x);
vec3 biTangent = normalize(upperPoint - currPoint);
//v_normal = binormDelta;
v_normal = cross(biNormal, biTangent);
v_uv = positionAttr.xy;
}
</script>
<script id="texture-fs" type="x-shader/x-fragment">

53
src/main.ts
View File

@@ -24,6 +24,8 @@ function initGL(canvas: HTMLCanvasElement) {
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
}
gl = <WebGL2RenderingContext>gltemp;
gl.getExtension( 'EXT_color_buffer_float' );
gl.enable(gl.DEPTH_TEST);
}
/** Grid for the watersurface */
@@ -214,11 +216,12 @@ function initFBO() {
// Add attachments
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);
gl.bindTexture(gl.TEXTURE_2D, textureFBO); //last 3 parameter not intertesting becuase we are not supplying data
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RGBA, gl.FLOAT, 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.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
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);
@@ -237,6 +240,11 @@ var timeSpent = 0.0;
var lastTime = new Date().getTime();
var counter = 0.0;
var fps = 0;
/** Input */
var mouseXVel = 0;
var mouseYVel = 0;
var curRotX = 0;
var curRotY = 0;
function drawScene() {
fps++;
let now = new Date();
@@ -322,10 +330,10 @@ function drawScene() {
mat4.identity(model);
let translation = vec3.create();
vec3.set(translation, -.5, -.5, -2.5);
vec3.set(translation, -.5, -.5, -1.5);
mat4.translate(model, model, translation);
//mat4.rotateX(mvp, mvp, 1.5);
//mat4.rotateY(mvp, mvp, timeSpent * 0.001);
mat4.rotateX(model, model, (curRotY += mouseYVel * 0.001));
mat4.rotateY(model, model, (curRotX += mouseXVel * 0.001));
gl.useProgram(defaultProgram);
let model_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "model");
@@ -346,6 +354,39 @@ function drawScene() {
function main() {
const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
initGL(canvas);
var drag = false;
var previousPosX: number | null;
var previousPosY: number | null;
canvas.addEventListener('mousedown', function (evt) {
drag = true;
}, false);
canvas.addEventListener('mousemove', function (evt) {
if (drag) {
if (previousPosX == null || previousPosY == null) {
previousPosX = evt.x;
previousPosY = evt.y;
}
var mousePosX = evt.x;
var mousePosY = evt.y;
mouseXVel = (mousePosX - previousPosX);
mouseYVel = (mousePosY - previousPosY);
previousPosX = mousePosX;
previousPosY = mousePosY;
}
}, false);
var deactivateMouseMovement = function () {
previousPosX = null;
previousPosY = null;
mouseXVel = 0.0;
mouseYVel = 0.0;
drag = false;
console.log(curRotX + " " + curRotY);
}
canvas.addEventListener('mouseup', deactivateMouseMovement, false);
canvas.addEventListener('mouseleave', deactivateMouseMovement, false);
initShaders();
initGeometry();
initFBO();