
Freeciv WebGL 3D - tobltobs
https://play.freeciv.org/
======
roschdal
Hi everyone! I'm the developer of the Freeciv-web WebGL version. I'm very
interested in hearing your feedback on this version, so I can improve it. I'm
always interested in hearing what you think is the most important thing to
improve in the game. (I'm so happy my side-project has reached the frontpage
of HN again :)

It is using the Three.js 3D engine. Currently it works nicely on modern
computers and laptops with decent 3D hardware, and there could be some issues
on some mobile devices. For example, old iPhone devices have very poor 3D
hardware.

This is an open source project, so we're always looking for developers to help
improve the game: [https://github.com/freeciv/freeciv-
web/](https://github.com/freeciv/freeciv-web/)

~~~
Steuard
I don't know if this is a WebGL issue, a Mac issue, a Firefox issue (I use
NoScript, but I've allowed scripts for the site and the rest of the game seems
to work fine), or what, but I'm having absolutely no success in getting a
middle click to do anything in the WebGL version of the game (like, say, show
tile info). My mouse's middle click works fine in the 2D web version, but
doesn't work here (nor does clicking right and left together). (Meanwhile, I
have no idea what I'd do to get middle click info if I were just using the
touchpad. Combining with cmd, ctrl, option, shift, etc. doesn't seem to do
anything, apart from ctrl-click emulating a right click.) Am I the only one
with this issue? Any thoughts on what might be going wrong?

~~~
fiddlerwoaroof
If you have a recent enough mac you can make a two finger click he right click
and then, with better touch tool, make a three finger click he middle click.

------
bhouston
Nice! Some feedback from a Three.JS contributor:

