search

eee-c / ice-code-editor

Combination code editor (ACE) and Preview for quick feedback prototyping
Other
118 stars 31 forks source link

WebGL errors due to older Three.js library #119

Open mbjames opened 7 years ago

mbjames commented 7 years ago

WebGL: Invalid_OPERATION: getAttribLocation: Program Not Linked

Use of the Application Cache is deprecated on insecure origins. Support will be removed in the future. You should consider switching your application not a secure origin, such as HTTPS.

Are these warnings anything I can fix?

eee-c commented 7 years ago

Is this on Mac? Windows?

I think that I will have to switch to a more recent version of Three.js to eliminate the "Program Not Linked" errors. That's not a quick fix, though, as some of the examples in the book might end up not working properly after making that switch.

If you want to try for yourself, then you change the Three.js library used (and you'll likely have to add some new ones too). The <script> tags at the top would need to be something like:

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="http://threejs.org/examples/js/renderers/Projector.js"></script>

That should work for most of the first half of the book. I have not been able to test everything though (and haven't checked anything after the fruit hunt game). If you're feeling adventurous and go that route, I'm more than happy to help debugging any problems that arise. I'm getting ready to do this anyway, so you'd be giving me a leg up :)

eee-c commented 7 years ago

FWIW, this is a working version of the collisions chapter, using the latest Three.js. I also had to add a setClearColor() call on line 19 to make the background white instead of black.

<body></body>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="http://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="http://gamingJS.com/Tween.js"></script>
<script>
  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xffffff);

  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********

  var not_allowed = [];

  var marker = new THREE.Object3D();
  scene.add(marker);

  var cover = new THREE.MeshNormalMaterial();
  var body = new THREE.SphereGeometry(100);
  var avatar = new THREE.Mesh(body, cover);
  marker.add(avatar);

  var hand = new THREE.SphereGeometry(50);

  var right_hand = new THREE.Mesh(hand, cover);
  right_hand.position.set(-150, 0, 0);
  avatar.add(right_hand);

  var left_hand = new THREE.Mesh(hand, cover);
  left_hand.position.set(150, 0, 0);
  avatar.add(left_hand);

  var foot = new THREE.SphereGeometry(50);

  var right_foot = new THREE.Mesh(foot, cover);
  right_foot.position.set(-75, -125, 0);
  avatar.add(right_foot);

  var left_foot = new THREE.Mesh(foot, cover);
  left_foot.position.set(75, -125, 0);
  avatar.add(left_foot);

  marker.add(camera);

  // Trees
  makeTreeAt( 500,  0);
  makeTreeAt(-500,  0);
  makeTreeAt( 750, -1000);
  makeTreeAt(-750, -1000);

  function makeTreeAt(x, z) {
    var trunk = new THREE.Mesh(
      new THREE.CylinderGeometry(50, 50, 200),
      new THREE.MeshBasicMaterial({color: 0xA0522D})
    );

    var top = new THREE.Mesh(
      new THREE.SphereGeometry(150),
      new THREE.MeshBasicMaterial({color: 0x228B22})
    );
    top.position.y = 175;
    trunk.add(top);

    var boundary = new THREE.Mesh(
      new THREE.CircleGeometry(300),
      new THREE.MeshNormalMaterial()
    );
    boundary.position.y = -100;
    boundary.rotation.x = -Math.PI/2;
    trunk.add(boundary);

    not_allowed.push(boundary);

    trunk.position.set(x, -75, z);
    scene.add(trunk);
  }

  // Now, animate what the camera sees on the screen:
  var clock = new THREE.Clock(true);
  function animate() {
    requestAnimationFrame(animate);
    TWEEN.update();
    walk();
    turn();
    acrobatics();
    renderer.render(scene, camera);
  }
  animate();

  function walk() {
    if (!isWalking()) return;
    var position = Math.sin(clock.getElapsedTime()*5) * 50;
    right_hand.position.z = position;
    left_hand.position.z = -position;
    right_foot.position.z = -position;
    left_foot.position.z = position;
  }

  function turn() {
    var direction = 0;
    if (is_moving_forward) direction = Math.PI;
    if (is_moving_back) direction = 0;
    if (is_moving_right) direction = Math.PI/2;
    if (is_moving_left) direction =  -Math.PI/2;

    spinAvatar(direction);
  }

  function spinAvatar(direction) {
    new TWEEN
      .Tween({y: avatar.rotation.y})
      .to({y: direction}, 100)
      .onUpdate(function () {
        avatar.rotation.y = this.y;
      })
      .start();
  }

  var is_cartwheeling = false;
  var is_flipping = false;
  function acrobatics() {
    if (is_cartwheeling) {
      avatar.rotation.z = avatar.rotation.z + 0.05;
    }
    if (is_flipping) {
      avatar.rotation.x = avatar.rotation.x + 0.05;
    }
  }

  var is_moving_left, is_moving_right, is_moving_forward, is_moving_back;
  function isWalking() {
    if (is_moving_right) return true;
    if (is_moving_left) return true;
    if (is_moving_forward) return true;
    if (is_moving_back) return true;
    return false;
  }

  document.addEventListener('keydown', function(event) {
    var code = event.keyCode;

    if (code == 37) {                                   // left
      marker.position.x = marker.position.x-5;
      is_moving_left = true;
    }
    if (code == 38) {                                   // up
      marker.position.z = marker.position.z-5;
      is_moving_forward = true;
    }
    if (code == 39) {                                   // right
      marker.position.x = marker.position.x+5;
      is_moving_right = true;
    }
    if (code == 40) {                                   // down
      marker.position.z = marker.position.z+5;
      is_moving_back = true;
    }
    if (code == 67) is_cartwheeling = !is_cartwheeling; // C
    if (code == 70) is_flipping = !is_flipping;         // F

    if (detectCollisions()) {
      if (is_moving_left) marker.position.x = marker.position.x+5;
      if (is_moving_right) marker.position.x = marker.position.x-5;
      if (is_moving_forward) marker.position.z = marker.position.z+5;
      if (is_moving_back) marker.position.z = marker.position.z-5;
    }
  });

  document.addEventListener('keyup', function(event) {
    var code = event.keyCode;

    if (code == 37) is_moving_left = false;
    if (code == 38) is_moving_forward = false;
    if (code == 39) is_moving_right = false;
    if (code == 40) is_moving_back = false;
  });

  function detectCollisions() {
    var vector = new THREE.Vector3(0, -1, 0);
    var ray = new THREE.Ray(marker.position, vector);
    var intersects = ray.intersectObjects(not_allowed);
    if (intersects.length > 0) return true;
    return false;
  }
</script>
eee-c commented 7 years ago

I moved the application cache warning to #120 - I think we can resolve that separately.

mbjames commented 7 years ago

Its is on windows. Thanks for the quick reply! I will test the new libraries this evening. Will there be a new library I can try for WebGL? I am using a particle system in my own version of fruit hunt. On a separate note I am trying to upload my own images to the ICE that I can call on similar to your Purple Fruit Monster / Apple and not having much luck. If I need to bring this up else where please let me know.

Thanks again

eee-c commented 7 years ago

For WebGL, you don't need additional libraries. You just need the threejs library (not the canvas or projector library). For physics...? Well, that's another story unfortunately. The fruit hunt game should be fine, but I'll need to find a compatible version of the physics library for projects with physics (like Purple Fruit Monster).

Uploading images to ICE isn't currently supported. We're tracking that issue in #93. It's not hard, but if we do support it, then we need to start keeping track of storage space and generating warnings when space is running out.

For now, the best option is to upload images to a public web server or a public folder in Dropbox. Then load the texture from the public URL. I've got instructions for doing that on Dropbox if you'd like them.

mbjames commented 7 years ago

That would be awesome. I will be testing with the new libraries later this evening and let you know. Another issue I noticed is when I save my code as an HTML and run it everything works great but the Sounds.js library does not. I have do use some HTML to remove "Scroll Bars" etc. but cannot get the Sounds.js to link.

Thank you Sir.

eee-c commented 7 years ago

I'd have to see the code to know what going on with Sounds.js. I'd expect <script src="http://gamingjs.com/Sounds.js"> to work from just about anywhere. And by "work", the various Sound.xxx.play() calls should work where xxx is one of: 'bubble', 'buzz', 'click', 'donk', 'drip', 'guitar', 'knock', 'scratch', 'snick', 'spring', or 'swish'. If you're trying to save and user Sounds.js on another site, you'd need to download the sounds as well as the JS source. It's all in https://github.com/eee-c/Sounds.js.

If the code is publicly available, I'm happy to have a look. It might be best to take further discussion off-list. I'm chris@gamingjs.com.

mbjames commented 7 years ago

Perfect Ill send you the code later today.

mbjames commented 7 years ago

Looks like collision detection does not work with the new Library.

eee-c commented 7 years ago

Aw, bummer. I've added this to my TODO list. Unfortunately, depending on the problem, it could be some time before I can get a fix worked out for that :disappointed:

mbjames commented 7 years ago

Is there another editor you recommend beside the ICE? That I can use in the mean time for the new libraries?

Sent from my iPhone

On Nov 20, 2016, at 8:52 PM, Chris Strom notifications@github.com wrote:

Aw, bummer. I've added this to my TODO list. Unfortunately, depending on the problem, it could be some time before I can get a fix worked out for that 😞

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

eee-c commented 7 years ago

Unfortunately, no. It's not ICE that is the problem. It's the code that we're writing inside of ICE. I'd have to see the specific code that is not working, but it's likely invoking methods / asking the new Three.js library to do things that are only in the old version of Three.js. So... we either live with the warnings in the old Three.js or update the collision code to work with the new Three.js.