ghost commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

How do you compile this code?

ghost commented 5 years ago

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 commented 5 years ago

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 = pixelRatiogl_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 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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

akella / fake3d

Multiple images without page reload #5

ifdef GL_ES

endif