\- I notice you are using Collada 3D model files inside of a zip file:
[https://play.freeciv.org/3d-models/models.zip](https://play.freeciv.org/3d-models/models.zip)
It may be better to store the models in glTF format. It would be smaller and
faster loading. Although to be honest, the last time I checked converting to
glTF with high fidelity was very difficult to do.

\- You should probably have cache forever on your game assets (3d models,
textures, etc.) but have version numbers or hashes (my preference) associated
with them -- it will load faster.

\- Even if you do not switch to glTF, it might be better to have each Collada
3D model as a separate resource, so that as you change things it doesn't have
to redownload the whole zip file.

\- It is weird that you have *.zip file. You can likely just serve the collada
assets using the built-in HTTP gzip encoding:
[https://en.wikipedia.org/wiki/HTTP_compression](https://en.wikipedia.org/wiki/HTTP_compression)
Thus it will be handled by a faster path in the browser than using a JS
unzipper.

\- You may want a proxy scene of boxes to raycast against. Hit testing my
simple scene takes 5ms and I have a top end computer. Ray casting against
THREE.BufferGeometry in Three.JS is just unreasonably slow. And THREE.Geometry
is just slow all around, even though raycasting is a bit faster than with
THREE.BufferGeometry. Another approach is to render the scene a second time to
the offscreen with unique colors per object. Then hit testing is just figuring
out which color was at the pixel under the cursor. This is highly scalable and
is a very commonly used technique in games.

~~~
roschdal
Thanks for the feedback! I'll try using the glTF format. I'm putting the
Collada files in a zip file to save CPU resources on the server, since
compression on the HTTP layer would use more server CPU. Also compressing all
the models in a single zip file results in overall less bandwith usage, and
bandwidth is limited on our server. Do you have more ideas about improvements?

~~~
bhouston
\- You could also use Three.JS's binary format. It isn't half bad, especially
served using HTTP compression. Blender can do conversions to it pretty well.

\- You can use Canvas to draw to and then convert those to textures, that can
make it easy to create very interesting pop-up information in the 3D scene.
You could have the Canvas cleared to transparent and then write non-
transparent stuff to it. Then you will have text and graphics floating in the
air. Could look cool.

\- You could use a DOF pass so that the 3D world could look tilt-shifted:
[https://en.wikipedia.org/wiki/Tilt%E2%80%93shift_photography](https://en.wikipedia.org/wiki/Tilt%E2%80%93shift_photography)
[https://threejs.org/examples/webgl_postprocessing_dof2.html](https://threejs.org/examples/webgl_postprocessing_dof2.html)

\- You could use a Bloom pass with HDR to get some nice shines:
[https://threejs.org/examples/webgl_postprocessing_unreal_blo...](https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html)

\- You should probably try to use the STandard material model (GGX + Metallic
+ Roughness) in Three.JS rather than Phong. Looks much better:
[https://threejs.org/examples/#webgl_materials_standard](https://threejs.org/examples/#webgl_materials_standard)

\- Use the static serving of gzipped assets as discussed elsewhere.

\- You should have hashes on your *.js files with caching for ever. This is
pretty standard practice.

\- Think about using the HDR stuff I contributing to Three.JS -- it can lead
to amazing looking materials. Here is an example that uses IBL and HDR and
tonemapping:
[https://threejs.org/examples/webgl_materials_envmaps_hdr.htm...](https://threejs.org/examples/webgl_materials_envmaps_hdr.html)
[https://threejs.org/examples/webgl_tonemapping.html](https://threejs.org/examples/webgl_tonemapping.html)
Given that you are in daylight, I think this would work amazingly. Would look
way better than simple lights. But it only works on Standard/Physical
materials and not Phong materials.

I didn't look into too much more as I only looked at the production minified
code.

~~~
roschdal
Thanks! Very useful.

------
oelmekki
The announcement page for beta (December 11th) :
[http://play.freeciv.org/blog/2016/12/freeciv-web-
with-3d-web...](http://play.freeciv.org/blog/2016/12/freeciv-web-
with-3d-webgl-version-in-early-beta-available/)

Interesting quote from this article (not to diminish the feat of a webgl
version on classic screens, gg guys!) :

> Support for virtual reality using Google Cardboard is also under
> development.

Flying around a world and manipulating armies sounds awesome, kind of like
"google earth VR meets strategy games". I guess freeciv will need game
controller support first to make this playable, though.

------
serf
_" Please Don't Use these characters in your password : % # & ?"_

Please don't enforce password restrictions like this.

~~~
Sohcahtoa82
Seriously.

If you can't handle passwords with certain characters in them, you're probably
doing something very wrong.

------
em3rgent0rdr
Just tried it out and sharing my experiences. It is quite choppy for me, only
getting a few frames per second, on 2K monitor, but I'm on a computer that
will happily play Civ 6 on low quality. I wasn't expecting it to be fast,
though.

~~~
kalleboo
Running the benchmark in the game settings, I got these results on my wholly-
unsuitable-for-any-gaming 2012 Retina MacBook Pro (GeForce GT 650M).

Highest Gfx settings (default). 2800x1700px window. Best out of 2 runs:

Chrome 56: 33 fps

Safari 10.0.3: 29 fps

Firefox 51: 13 fps

~~~
fb03
aww, you think your GT650M is unsuitable for gaming? you should try my for-
development-only first gen core i7 (920!) with a GEFORCE GTX 275 ;P

I can still play Team Fortress 2 at 1080p just fine on this tho ;)

~~~
tgb
Is the 275 actually slower than a 650M?

~~~
mappu
[http://www.tomshardware.com/reviews/gpu-
hierarchy,4388.html](http://www.tomshardware.com/reviews/gpu-
hierarchy,4388.html) puts the 275 in the same ballpark as the full 650, and
the 650M has the same GK107 chip as the 650 but underclocked by 20-30%. So i
think my money is on the 275 being faster.

~~~
tgb
That was my intuition, thanks.

~~~
fb03
Holy shit, seriously? this is a 6+ year old card!!!! Not bad....

------
lawless123
Could we have this 3d in the downloadable binary?

~~~
roschdal
This is not really possible at the moment. This 3D version is using WebGL in
Javascript running as a web-application, while the downloadable binary is
implemented in C.

~~~
JepZ
Electron?

~~~
lawless123
I think i'd prefer something native.

~~~
baldfat
Electron apps can work great. I have noticed a general bias against all
Electron apps and I think it is because of how poorly Atom performed when it
was first released. Virtual Studio Code, and RStudio are shinning examples of
a good Electron App.

~~~
problems
I've run many other Electron apps - they all suffer from the same problems.
Ugly non-native UI, DPI scaling that doesn't quite work right, poor platform
integration and massive binaries.

Additionally, with something like this, I'd imagine it would be quite possible
to port to a simple Node based system with OpenGL support without the need to
embed a browser. Would probably improve performance too due to removed
sandboxing.

~~~
z3t4
there are no node based systems with opengl support.

~~~
problems
There's a node-webgl package which provides all of the OpenGL ES features with
no need for the web browser part, there's also SDL and GLFW bindings
available. While it's not full OpenGL - I couldn't find any well maintained GL
bindings at least - it should be completely sufficient to port a WebGL
project.

~~~
z3t4
I've searched a lot for such a package, most are five years old and doesn't
work. Best I could find was the x11 package, but most examples doesn't work.
And if you go with a wrapper you could as well use Electron or nw.js witch I'm
using atm.

------
MBCook
Is there a way to see it in action without starting a game? I don't want to
end up with someone in a game with me I just plan to abandon since I only
wanted to see it in motion.

~~~
oelmekki
There's a "single player 3d webgl" button on top of home page, you can use it
to play against AIs.

------
boobsbr
Very nice. I miss hotseat multiplayer so much.

I loved playing Age of Wonders with my friends on the same machine.

------
brilliantcode
is there a game engine that lets you create multiplayer browser based games
like this?

I'm also wishing to see a Freetotalwar type of project. The map campaigns are
turn based and highly entertaining.

------
MarkPNeyer
it shows up in chinese for me - anyone else?

~~~
roschdal
Try changing your browser language to English.

------
BHSPitMonkey
Good job, HN! We've already killed it.

~~~
roschdal
Sorry, I had to restart the server. Too much traffic! It is back now.

~~~
JepZ
ERR_CONNECTION_REFUSED

~~~
JepZ
[https://play.freeciv.org/webclient/?action=new&renderer=webg...](https://play.freeciv.org/webclient/?action=new&renderer=webgl)

------
yAnonymous
>ReCAPTCHA couldn't find user-provided function: onloadCallback

The captcha is solved, but the page doesn't recognize it. Is signing up really
necessary for such a game?

~~~
roschdal
No, you don't have to sign up. Accounts is just for persistent savegames.

