Source
julesries•

Hella chill.

41
rincewind123•

Great! The style of the lion reminds me very much of an old game called Little Big Adventure (Relentless: Twinsen's adventure in the US)

26
wkoorts•

*Twinsen's Odyssey

1
rincewind123•

thats the sequel (LBA2)

2
hitemp•

I'm new to week development like this. It's crazy how JavaScript can do all of this. Did it make the character too?

17
propelol•

It's not only purely done with JavaScript. He also use WebGL (within JavaScript) with Three.js, a library that makes it way easier to work with WebGL.

32
fuck_with_me•

Well, ultimately it is entirely done with JavaScript, it just makes use of various libraries and other shite.

11
propelol•

Not really. WebGL has it's own syntax and is pretty much OpenGL ES. The code you write runs on the GPU.

4
brianpeiris•

WebGL is an API, it does not "have its own syntax", unless you're talking about GLSL, which is not in use here.

6
Chronic8888•

If you want to get technical... technically nothing is done with JavaScript... It's all just machine code (CPU & GPU) executing on hardware, or rather, there is no code at all, and its mostly something to do with atoms and electrons.

But lets just be reasonable and say: Its pretty crazy that everything is written in JavaScript.

0
[deleted]•

[deleted]

1
NoobPwnr•

Where does one learn this kind of thing?

With 'one' being a beginner dabbling in Codecademy.

1
ZyklusDieWelt•

Haha, very cute :)

But I'm not sure how I feel about WebGL things ending up on r/webdev. Yes, it's technically "web development", but the toolset is so much closer to native desktop/mobile app development than anything else on this sub. Thoughts? There is r/webgl

12†
cbleslie•

Still JavaScript. Still loads in a DOM.

26
ZyklusDieWelt•

So would any modern game if you ported it to WebGL.

  • Is it "web development" if I port a C++ game to JS/WebGL?
  • Is it "web development" if i write an OpenGL game in JS that runs outside of a browser?
  • What if I have a VM running in a browser? Is my GBA game now "web development" because it's all "JS and DOM"?
  • What if I have a JS VLC client? Suddenly anything is "web development", right?

I'm saying that "running in a browser" is a pretty crappy standard for calling something web development, especially since browsers are evolving so fast. My own definition is HTML+CSS+JS, at least for now.

And I strongly disagree that it loads in a DOM (okay, not literally, but in a use-case sense) -- Putting everything in a single Canvas object is so far removed from what anything else is when you're talking about DOM.

14
cbleslie•

If it loads in a browser, even if it's transpiled, it's web development.

18
ZyklusDieWelt•

um... no

  • I take the exact same code
  • If it's running in environment A it's web development
  • If it's running in environment B it's not

that's nonsense. This is about the word "development", which is about process. If the process is exactly the same, then it's exactly the same! Application of the developed code does not have any effect on the development itself.

-2†
brianpeiris•

I agree with most of what you say but, now that WebGL is readily available in browsers, I would consider it part of web development. It's just another tool in the belt. Especially true with this example, which is mostly hand-written JavaScript.

9
ZyklusDieWelt•

I think I would call it "development for the web", in a similar category to flash, or any of the older techs like java applets.

My argument is that I think of web development as developing a functional website, using whatever tools. Things like flash, WebGL, etc are separate entities that happen to run in a browser. I wouldn't call web games, youtube videos, etc etc "web development" even though they're all consumed in a browser.

I do agree that this particular example is a bit closer to the border, and if you're running some WebGL animation integrated into a site, it's a bit different. But if you look at most of the examples on r/webgl, I don't think they apply as "web dev", you?

-2
[deleted]•

There's always a grey area. Here's how I see it:

  • Is it "web development" if I port a C++ game to JS/WebGL?

Maybe. If porting it took work rather than just using emscripten, then I'd say it is.

  • Is it "web development" if i write an OpenGL game in JS that runs outside of a browser?

Yes.

  • What if I have a VM running in a browser? Is my GBA game now "web development" because it's all "JS and DOM"?

If the focus is on the VM (like showing off what it can do) then yes. I certainly agree that something like http://bellard.org/jslinux/ belongs in this sub and is strongly about web dev.

  • What if I have a JS VLC client?

That sounds pretty cool, yes.

Suddenly anything is "web development", right?

This is like complaining that a CLI app written in PHP doesn't belong in r/php if it deals with external libraries written in C and because it doesn't need a web server (since 99.9% of PHP is run by a web server).

My own definition is HTML+CSS+JS, at least for now.

So just HTML+JS is not web dev because it doesn't have CSS?

Putting everything in a single Canvas object is so far removed from what anything else is when you're talking about DOM.

The Canvas and WebGL are part of the web. I mean... you know, WebGL kinda gives it away.

