WebGL errors due to older Three.js library #119
Comments
|
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 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 :) |
|
FWIW, this is a working version of the collisions chapter, using the latest Three.js. I also had to add a <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
changed the title
|
I moved the application cache warning to #120 - I think we can resolve that separately. |
|
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 |
|
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. |
|
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. |
|
I'd have to see the code to know what going on with Sounds.js. I'd expect 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 [email protected]. |
|
Perfect Ill send you the code later today. |
|
Looks like collision detection does not work with the new Library. |
|
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 😞 |
|
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
|
|
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. |
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?
The text was updated successfully, but these errors were encountered: