Develop Reference

Disable collision of body in Cannon.js

I have a bunch of planes that fit together to form terrain. Each individual plane has it's own cannon.js body (I use three.js for rendering visuals) for collision. Due to memory constraints I de-render each object when the player moves to far away from the object. I can de-render objects easily in three.js just by turning them invisible, but there's no clear way to do this in cannon.js. Basically I want to disable a cannon.js object without deleting it outright.
I've already looked through the docs and there's basically nothing on how to do this. I've also seen no questions on any form on this topic.
Example code below to show you how I want to implement this.
//terrain generation
for (z=0; z<6; z++) {
for (x=0; x<6; x++) {
//cannon.js hitbox creation
var groundShape = new CANNON.Box(new CANNON.Vec3(2,0.125,2));
var groundBody = new CANNON.Body({ mass: 0, material: zeromaterial});
groundBody.addShape(groundShape);
groundBody.position.set(x*4,0,z*4);
world.addBody(groundBody);
maparray.push(groundBody);
//three.js plane creation
grassmesh = new THREE.Mesh(grassgeometry, grassmaterial);
grassmesh.castShadow = true;
grassmesh.receiveShadow = true;
grassmesh.position.set(x*4,0,z*4);
scene.add(grassmesh);
maparray.push(grassmesh);
}
}
...
function animate() {
//detect if player is outside of loadDistance of object
for(i=0; i<maparray; i++){
if(Math.abs(maparray[i].position.x - player.position.x) <
loadDistance && Math.abs(maparray[i].position.z -
player.position.z) < loadDistance) {
//code here magically turns off collisions for object.
}
}
}
animate();

To exclude a CANNON.Body from the simulation, run the following:
world.removeBody(groundBody);
To add it back again, run:
world.addBody(groundBody);
It’s perfectly fine to remove and add it back like this. It will help you get better performance when running word.step().

Cesium - why is scene.pickPositionSupported false

I'm ultimately trying to draw a polygon on top of my house. I can do that.
The problem is that on zoom-out, zoom-in, and rotation (or camera move) the polygon doesn't stick to the top of my house. I received great help from this answer. So, now I'm trying to go through the sample code but there is a lot of Cesium methods and functionality that I need to learn.
The sample code I am trying to follow is located in the gold standard that appears to be baked into the existing camera controller here.
I call testMe with the mousePosition as Cartesian3 and the SceneMode is 3D, so pickGlobe is executed.
Here is my code:
var pickedPosition;
var scratchZoomPickRay = new Cesium.Ray();
var scratchPickCartesian = new Cesium.Cartesian3();
function testMe(mousePosition) {
if (Cesium.defined(scene.globe)) {
if(scene.mode !== Cesium.SceneMode.SCENE2D) {
pickedPosition = pickGlobe(viewer, mousePosition, scratchPickCartesian);
} else {
pickedPosition = camera.getPickRay(mousePosition, scratchZoomPickRay).origin;
}
}
}
var pickGlobeScratchRay = new Cesium.Ray();
var scratchDepthIntersection = new Cesium.Cartesian3();
var scratchRayIntersection = new Cesium.Cartesian3();
function pickGlobe(viewer, mousePosition, result) {
var globe = scene.globe;
var camera = scene.camera;
if (!Cesium.defined(globe)) {
return undefined;
}
var depthIntersection;
if (scene.pickPositionSupported) {
depthIntersection = scene.pickPosition(mousePosition, scratchDepthIntersection);
}
var ray = camera.getPickRay(mousePosition, pickGlobeScratchRay);
var rayIntersection = globe.pick(ray, scene, scratchRayIntersection);
var pickDistance;
if(Cesium.defined(depthIntersection)) {
pickDistance = Cesium.Cartesian3.distance(depthIntersection, camera.positionWC);
} else {
pickDistance = Number.POSITIVE_INFINITY;
}
var rayDistance;
if(Cesium.defined(rayIntersection)) {
rayDistance = Cesium.Cartesian3.distance(rayIntersection, camera.positionWC);
} else {
rayDistance = Number.POSITIVE_INFINITY;
}
var scratchCenterPosition = new Cesium.Cartesian3();
if (pickDistance < rayDistance) {
var cart = Cesium.Cartesian3.clone(depthIntersection, result);
return cart;
}
var cart = Cesium.Cartesian3.clone(rayIntersection, result);
return cart;
}
Here is my problem:
Here is the result:
Here are my questions to get this code working:
1. How do I get the scene.pickPositionSupported set to true? I'm using Chrome on Windows 10. I cannot find in the sample code anything about this and I haven't had much luck with the documentation or Google.
2. Why is rayIntersection not getting set? ray and scene have values and scratchRayIntersection in an empty Cartesian3.
I think if I can get those two statements working, I can probably get the rest of the pickGlobe method working.
WebGLGraphics Report:
I clicked on Get WebGL and the cube is spinning!

