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

Jump to bottom

Multiple images without page reload #5

Open
ghost opened this issue May 23, 2019 · 7 comments
Open

Multiple images without page reload #5

ghost opened this issue May 23, 2019 · 7 comments

Comments

@ghost
Copy link

ghost commented May 23, 2019

I'd like to implement this functionality (i.e. 3d effect) across several images on the same page without having to do a reload. After digging around in the code it seems possible - just requires a few changes to clean up on each go-round.
@ghost
Copy link
Author

ghost commented May 23, 2019 •
edited by ghost
Loading

Here are my suggested changes:
src.txt

And here is some sample HTML code showing how to use it:

<body class="demo-1">
		<main>
			<div class="frame">
				<div id="gl" class="gl"
					data-imageoriginal="img/i1_orig.jpg" 
					data-imagedepth="img/i1_map.jpg" 
					data-horizontalthreshold="85" 
					data-verticalthreshold="85">
				</div>
			</div>
			<div class="frame">
				<div id="test1" class="gl"
					data-imageoriginal="img/i2_orig.jpg" 
					data-imagedepth="img/i2_map.jpg" 
					data-horizontalthreshold="95" 
					data-verticalthreshold="95">
				</div>
			</div>
			<div class="frame">
			<div id="test2" class="gl"
					data-imageOriginal="img/i3_orig.jpg" 
					data-imageDepth="img/i3_map.jpg" 
					data-horizontalThreshold="85" 
					data-verticalThreshold="85">
				</div>
			</div>
			
			<div class="frame">
			<div id="test3" class="gl"
					data-imageOriginal="img/i4_orig.jpg" 
					data-imageDepth="img/i4_map.jpg" 
					data-horizontalThreshold="85" 
					data-verticalThreshold="85">
				</div>
			</div>
			
			<div>
			<a href="javascript:void(0);" onclick="window.newSketch('test1'); return false;">Img 1</a> | 
			<a href="javascript:void(0);" onclick="window.newSketch('test2'); return false;">Img 2</a> |
			<a href="javascript:void(0);" onclick="window.newSketch('test3'); return false;">Img 3</a> |
			</div>
				
		</main>
		<script src="js/app.js"></script>
	</body>

@kikeonline
Copy link

How do you compile this code?

@ghost
Copy link
Author

ghost commented May 28, 2019

I can upload my setup for this code if I have access to the repository. In short, you need to use browserify and glslify packages to compile the project and node.js to run it. I also had to modify the shader code a touch.

@kikeonline
Copy link

Thanks!! I made it work like this:

var glsl = require('glslify');

import GyroNorm from './lib/gyronorm';
const gn = new GyroNorm.GyroNorm();

var fragment = glsl`
#ifdef GL_ES
precision mediump float;
#endif

uniform vec4 resolution;
uniform vec2 mouse;
uniform vec2 threshold;
uniform float time;
uniform float pixelRatio;
uniform sampler2D image0;
uniform sampler2D image1;

vec2 mirrored(vec2 v) {
vec2 m = mod(v,2.);
return mix(m,2.0 - m, step(1.0 ,m));
}

void main() {
// uvs and textures
vec2 uv = pixelRatio*gl_FragCoord.xy / resolution.xy ;
vec2 vUv = (uv - vec2(0.5))*resolution.zw + vec2(0.5);
vUv.y = 1. - vUv.y;
vec4 tex1 = texture2D(image1,mirrored(vUv));
vec2 fake3d = vec2(vUv.x + (tex1.r - 0.5)*mouse.x/threshold.x, vUv.y + (tex1.r - 0.5)*mouse.y/threshold.y);
gl_FragColor = texture2D(image0,mirrored(fake3d));
}
var vertex = glsl
attribute vec2 a_position;

void main() {
gl_Position = vec4( a_position, 0, 1 );
}
`

@toniGallardo
Copy link

Someone has the code for different images compiled to use, I'm trying to compile it, but I have a lot of errors...
Thanks in advance!

@kurokh
Copy link

kurokh commented Dec 15, 2020

Here are my suggested changes:
src.txt

And here is some sample HTML code showing how to use it:

<body class="demo-1">
		<main>
			<div class="frame">
				<div id="gl" class="gl"
					data-imageoriginal="img/i1_orig.jpg" 
					data-imagedepth="img/i1_map.jpg" 
					data-horizontalthreshold="85" 
					data-verticalthreshold="85">
				</div>
			</div>
			<div class="frame">
				<div id="test1" class="gl"
					data-imageoriginal="img/i2_orig.jpg" 
					data-imagedepth="img/i2_map.jpg" 
					data-horizontalthreshold="95" 
					data-verticalthreshold="95">
				</div>
			</div>
			<div class="frame">
			<div id="test2" class="gl"
					data-imageOriginal="img/i3_orig.jpg" 
					data-imageDepth="img/i3_map.jpg" 
					data-horizontalThreshold="85" 
					data-verticalThreshold="85">
				</div>
			</div>
			
			<div class="frame">
			<div id="test3" class="gl"
					data-imageOriginal="img/i4_orig.jpg" 
					data-imageDepth="img/i4_map.jpg" 
					data-horizontalThreshold="85" 
					data-verticalThreshold="85">
				</div>
			</div>
			
			<div>
			<a href="javascript:void(0);" onclick="window.newSketch('test1'); return false;">Img 1</a> | 
			<a href="javascript:void(0);" onclick="window.newSketch('test2'); return false;">Img 2</a> |
			<a href="javascript:void(0);" onclick="window.newSketch('test3'); return false;">Img 3</a> |
			</div>
				
		</main>
		<script src="js/app.js"></script>
	</body>

Hey there! Can you also upload your app.txt here? I'll be very appreciate. Thanks

@PubliAlex
Copy link

Can somebody upload the modified src.txt compiled like app.js ? I have errors related to the use of modules when I call src.js

Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@kikeonline @kurokh @toniGallardo @PubliAlex