These forums have been archived and are now read-only.

The new forums are live and can be found at https://forums.eveonline.com/

EVE Technology Lab

 
  • Topic is locked indefinitely.
12Next page
 

HTML5, .cube files, the eve online shipviewer, and your website. UPDATED

First post
Author
Gogela
Epic Ganking Time
CODE.
#1 - 2013-01-07 22:18:32 UTC  |  Edited by: Gogela
Is there any way to remove the nebulae and background from the ship viewer so that you have the ship flying over a transparency? Anyone know?

Trying to get it done in here:
http://web.ccpgamescdn.com/shipviewer/ccp.shipviewer-0.989.min.js



UPDATED
Here's a demo

Signatures should be used responsibly...

NickyYo
modro
The Initiative.
#2 - 2013-01-07 22:29:50 UTC
Gogela wrote:
Is there any way to remove the nebulae and background from the ship viewer so that you have the ship flying over a transparency? Anyone know?

Trying to get it done in here:
http://web.ccpgamescdn.com/shipviewer/ccp.shipviewer-0.989.min.js


The javascript isn't even formatted!
It will take years to figure that out!

Quit NOW! unless CCP will sahre the uncompressed version.

..

ISD Suvetar
ISD Community Communications Liaisons
ISD Alliance
#3 - 2013-01-07 22:36:13 UTC
Having had a quick look, I've got a feeling that setting settings.showCubeMap to 0 or false might achieve this, partially at least.

[b]ISD Suvetar Captain/Commando Community Communication Liaisons (CCLs) Interstellar Services Department[/b]

Gogela
Epic Ganking Time
CODE.
#4 - 2013-01-07 22:36:41 UTC
NickyYo wrote:
Gogela wrote:
Is there any way to remove the nebulae and background from the ship viewer so that you have the ship flying over a transparency? Anyone know?

Trying to get it done in here:
http://web.ccpgamescdn.com/shipviewer/ccp.shipviewer-0.989.min.js


The javascript isn't even formatted!
It will take years to figure that out!

Quit NOW! unless CCP will sahre the uncompressed version.

No trolling, you. I've made pretty good progress reading it line by line. The problem is here (minmatar ex.):

"res:/texture/cubemap/minmatar/m01_cube.cube","res:/texture/cubemap/minmatar/m01_cube_blur.cube"

So if I could get the .cube files to load transparent I would think it would work. The problem seems to be that the m01_cube.cube file is the canvas that everything is painted on...

Signatures should be used responsibly...

Gogela
Epic Ganking Time
CODE.
#5 - 2013-01-07 22:44:14 UTC
ISD Suvetar wrote:
Having had a quick look, I've got a feeling that setting settings.showCubeMap to 0 or false might achieve this, partially at least.

Ah... I see. Yup that removed the CubeMap and the ship still rendered. Just need to figure out the background now. Thanks!

Signatures should be used responsibly...

NickyYo
modro
The Initiative.
#6 - 2013-01-07 22:47:31 UTC
Gogela wrote:
NickyYo wrote:
Gogela wrote:
Is there any way to remove the nebulae and background from the ship viewer so that you have the ship flying over a transparency? Anyone know?

Trying to get it done in here:
http://web.ccpgamescdn.com/shipviewer/ccp.shipviewer-0.989.min.js


The javascript isn't even formatted!
It will take years to figure that out!

Quit NOW! unless CCP will sahre the uncompressed version.

No trolling, you. I've made pretty good progress reading it line by line. The problem is here (minmatar ex.):

"res:/texture/cubemap/minmatar/m01_cube.cube","res:/texture/cubemap/minmatar/m01_cube_blur.cube"

So if I could get the .cube files to load transparent I would think it would work. The problem seems to be that the m01_cube.cube file is the canvas that everything is painted on...

ok fair enough, try this http://jsbeautifier.org/ it will make it easier to read.

..

ISD Suvetar
ISD Community Communications Liaisons
ISD Alliance
#7 - 2013-01-07 22:49:55 UTC
If you load the code into Google Chrome, go to Sources then open the file and choose the pretty print button at the bottom.

[b]ISD Suvetar Captain/Commando Community Communication Liaisons (CCLs) Interstellar Services Department[/b]

