Check out Half-Life Re-imagined competition results!
Check out Skewing textures in Hammer, our newest tutorial!
Welcome, Dr.Cola, our newest member!

logo

Site Stuff

Reference

Maps

Community

ShoutBOX

Poll

Feeling Blue

What's your favourite shade of blue?

Azure

13

Cobalt

30

Turquoise

8

Cyan

10

Royal

6

Teal

3

Onliners

13 secs

The Mad Carrot

41 secs

Solokiller

2 mins

Dallas

8 mins

Windawz

11 mins

JeffMOD

13 mins

foxtrop

14 mins

Penguinboy

Affiliates

A gaming and technology blog by TWHL admins Penguinboy and Ant. A music blog by TWHL users Ant and Hugh.

View Journal

avatar Penguinboy 14th May 2014, 13:07 PM

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:
- A computer
- ...(with a browser)
- .......(that's not IE, use Firefox/Chrome/ChrOpera)

Learn the core language: Eloquent JavaScript is a slightly old, but still relevant introduction to JavaScript, and programming in general. No previous programming knowledge required!

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.

3D stuff (I only know OpenGL, sorry DirectX fans!):

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 how to use (modern-style) OpenGL: Learning Modern 3D Graphics Programming is one of the best modern GL references out there. You may have heard of, or stumble upon, the NeHe tutorials website - be careful! These tutorials (especially the intro ones) are mostly for OpenGL 1.0, which is extremely slow and no longer part of core OpenGL! Learn the new pipeline that is in OpenGL 2+, you will save a lot of time.

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>"!

Bonus: Put all your work on GitHub (it's free!) so other people can learn from your work!

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 >____>

Comments

avatar UrbaNebula says: 14th May 2014, 16:46 PM
Doesn't work on Android :P
avatar Striker says: 14th May 2014, 16:58 PM
You need to implement a Favorite feature on TWHL so I can favorite this journal.
avatar DiscoStu says: 14th May 2014, 19:09 PM
^ that.
avatar Captain Terror says: 14th May 2014, 19:58 PM
Thank You for this PB! =P

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! :P
avatar The Mad Carrot says: 15th May 2014, 13:32 PM
Cool stuff.

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?
avatar Penguinboy says: 15th May 2014, 13:52 PM
I recently wrote loaders for PAK, VPK, WAD, and VTF (not published yet), and there's also one for MDL (only partially supports Source models). There are references on the internet for all these formats (VDC is good for Source stuff, Google trawling for Goldsource stuff), and in some cases you can look at the header files from the GS/Source SDK (for example, studiomdl includes the header files for model objects in both GS and Source). For RMF, I saved a bunch of minor changes in Hammer into different RMFs and poked around in a hex editor until I found the format. I published the format specification as well, which I used in the JavaScript loader using a nifty JS library called jBinary. My hex editor of choice is 010 Editor because it has an amazing binary templating feature which is incredibly useful for figuring out binary formats. VMF is an incredibly simple format (and not binary!), so prefer that if you can.

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!
avatar Captain Terror says: 16th May 2014, 02:27 AM
You should add this to the tutorial section PB ;)
avatar The Mad Carrot says: 20th May 2014, 13:10 PM
Thnx, pengy. :)

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...
avatar Penguinboy says: 20th May 2014, 14:14 PM
Yeah, to use HLLib from .NET you have to use P/Invoke, which can be quite annoying to deal with if you aren't familiar with lower-level C structures. HLLib includes a .NET wrapper that already does the P/Invoke bindings for you, but even then I found it annoying to use since it is a very procedural, C-oriented library. It maintains its own internal state which I found quite difficult to work with, and from my experience, it isn't thread safe, and you can't open two different files at the same time.

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).
You must be logged in to comment.