Picking positions requires that the underlying WebGL implementation support depth textures, either through the WEBGL_depth_texture or WEBKIT_WEBGL_depth_texture extensions. scene.pickPositionSupported is returning false because this extension is missing. You can verify this by going to http://webglreport.com/ and looking at the list of extensions; I have both of the above listed there. There is nothing you can do in your code itself to make it suddenly return true, it's a reflection of the underlying browser.
That being said, I know for a fact that Chrome supports the depth texture and it works on Windows 10, so this sounds like a likely video card driver issue. I full expect downloading and installing the latest drivers for your system to solve the problem.
As for rayIntersection, from a quick look at your code I only expect it to be defined if the mouse is actually over the globe, which may not always be the case. If you can reduce this to a runnable Sandcastle example, it would be easier for me to debug.

OK. So it turned out that I had a totally messed up Cesium environment. I had to delete it and reinstall it in my project (npm install cesium --save-dev). Then I had to fix a few paths and VOILA! It worked. Thanks to both of you for all your help.

performance of webview using javascript timer is not good

I am a student who is studying webview on android.
as I am a foreigner, I will thank you if you consider my mistakes on grammer...
I encountered a problem on making webview.
it is its "performance" when I use timer(setInterval method).
I am making a shooting game which is like "1945 strikers".
I made a effect which shows explosion-images using "Timer"(setInterval).
(This effect shows 14-pictures in order rapidly)
but, the problem is that my mobile phone can not show that effect naturally.
(it is stopped little by little)
I can not understand what is wrong.
exactly, I reduced "new" methods by using "pop" and turned off sounds.
I guess that the problem is based on the number of timer.
In my game, each bullet which hitted enemy occur explosion Timer.
and I duplicated this Timer to 10 as I thought it was not enough.
source code is like this.
=====call animation=======================
function drawCrash(x,y){
if (crashCount1 == 0) {
crashHereX = x;
crashHereY = y;
crashTimer1 = window.setInterval(crashAnimation1, interval);
crashCount1++;
}
else if (crashCount2 == 0) {
crashHereX2 = x;
crashHereY2 = y;
crashTimer2 = window.setInterval(crashAnimation2, interval);
crashCount2++;
}
... (total 10 methods)
======explosion animation==========================
function crashAnimation1() {
this.crashList=[crash01,crash02,crash03,crash04,crash05,
crash06,crash07,crash08,crash09,crash10,
crash11,crash12,crash13,crash14];
if (crashCount1 >= 13) {
window.clearInterval(crashTimer1);
crashCount1 = 0;
} else {
crashCount1+=1;
}
this.context.drawImage(this.crashList[crashCount1],crashHereX,crashHereY,50,50);
}
function crashAnimation2() {
this.crashList=[crash01,crash02,crash03,crash04,crash05,
crash06,crash07,crash08,crash09,crash10,
crash11,crash12,crash13,crash14];
if (crashCount2 >= 13) {
window.clearInterval(crashTimer2);
crashCount2 = 0;
} else {
crashCount2+=1;
}
this.context.drawImage(this.crashList[crashCount2],crashHereX2,crashHereY2,50,50);
}
... (total 10 methods)
is there anything which makes my game slow?
I have been debugging my source code using Chrome,(using F12 key)
but my laptop computer performs my source code well.
there isn't any problem!
you must hard to understand what I am saying...
what I want to know are like this.
should I reduce setInterval method to show the game performance naturally?
but, previous version (android 4.1.2) had NO problem! it performed naturally!
Now, I am using kitkat version(4.4.2)... I really hate this version.
Even I tried to downgrade my android phone!
it was hard for me to find "e.preventDefault();" it took 3-days for me to find...
is there anything which is better to debug JavaScript?(I am using Chrome F12 key)
is the "splice(index,1);" method occur "stopped phenomenon"(which I said above, "not natural")
when it is used many time? (in my game, many bullets are created and removed(new and splice))
I really want to know how to solve this problem...
Thank you very much.

Where does TrackballControls come from?

I am trying to have some camera control in a threejs scene.
I looked at this example and it seems that it is completely handled with those lines :
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
Those lines use THREE.TrackballControls which comes from js/controls/TrackballControls.js
My question is : what exactly is TrackballControls.js? I cannot find it in the threejs download bundle. Is it an extension? Where can I find it? (Apart from taking it directly from the example's file)

TrackballControls.js is in the jsm/controls sub-directory of the examples directory.
https://github.com/mrdoob/three.js/tree/master/examples/jsm/controls
It is part of the examples -- not the library. You must include it explicitly in your project. You are free to modify it to your liking.
You may also want to consider OrbitControls, which is appropriate if your scene has a natural "up" direction.
three.js r.147

I noticed that the TrackballControls linked by #WestLangley is much more slow than an old version used by this example.
Fiddle with new code: https://jsfiddle.net/vt8n6dcs/1/
Fiddle with old code: https://jsfiddle.net/vt8n6dcs/
I tested it with Firefox 41.0.2. No benchmarks, the performance degradation is quite evident, since when you start the rotation using the mouse, sometimes the image update lags. It happens also with the old version, but a lot less frequently. Not surprisingly, performance seems quite the same in Chrome 48.0.2564.82.
Furthermore mouse sensitivity is much lower. You have to move it a lot to get an appreciable effect on the image. This happens on both Firefox and Chrome.
The only problem I found with the old version is that the center of the commands are always set at the center of the page. You can fix it by using the code of the newer version for handleResize() function:
this.handleResize = function () {
if ( this.domElement === document ) {
this.screen.offsetLeft = 0;
this.screen.offsetTop = 0;
this.screen.width = window.innerWidth;
this.screen.height = window.innerHeight;
} else {
var box = this.domElement.getBoundingClientRect();
// adjustments come from similar code in the jquery offset() function
var d = this.domElement.ownerDocument.documentElement;
this.screen.offsetLeft = box.left + window.pageXOffset - d.clientLeft;
this.screen.offsetTop = box.top + window.pageYOffset - d.clientTop;
this.screen.width = box.width;
this.screen.height = box.height;
}
this.radius = ( this.screen.width + this.screen.height ) / 4;
};

You can import it directly from the example. Insert the following line into your HTML file's <head>:
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
Here is a demo.

Javascript Function Stopping code from executing

I have this function in my javascript which is stopping my code from being executed and returning data, If I remove it from my file the code works perfectly, can anybody see whats wrong?
var TimeToRenderHours = EstimatedCoreHours/(245.76);
if (TimeToRenderHours <= 1) {
alert('less than 1 working');
} else {
alert(TimeToRenderHours);
}
Sorry, I would have posted the page but its huge and very messy, Estimated Core Hours comes from
var EstimatedCoreHours = GetNumeric(NoOfFrames) * GetNumeric(RenderingHours) * GetNumeric(CoresInTest);
the 3 variables which are multiplied are called from input files, eg
var NoOfFrames = document.getElementById ("NoOfFrames").value;

IF I were you i would try to check wether that 3 variables are set correctly. Maybe one of them is undefined and the getnumeric method fails.
I don't see any error in your code.