Journal #8375
Posted 10 years ago2014-05-14 12:07:34 UTC
I posted a link to my (very basic) JavaScript RMF loader/renderer in the Shoutbox yesterday and a few people said they were interested in learning more about JavaScript and 3D stuff, so here's my official guide to learning JavaScript and/or 3D stuff! Hopefully someone finds it useful or interesting 
Even if you're not interested in learning programming, I would recommend clicking on the links to the D3 and three.js websites - the examples for those libraries are really damn cool!
JavaScript:
What you need to get started:
Learn some basic HTML and CSS: This video series from Google is said to be a good introduction to HTML and CSS, as well as some more stuff about JavaScript.
Learn more about HTML, CSS, and JavaScript APIs: MozDev is one of the best resources for doing front-end web programming. It covers every API and element that Firefox supports (or might be supporting in the near future) - which is basically everything you'll ever need to know.
Look at cool JS libraries!
What you need to get started:
Learn GLSL: The above tutorial will get you started with GLSL shaders, but you can use websites like http://glsl.heroku.com/ and https://www.shadertoy.com/ to work with GLSL without needing all the extra wiring up that OGL requires.
Skip all of that and learn three.js instead: Skipping the OpenGL stuff will certainly put you at a disadvantage, but three.js allows you to get started with 3D programming without having to deal with the lower-level stuff. If you want a quick 3D fix without having to learn loads of really difficult stuff, you could do this, and learn the complicated stuff later!
OpenGL bindings that I know of:
I put all my code on GitHub, you can check some of it out here:
Sledge: https://github.com/LogicAndTrick/sledge
The JS RMF loader from above: https://github.com/LogicAndTrick/sledge-js
Double bonus: Help me out by contributing new features to Sledge >____>
Even if you're not interested in learning programming, I would recommend clicking on the links to the D3 and three.js websites - the examples for those libraries are really damn cool!
JavaScript:
What you need to get started:
- A computer
- ...(with a browser)
- .......(that's not IE, use Firefox/Chrome/ChrOpera)
Learn some basic HTML and CSS: This video series from Google is said to be a good introduction to HTML and CSS, as well as some more stuff about JavaScript.
Learn more about HTML, CSS, and JavaScript APIs: MozDev is one of the best resources for doing front-end web programming. It covers every API and element that Firefox supports (or might be supporting in the near future) - which is basically everything you'll ever need to know.
Look at cool JS libraries!
- jQuery - easy HTML/CSS manipulation, AJAX, HTML events
- Backbone - write a single-page application like all the other cool people! I'm writing one at work at the moment. SoundCloud is an example of a single-page website made using Backbone.
- D3 - a super-cool library for graphing and displaying data in a visual way. Supports topography/maps, graphs, animations, interactivity, and other cool stuff. The examples are great!
- three.js - Really easy OpenGL (see below) for the web! I used this for my RMF demo. There's tons of examples, so it's really easy to get started.
What you need to get started:
- A computer
- A graphics card that supports OpenGL 3+
- Programming knowledge. You can't just jump into 3D programming, you need to know the basics first. JavaScript works, but so does C, C++, C#, VB, Java, Python, and many other languages with OpenGL bindings. JavaScript is one of the easier options due to the three.js library (see above).
Learn GLSL: The above tutorial will get you started with GLSL shaders, but you can use websites like http://glsl.heroku.com/ and https://www.shadertoy.com/ to work with GLSL without needing all the extra wiring up that OGL requires.
Skip all of that and learn three.js instead: Skipping the OpenGL stuff will certainly put you at a disadvantage, but three.js allows you to get started with 3D programming without having to deal with the lower-level stuff. If you want a quick 3D fix without having to learn loads of really difficult stuff, you could do this, and learn the complicated stuff later!
OpenGL bindings that I know of:
- .NET: OpenTK
- C/C++: GLEW
- Java: JOGL
- Python: PyOpenGL and PyGame
- Others: Just google "opengl <your_programming_language_here>"!
I put all my code on GitHub, you can check some of it out here:
Sledge: https://github.com/LogicAndTrick/sledge
The JS RMF loader from above: https://github.com/LogicAndTrick/sledge-js
Double bonus: Help me out by contributing new features to Sledge >____>
9 Comments
You must log in to post a comment. You can login or register a new account.
I have C++, JS and C# books(never opened!) at home, and this might be just the kick in the pants i need to dust them off
Tha JS loader is awesome! Only weird thing is i can't seem to turn around a full 360 degrees. Cool map too BTW!
But what if you want to work with binary files such as wad, pak, spr, mdl, bsp and whatnot? How does one know how to read and write such files? Where do you even begin?
If you don't want to poke around with binary formats yourself, HLLib supports WAD, PAK, and BSP, as well as VPK. It has .NET bindings that you can use, though they can be a bit difficult to use. I recently moved away from HLLib because it would have caused me headaches if I ever ported to Linux. You can also use the Sledge binaries and use the loaders directly out of that.
Hopefully that helps!
Yeah, I've always wanted to make a wad viewer, just for fun and practice purposes, so I tried using the HLLib libraries by referencing these in my project. It did'nt work, Visual Studio complained that these dll's are not .NET assemblies and therefor cannot be referenced. It's bacause HLLib is written in C, not .NET, right? I believe you can reference C libs by referencing them in pure code. Too much of a hassle to me.
So with your loaders (WadPackage.cs) I should be able to come up with some sort of wad viewer, right? I prefer to use your loaders over HLLib...
You should be able to use my loaders to do what you need, and from the looks of it, the WAD loader is pretty standalone so you could probably use it without having to make a lot of modifications. The license is LGPL, which means you need to open source any changes you make to the code if you publish an app that uses it (but not your entire app if you don't want to).
My loader currently doesn't support loading mipmaps (I've been meaning to add support for it), but it will load the high-resolution texture data without any problems. If you want to do some additional processing related to transparency, take a look at this method (however it is currently slightly wrong and will change before the next version of Sledge comes out).