NickyYo
modro
The Initiative.
#8 - 2013-01-07 22:51:55 UTC  |  Edited by: NickyYo
Gogela wrote:
ISD Suvetar wrote:
Having had a quick look, I've got a feeling that setting settings.showCubeMap to 0 or false might achieve this, partially at least.

Ah... I see. Yup that removed the CubeMap and the ship still rendered. Just need to figure out the background now. Thanks!


Also to add to that, if you want your own custom background, edit the files between line 126 and 136 once the file is decompressed.

EDIT: i think this will work :S

..

Gogela
Epic Ganking Time
CODE.
#9 - 2013-01-07 23:03:43 UTC
NickyYo wrote:
Gogela wrote:
ISD Suvetar wrote:
Having had a quick look, I've got a feeling that setting settings.showCubeMap to 0 or false might achieve this, partially at least.

Ah... I see. Yup that removed the CubeMap and the ship still rendered. Just need to figure out the background now. Thanks!


Also to add to that, if you want your own custom background, edit the files between line 126 and 136 once the file is decompressed.

EDIT: i think this will work :S

No...sadly it will not. Omiting those files altogether through the settings (ex: showCubemap: 0, ) in your HTML doc still leaves you with a black background... looking into it now...

Signatures should be used responsibly...

Gogela
Epic Ganking Time
CODE.
#10 - 2013-01-08 01:03:08 UTC
Well... I figured out some other very cool stuff... just have to figure out how to keep it from spinning onload and remove the black background. I'm calling it a night for now.

Signatures should be used responsibly...

Karbowiak
State War Academy
Caldari State
#11 - 2013-01-08 06:35:30 UTC
If you're interested in sharing your work, i will give you a sum of isk for your troubles Smile
Gogela
Epic Ganking Time
CODE.
#12 - 2013-01-08 07:13:38 UTC  |  Edited by: Gogela
Karbowiak wrote:
If you're interested in sharing your work, i will give you a sum of isk for your troubles Smile

Hay, WHEN I figure this all out I'll let you have it for free... how about that. If I can remove the background and replace it with a transparency, and stop the ship from auto-rotating on load, I'll write you the frickin' manual that will make every killboard and forum an HTML5 masterpiece. I already wrote a bitchin' backdrop for my own corp... it just needs this as flair. I just don't know JAVA very well... never needed it... but I'm learning. Will be working with the .cube files tomorrow, as that may be where the background problem lies...

Edit: Some of the stuff you can do with the model, positioning, and behavior is pretty sweet. You can control EVERYTHING, going well above and beyond the eve ship viewer as it is on CCPs site...

Signatures should be used responsibly...

Liu Ellens
Sebiestor Tribe
Minmatar Republic
#13 - 2013-01-08 07:35:46 UTC  |  Edited by: Liu Ellens
It'll be a combination of the alpha settings and the clear color.
Per default, WebGL has no opaque background and would actually do what you want; A list of settings allows the developer to achieve an opaque (black) background during the render process.

Have a look here: http://games.greggman.com/game/webgl-and-alpha/ and do the inverse (i.e., try NOT to get a solid background). Because of the defaults, I believe the magic will happen around the lines of gl.clearColor() and clear().

edit: Some further StackOverflow info: http://stackoverflow.com/questions/12273858/how-to-make-webgl-canvas-transparent

Well, they oughta know what to do with them hogs out there for shure.

Gogela
Epic Ganking Time
CODE.
#14 - 2013-01-08 07:44:14 UTC  |  Edited by: Gogela
Liu Ellens wrote:
It'll be a combination of the alpha settings and the clear color.
Per default, WebGL has no opaque background and would actually do what you want; A list of settings allows the developer to achieve an opaque (black) background during the render process.

Have a look here: http://games.greggman.com/game/webgl-and-alpha/ and do the inverse (i.e., try NOT to get a solid background). Because of the defaults, I believe the magic will happen around the lines of gl.clearColor() and clear().

edit: Some further StackOverflow info: http://stackoverflow.com/questions/12273858/how-to-make-webgl-canvas-transparent

Man.... you just took a big crap on my parade. Will look into it. Sounds like I need to do some writing.

Thanks for the info though. Will see if I can write my way out of this.

tl;dr; THANK YOU

Signatures should be used responsibly...

