Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixes examples: wave, smoke, voronoi #48

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fixes examples: wave, smoke, voronoi #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions build/PhiloGL.cls.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 5 additions & 3 deletions build/PhiloGL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2120,8 +2120,8 @@ $.splat = (function() {
}
var domElem = this.domElem;
return {
width: domElem.width || domElem.offsetWidth,
height: domElem.height || domElem.offsetHeight
width: domElem.offsetWidth,
height: domElem.offsetHeight
};
},

Expand Down Expand Up @@ -2563,6 +2563,7 @@ $.splat = (function() {
$$family: 'program',

setUniform: function(name, val) {
this.use();
if (this.uniforms[name]) {
this.uniforms[name](val);
}
Expand Down Expand Up @@ -2662,7 +2663,8 @@ $.splat = (function() {
fs: '',
noCache: false,
onSuccess: $.empty,
onError: $.empty
onError: $.empty,
async: true
}, opt || {});

var vertexShaderURI = opt.path + opt.vs,
Expand Down
1 change: 1 addition & 0 deletions examples/smoke/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Smoke</title>
<!--<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" media="all" type="text/css" href="style.css"/>
Expand Down
2 changes: 1 addition & 1 deletion examples/smoke/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ function webGLStart() {
],
attachment: gl.COLOR_ATTACHMENT0,
data: {
type: gl.FLOAT,
type: gl.UNSIGNED_BYTE,
width: SHADOW_RESO,
height: SHADOW_RESO
}
Expand Down
4 changes: 2 additions & 2 deletions examples/smoke/shaders/move.fs.glsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ void main() {
vec3 position = texture2D(sampler2, vTexCoord).xyz;
float life = texture2D(sampler2, vTexCoord).w;
vec3 v = getAA(sampler1, position);
v += (noise(vec3(vTexCoord, 0.132) + position) -0.5) * 0.01;
v.z += 0.05 / (life + 0.1);
v += (noise(vec3(vTexCoord, 0.132) + position) -0.5) * 0.1;
v.z += 0.03 / (life + 0.1);
position += v * dt * 2.0 * (life * life + 0.1);
position = clamp(position, 0., 1.);
gl_FragColor = vec4(position, life); // vec4(position.xyz, life);
Expand Down
10 changes: 6 additions & 4 deletions examples/smoke/shaders/particles.vs.glsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,21 @@ void main(void) {

// vec3 vel = getAA(sampler1, position) + 1.;
float life = samp.w;
color = vec4(1, 1, 1.1, 1);
color.xyz *= smoothstep(0.3, 0.9, life);
color = vec4(1.);
float lambda = smoothstep(0., 2.0, life);
color.rgb = vec3(1, 0, 0.) * (1. - lambda) + vec3(1., 1., 0.) * (lambda);

gl_Position = projectionMatrix * worldMatrix * vec4(position, 1);
vPosition = gl_Position;
float alpha = 1. - pow((1. - life), .5);
gl_PointSize = devicePixelRatio * 40. / (gl_Position.z + 1.) * (max(0.5, alpha));
gl_PointSize = devicePixelRatio * 40. / (gl_Position.z + 1.) * (max(0.5, alpha));
depth = (gl_Position.z - 2.) / 5.;
if (depth < near || far <= depth) {
gl_PointSize = 0.;
color = vec4(0.);
}
color.a *= alpha * alpha;
color.xyz *= 0.5 + vec3(2, 2, 1.7) / (.1 + pow(distance(lightPosition, position), 2.));
color.xyz *= 0.5 + vec3(2, 2, 1.7) / distance(lightPosition, position);
color.xyz *= clamp(1. - (shadowSamp.z - samp.z) * 10., 0., 1.) * 0.5 + 0.5;

vTexCoord = vec2(0);
Expand Down
52 changes: 27 additions & 25 deletions examples/voronoi/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@ window.addEventListener('DOMContentLoaded', webGLStart, false);

function webGLStart() {
var numSites = 1,
sites = [0, 0, 1],
siteColors = [0.5, 0.5, 0.7],
width = 800,
height = 600,
R = 200,
vs = [],
weight = [1],
fullscreen = false,
dragStart = [],
matStart = null,
mat = new PhiloGL.Mat4(),
imat = mat.clone(),
weighted = false;
sites = [0, 0, 1],
siteColors = [0.5, 0.5, 0.7],
width = 800,
height = 600,
R = 200,
vs = [],
weight = [1],
fullscreen = false,
dragStart = [],
matStart = null,
mat = new PhiloGL.Mat4(),
imat = mat.clone(),
weighted = false;

mat.id();
imat.id();
Expand All @@ -34,11 +34,13 @@ function webGLStart() {

function resize() {
var canvas = document.getElementById('voronoi'),
style = window.getComputedStyle(canvas);
style = window.getComputedStyle(canvas);
height = parseFloat(style.getPropertyValue('height'));
canvas.height = height;
width = parseFloat(style.getPropertyValue('width'));
canvas.width = width;
canvas.height = height * devicePixelRatio;
canvas.width = width * devicePixelRatio;
canvas.style.height = height + "px";
canvas.style.width = width + "px";
this.app && this.app.update();
}

Expand All @@ -47,8 +49,8 @@ function webGLStart() {

function calcXYZ(e) {
var x = e.x / R,
y = e.y / R,
z = 1.0 - x * x - y * y;
y = e.y / R,
z = 1.0 - x * x - y * y;

if (z < 0) {
while (z < 0) {
Expand Down Expand Up @@ -85,7 +87,7 @@ function webGLStart() {
var id = new PhiloGL.Mat4();
id.id();
id.$rotateAxis(('wheelDeltaX' in e.event ? e.event.wheelDeltaX : 0) / 5 / R, [0, 1, 0])
.$rotateAxis(('wheelDeltaY' in e.event ? e.event.wheelDeltaY : e.wheel * 120) / 5 / R, [1, 0, 0]);
.$rotateAxis(('wheelDeltaY' in e.event ? e.event.wheelDeltaY : e.wheel * 120) / 5 / R, [1, 0, 0]);
mat = id.mulMat4(mat);
imat = mat.invert();
var v3 = calcXYZ(e);
Expand All @@ -100,7 +102,7 @@ function webGLStart() {
var id = new PhiloGL.Mat4();
id.id();
id.$rotateAxis((e.x - dragStart[0]) / R, [0, 1, 0])
.$rotateAxis((e.y - dragStart[1]) / R, [-1, 0, 0]);
.$rotateAxis((e.y - dragStart[1]) / R, [-1, 0, 0]);
mat = id.mulMat4(matStart);
imat = mat.invert();
var v3 = calcXYZ(e);
Expand All @@ -113,7 +115,7 @@ function webGLStart() {
var id = new PhiloGL.Mat4();
id.id();
id.$rotateAxis((e.x - dragStart[0]) / R, [0, 1, 0])
.$rotateAxis((e.y - dragStart[1]) / R, [-1, 0, 0]);
.$rotateAxis((e.y - dragStart[1]) / R, [-1, 0, 0]);
mat = id.mulMat4(matStart);
imat = mat.invert();
var v3 = calcXYZ(e);
Expand All @@ -140,7 +142,7 @@ function webGLStart() {
},
onLoad: function (app) {
var gl = app.gl,
program = app.program;
program = app.program;
window.app = app;
app.update = function () {
draw();
Expand All @@ -149,12 +151,12 @@ function webGLStart() {
function draw() {
gl.clearColor(0, 0, 0, 1);
gl.clearDepth(1);
gl.viewport(0, 0, width, height);
gl.viewport(0, 0, width * devicePixelRatio, height * devicePixelRatio);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
PhiloGL.Media.Image.postProcess({
program: 'voronoi',
width: width,
height: height,
width: width * devicePixelRatio,
height: height * devicePixelRatio,
toScreen: true,
uniforms: {
'numberSites': numSites,
Expand Down
6 changes: 3 additions & 3 deletions examples/wave/SwapTexture.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ function SwapTexture(config, count) {
parameters: [
{
name: gl.TEXTURE_MAG_FILTER,
value: gl.supports_OES_texture_float ? gl.LINEAR : gl.NEAREST
value: gl.NEAREST
},
{
name: gl.TEXTURE_MIN_FILTER,
value: gl.supports_OES_texture_float ? gl.LINEAR : gl.NEAREST,
value: gl.NEAREST,
generateMipmap: true
},
{
Expand All @@ -28,7 +28,7 @@ function SwapTexture(config, count) {
}
],
data: {
type: gl.supports_OES_texture_float ? gl.FLOAT : gl.UNSIGNED_BYTE
type: gl.FLOAT
}
},
bindToRenderBuffer: false
Expand Down
2 changes: 2 additions & 0 deletions examples/wave/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Waving water</title>
<!--<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" media="all" type="text/css" href="style.css"/>
Expand All @@ -10,6 +11,7 @@
}
</style>


<script src="../../build/PhiloGL.js"></script>
<script src="CameraControl.js"></script>
<script src="SwapTexture.js"></script>
Expand Down
14 changes: 9 additions & 5 deletions examples/wave/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
PhiloGL.unpack();
window.addEventListener('DOMContentLoaded', webGLStart, false);
var width, height;
var width, height, pixelMult = devicePixelRatio;
function resize() {
var canvas = document.getElementById('wave'),
style = window.getComputedStyle(canvas);
height = parseFloat(style.getPropertyValue('height'));
canvas.height = height;
width = parseFloat(style.getPropertyValue('width'));
canvas.width = width;
canvas.style.height = height + 'px';
canvas.style.width = width + 'px';
canvas.height = height * pixelMult;
canvas.width = width * pixelMult;
}

window.addEventListener('resize', resize);
Expand Down Expand Up @@ -37,7 +39,7 @@ function webGLStart() {
dt = 1,
drops = 5,
IOR = 1.3330, // Water
N = 5;
N = 10;

matStart.id();

Expand Down Expand Up @@ -209,6 +211,7 @@ function webGLStart() {
ylen: 1,
nx: 10,
ny: 10,
offset: 0,
program: 'shore',
textures: ['rocks']
});
Expand Down Expand Up @@ -256,6 +259,7 @@ function webGLStart() {
camera = this.camera;
scene.add(backgroundSphere);
scene.add(waterSurface);
scene.add(shore);
camera.fov = 37.8; // 35mm
camera.far = 1e40;
camera.update();
Expand Down Expand Up @@ -292,7 +296,7 @@ function webGLStart() {
gl.clearColor(0, 0, 0, 1);
gl.clearDepth(1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.viewport(0, 0, width, height);
gl.viewport(0, 0, width * pixelMult, height * pixelMult);
waterSurface.textures = [surfaceBuffer.from[0] + '-texture', 'SKY0', 'SKY1', 'SKY2', 'SKY3', 'rocks'];
this.scene.render();
if (lastDrop < time - 300) {
Expand Down
4 changes: 2 additions & 2 deletions examples/wave/shaders/calc.fs.glsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ void main(void) {

float sticky = 0.00;
float k = 5.;
float regression = 0.0;
float fade = 0.97;
float regression = 0.;
float fade = 0.93;

vec2 position = vTexCoord;
float h = height(position, vec2(0)), //
Expand Down
Loading