I understand your frustration and it bothers me, too, that toys like this make it to the front page of r/webdev and I agree that, without strict moderation, all subreddits' content dilutes as the number of subscribers grows, but I also believe that those who claim poor quality submissions are worthy of attention make a good point.

Also, r/webdev is for general stuff related to web (not necessarily on the web or even online) and if you want stricter content rules you can check out r/css, r/javascript, r/html.

3
propelol•

Since it's in a browser you get all the backend web-stuff with it. WebGL is still pretty new, but I expect it to be more popular now that iOS and modern browsers support it by default.

1
gerbs•

JS can run outside of a browser. See NodeJS. Vis a vis, JS can not be web development.

1
darthnuri•

The same argument could be made for Google Hangouts / Google Sheets vs Excel Skype ....

1
tarantulus•

Will it run on the web? are we looking at it via the internet?

Yes, it's web dev. Our medium moves pretty fast, If you don't stop and look around for a while, you could miss it.

1
ZyklusDieWelt•

So youtube videos are webdev?

1
anonomis2•

let the upvotes decide?

0
offminded•

I am not sure why you are being downvoted. That is a valid point.

5
Chronic8888•

WebGL ... /r/webdev

Seems relevant to me.

r/webgl is very niche and mostly for people who are already involved with WebGL. I think its great when WebGL stuff shows up here because it is inspiring, educational, and eye opening as to what is possible on the web.

3
[deleted]•

[deleted]

1
del_rio•

I kinda agree, but I think a lot of the concepts shown here can find valid applications in web development.

1
murraybiscuit•

For anyone else interested, webGL is supported only in the latest versions of IE11. caniuse

Edit: most other browsers have supported it for a while. (Thanks u/ellisgeek)

9
ellisgeek•

You might want to reword that, the only version of Internet Explorer that supports WebGL is 11. However WebGL has been in most other browsers for a few major versions now.

8
my_blue_snog_box•

For anyone else on mobile, it works for me if I hold two fingers on the screen, which is pretty awesome.

6
[deleted]•

[deleted]

1
l33tSpeak•

I had waaaay too much fun with this.

5
6two6rob•

We need a snoop lion version of this.

3
rainbowWar•

doesn't seem to work on my machine - ubuntu with chrome

2
Jonne•

Same, Ubuntu and Chromium. Works in Firefox though. I think it's just an issue with Chrome not enabling Webgl on Linux for whatever reason.

1
Lekoaf•

Debian and Chrome works fine.

2
kmossco•

Webdev or not, that is pretty cool!

2
lottikey•

That is incredible! Sad I had no idea you could do animation like this with JavaScript (only ones I've worked with were transitions or with text so barely counts). How long did it take you to do this, OP? I'll be playing around with WebGL once I finish up my current project.

2
Chronic8888•

He uses Three.js which is an extremely useful abstraction around WebGL. Its a good place to start as you can get some fairly complicated things going quite easily. Once you've had some fun with it, dig into the WebGL API (which goes way lower level) and try to understand whats going on with Three.

3
lottikey•

Three.js which is an extremely useful abstraction around WebGL

Sorry, can you explain what this means? Three.js is a framework while WebGL is a library, is that it? Thanks! I'll be looking into both very soon.

1
Chronic8888•

I don't know if its too helpful to make a definition between a framework and a library here, but if I was going to over simplify I would say, Three.js is a library that simplifies the use of the WebGL api, which is built into JavaScript in the browser.

Basically, WebGL is a low level JavaScript API to OpenGL, which is written in C/C++ and used for graphics programming in general (not just the web). It is low level because it allows you to directly manipulate single pixels and other basic graphical elements, and run raw calculations on the GPU.

If you just want to draw a sphere with a light shining on it and have the viewpoint/camera rotate around it, you could do it all from scratch with the basics (raw WebGL) or you could use Three.js which does all the hard work for you, and lets you think in terms of shapes and positions instead of numbers and pixels and shaders... That's what I mean by abstraction.

Everything that happens on a computer happens in the CPU or GPU executed by machine code/binary. All the languages and frameworks and libraries we use are abstractions built on top of this that make it easy for us to actually do things.

You know how to make a red box show up in the browser...

 <div style="background:red;width:10px;height:10px;"></div>

But there is a whole lot more going on in the background.

2
Designer023•

Nice :D

1
k1down•

Well that is definitely the coolest thing I am going to see today. Fuckit, I am going outside.

1
themaybeguy•

Wow, so I have no idea what I'm doing.

1
WakeskaterX•

That's adorable. It's pretty amazing what can be done on the web these days.

1
jextr•

Very cool.

1
omgflyingbanana•

Oh my god this is amazing.

1
spergery•

Holy shit RES plays codepens like videos. That confused me at first.

1
sclarke27•

freakin adorable!

1
[deleted]•

[deleted]

-5