Gogela
Epic Ganking Time
CODE.
#15 - 2013-01-08 18:27:40 UTC  |  Edited by: Gogela
I figured out all the behavior stuff, and thanks to the ISD found the "on/off" switch for the nebulae. The only thing I can't do right now is remove the black background once the ship renders. I think that WebGL stuff may be on the right track.

p.s. here's how a Cynabal is called: http://web.ccpgamescdn.com/shipviewer/assets/dx9/model/ship/angel/battlecruiser/angbc1/angbc1_t1.red

Signatures should be used responsibly...

Calico-Jack Daniels
#16 - 2013-01-08 18:49:52 UTC  |  Edited by: Calico-Jack Daniels
Edit: b.style.background = "#000"

This is setting the background style of the DIV element. Have you tried making a transparent png file with height 22px and putting it in there?


so it should read b.style.background = "url('../images/transparentimagename.png') this might work, haven't tested it yet.

This is found on line 2252 in the code block:

CCPShipViewer.prototype.onAllResourcesLoaded = function () {
ref.resourcesLoaded = !0, ref.container.style.width = ref.width + "px", ref.container.clientHeight == 0 && (ref.container.style.height = ref.height + "px");
if (ref.isWebGL) {
var a = document.createElement("canvas");
a.width = ref.width, a.height = ref.height, a.id = "canvas_" + ref.containerId, camera = new TestCamera(a);
if (showFPS) {
var b = document.createElement("div");
b.style.height = "22px", b.style.color = "#FFF", b.style.background = "#000", b.id = ref.containerId + "_FPS", ref.container.appendChild(b)
}
ref.container.appendChild(a), ref.container.addEventListener("mousedown", ref.onMouseDown, !1), device.CreateDevice(a), device.mipLevelSkipCount = quality;
var c = vec3.create([1, 1, 1]);
vec3.normalize(c), variableStore._variables.u_sunDirection = new Tw2Vector3Parameter("u_sunDirection", c), variableStore._variables.u_sunColor = new Tw2Vector3Parameter("u_sunColor", vec3.create([1, 1, 1])), variableStore._variables.u_ambientColor = new Tw2Vector3Parameter("u_ambientColor", vec3.create([.1, .1, .1])), scene = new EveSpaceScene, postprocess = new Tw2PostProcess, device.Schedule(Render), tick()
}

I go well with Quafe...

Gogela
Epic Ganking Time
CODE.
#17 - 2013-01-08 18:56:19 UTC  |  Edited by: Gogela
Calico-Jack Daniels wrote:
Without having jumped into this myself, have you tried linking to a transparent png image by replacing the BG reference or better yet, CSS?

Yes. There's no background image reference in the ship model call that I can see (or maybe I missed something?), and I've disabled the nebulae from loading at all. All the "canvas" elements have been set to transparent, and for the loading screen that works. It's when the ship is rendered that the black background is added. I'm loading the style sheet and java files locally while I play around with it.

Calico-Jack Daniels wrote:
Edit: b.style.background = "#000"

This is setting the background style of the DIV element. Have you tried making a transparent png file with height 22px and putting it in there?


so it should read b.style.background = "url('../images/transparentimagename.png') this might work, haven't tested it yet.

This is found on line 2252 in the code block:

CCPShipViewer.prototype.onAllResourcesLoaded = function () {
ref.resourcesLoaded = !0, ref.container.style.width = ref.width + "px", ref.container.clientHeight == 0 && (ref.container.style.height = ref.height + "px");
if (ref.isWebGL) {
var a = document.createElement("canvas");
a.width = ref.width, a.height = ref.height, a.id = "canvas_" + ref.containerId, camera = new TestCamera(a);
if (showFPS) {
var b = document.createElement("div");
b.style.height = "22px", b.style.color = "#FFF", b.style.background = "#000", b.id = ref.containerId + "_FPS", ref.container.appendChild(b)
}
ref.container.appendChild(a), ref.container.addEventListener("mousedown", ref.onMouseDown, !1), device.CreateDevice(a), device.mipLevelSkipCount = quality;
var c = vec3.create([1, 1, 1]);
vec3.normalize(c), variableStore._variables.u_sunDirection = new Tw2Vector3Parameter("u_sunDirection", c), variableStore._variables.u_sunColor = new Tw2Vector3Parameter("u_sunColor", vec3.create([1, 1, 1])), variableStore._variables.u_ambientColor = new Tw2Vector3Parameter("u_ambientColor", vec3.create([.1, .1, .1])), scene = new EveSpaceScene, postprocess = new Tw2PostProcess, device.Schedule(Render), tick()
}

Yup. Found that guy. I set it to transparent as well... and also to bright blue to see if it would show me what the hell was going on. It didn't work. The background is still black. I'm leaving it transparent while I keep looking.

Signatures should be used responsibly...

Calico-Jack Daniels
#18 - 2013-01-08 19:06:08 UTC
have you viewed the html output in firebug and looked at the DOM to see if there's anything there?

I go well with Quafe...

Gogela
Epic Ganking Time
CODE.
#19 - 2013-01-08 19:24:44 UTC
Calico-Jack Daniels wrote:
have you viewed the html output in firebug and looked at the DOM to see if there's anything there?

Yah. It all looks good.

Signatures should be used responsibly...

Liu Ellens
Sebiestor Tribe
Minmatar Republic
#20 - 2013-01-09 18:30:49 UTC  |  Edited by: Liu Ellens
Ok, finally found some time for hacking and got it. (Pics or it didn't happen *)

Disclaimer: I made a hack and this is just for research use; Proper cleanup would be required and I'd prefer a dedicated solution to be done (i.e., write a dedicated ship viewer instead of waiting for the unmodified source - like I did with upro & a map viewer ;)

Anyway, simply removing the nebulae did not entirely work, the corresponding skybox would still be rendered - and without a texture, it came out black.
In the CCPShipViewer.Render() method some tweaks were needed. This method is right at the top, so not much to search.
original (Chrome beautified) wrote:

...

camera.Update(f), scene.Update(f), device.SetStandardStates(device.RM_OPAQUE), device.gl.clearColor(0, 0, 0, 0), device.gl.clearDepth(1), device.gl.viewport(0, 0, device.gl.viewportWidth, device.gl.viewportHeight), device.gl.clear(device.gl.COLOR_BUFFER_BIT | device.gl.DEPTH_BUFFER_BIT), ship && ship.boosterGain < boosterGain && (ship.boosterGain += boosterGain / 80);
if (quality == 3) {
var g = camera.GetView(), h = mat4.inverse(g, mat4.create()), i = mat4.multiplyVec4(h, [1, 1, 2, 0], quat4.create());
vec3.set(i, scene.sunDirection)
}
device.SetProjection(camera.GetProjection()), device.SetView(camera.GetView()), scene.Render(), ref.postprocessEnabled && postprocess.Render()
...


a little bit reordered and modified:

hack wrote:

camera.Update(f), scene.Update(f), device.SetStandardStates(device.RM_TRANSPARENT);

var backAlpha = 0.4;
device.gl.clearColor(0, 0, 0, backAlpha);
device.gl.clearDepth(1);
device.gl.viewport(0, 0, device.gl.viewportWidth, device.gl.viewportHeight);
device.gl.clear(device.gl.COLOR_BUFFER_BIT | device.gl.DEPTH_BUFFER_BIT);
ship && ship.boosterGain < boosterGain && (ship.boosterGain += boosterGain / 80);
if (quality == 3) {
var g = camera.GetView(), h = mat4.inverse(g, mat4.create()), i = mat4.multiplyVec4(h, [1, 1, 2, 0], quat4.create());
vec3.set(i, scene.sunDirection)
}
device.SetProjection(camera.GetProjection()), device.SetView(camera.GetView());
scene.Render();
//ref.postprocessEnabled && postprocess.Render()


In essence:
* the postprocess was removed - looking at the corresponding code it is what I believe to be the sky box.
* the StandardState is set to RM_TRANSPARENT instead of RM_OPAQUE -- mainly to enable BLEND.

The backAlpha is a number 0.0 .. 1.0 specifying the alpha value with 0.0 being fully transparent. The screenshot shows the 0.4 value.

What you will then notice (also visible in the screenshot) is the next problem: Alpha values of textures, as seen with the blinking lights, which appear to be blocky. I didn't want to look into that now, because this topic took me very long to handle in upro ;) Extra time could be spent into looking for that cause, but I'd rather refer to my disclaimer above.

*) I didn't investigate why the whole scene display was moved down, probably a layout issue from my offline version

Well, they oughta know what to do with them hogs out there for shure.

12Next page