WebAppers

/ best free open source web resources /

Shopify

How to Write a 3D Soft Engine from Scratch – Part II

Posted · Category: Information

This article was written by the team at Internet Explorer. It has been authorized to be published on WebAppers.

Now that we have built the core of our 3D engine thanks to the previous tutorial Tutorial series- learning how to write a 3D soft engine from scratch in C#, TypeScript or JavaScript, we can work on enhancing the rendering. The next step is then to connect the dots to draw some lines in order to render what you probably know as a “wireframe” rendering.

1 – Writing the core logic for camera, mesh & device object
2 – Drawing lines and triangles to obtain a wireframe rendering (this article)
3 – Loading meshes exported from Blender in a JSON format
4 – Filling the triangle with rasterization and using a Z-Buffer
4b – Bonus: using tips & parallelism to boost the performance
5 – Handling light with Flat Shading & Gouraud Shading
6 – Applying textures, back-face culling and WebGL

In this tutorial, you will learn how to draw lines, what a face is and how cool is the Bresenham algorithm to draw some triangles. Read the rest of this entry »

A List of Suggestions which CSS Measurements to Use

Posted · Category: Information

Amidst the diversity of CSS measurement systems it can be difficult for web developers to understand which units to use where, and when, on their pages. The instinct is to use just one system for everything, but that decision can severely limit the execution of your designs. The article: Which CSS Measurements To Use When, is a list of suggestions, not absolute rules.

css-measurements

Source: http://demosthenes.info/blog/775/Which-CSS-Measurements…

How to Write a 3D Soft Engine from Scratch – Part I

Posted · Category: Information

This article was written by the team at Internet Explorer. It has been authorized to be published on WebAppers.

I’d to like to share with you how I’ve learned to build what’s known as a “3D soft engine” through a series of tutorials. “Software engine” means that we will use only the CPU to build a 3D engine in an old school way (remember Doom on your 80386 ?). I’ll share with you the C#, TypeScript and JavaScript versions of the code. In this list, you should then find your favorite language or at least something near your favorite one. The idea is to help you transposing the following samples & concepts on your favorite platform. You’ll find the Visual Studio 2012 C#/TS/JS solutions to download at the end also.

So why building a 3D soft engine? Well, it’s simply because it really helps understanding how modern 3D works with our GPUs. Indeed, I’m currently learning the basics of 3D thanks to internal workshops delivered within Microsoft by the awesome David Catuhe. He’s been mastering 3D for many years now and matrices operations is hard-coded in his brain. When I was young, I was dreaming to be able to write such engines but I had the feeling it was too complex for me. Finally, you’ll see that this is not – that – complex. You simply need someone that will help you understanding the underlying principles in a simple way.

Through this series, you will learn how to project some 3D coordinates (X, Y, Z) associated to a point (a vertex) on a 2D screen, how to draw lines between each point, how to fill some triangles, to handle lights, materials and so on. This first tutorial will simply show you how to display 8 points associated to a cube and how to move them in a virtual 3D world.

Read the rest of this entry »

New Creative & Inspiring Business Card Designs

Posted · Category: Information

No matter which business you are in, business card will play a important role especially when having business communications with potential clients. Everyone is trying innovative ways of attracting and retaining the attention of the customers.

There are so many business men puzzle their brains to work out unique business cards. Design Inspiration has shared an article: 30 Creative and Inspiring Business Cards. If you are looking for inspirations for your next business card design, it will be helpful.

creative-business-cards

Source: http://thedesigninspiration.com/articles/30-creative-and-…

Demystifying Social APIs: OAuth2 & Simple XHR 2

Posted · Category: Information

This article will give you insights into the inner workings of the proprietary JavaScript libraries that many of us include in our Web projects. Social sharing buttons and federated authentication, which are found in the likes of the Live Connect JavaScript API and Facebook JavaScript SDK, are just two examples you may have come across.

In this article, you’ll learn about the OAuth 2.0 approach to user authentication, using XMLHttpRequest 2 for cross-origin resource sharing (CORS) and also REST. At the end, I’ll demonstrate a working app that allows users to connect to and manipulate their SkyDrive photos in the browser.

Getting Started

About two years ago, I was asked to add Windows Live and Facebook Connect buttons to a Web site.

Adding these buttons to a Web page required two libraries, one from each of the providers, plus a little JavaScript to wire them up. Both libraries had some magic that made them work, although I doubted that all of the 200 KB of JavaScript I wrote was being used. Before I was asked to implement a third service, I opened up Fiddler and started to inspect what was going over the wire. After a little poking around, I found my way to the docs, and before I knew it I had the premise for an insightful article. So, get a cup of tea and a biscuit and enjoy the read.

Read the rest of this entry »

A Pretty Cool Medium Style Page Transition

Posted · Category: Information, License Free

Codrops has shared an article: Medium-Style Page Transition, which teaches how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out.

page-transition

Requirements: -
Demo: http://tympanus.net/Tutorials/MediumStylePageTransition/
License: License Free

Build HTML5 WebGL Games with Babylon.GameFX

Posted · Category: Information

We’ve recently released a simple & powerful WebGL 3D engine named Babylon.JS: a complete JavaScript framework for building 3D games with HTML 5 and WebGL While he was writing his engine, we’ve built a small team made of Pierre Lagarde, Sébastien Pertus, Michel Rousseau and I to imagine a framework on top of Babylon.JS to help developers building games in a very simple way. This framework is named Babylon.GameFX and mainly targets people that are not very comfortable with some 3d gaming concepts and don’t consider themselves as 3d gurus. But it could be useful also for more advanced developers as we’ve tried to implement some boring tasks for you also. By the way, if you’re a 3d beginner, you should have a look to this series: Tutorial series: learning how to write a 3D soft engine from scratch in C#, TypeScript or JavaScript

Pierre and I have just finished a v0.1 of the client part. You can download it from Github: BabylonJS.GameFX & you can find some simple samples on our website: http://gamefx.babylonjs.com/

Sébastien has almost finished a back-end set of APIs to help you handling a leaderboard in a near future. We’ll then talk only about the client part here.

By the way, please note that we’re mainly working on this framework on our part time and that v0.1 means that this is far from being completed. So, please be kind with us if everything is not perfect yet :) But we’d like to start sharing with you what we’ve done so far, listen to your feedbacks and continue/enhance it in the next weeks. We will then iterate with your feedbacks in the next releases.

In this first tutorial, we’re going to see how to use the main features we’ve shipped. By following this tutorial, you’ll be able to create the following result in less than 30 lines of code:

Read the rest of this entry »

7 Days Free Stock Images & Graphics on GraphicStock

Posted · Category: Information

GraphicStock is a subscription-based website that provides members with unlimited downloads of stock graphics, stock images, icons, buttons, backgrounds, textures and more. Instead of charging per download, they allow our members to download as much as they want all for less than the price of just one graphic at many competing sites. They aim to provide high quality content that household brand names are proud to use, but at a price point that even the casual graphic design enthusiast can afford.

The cool folks over at GraphicStock have been working tirelessly to add all new graphics and images to cater to whatever your needs might be as a design professional. They have just announced 100,000 images now on GraphicStock.

In celebration of their new content they’re offering 7 days of FREE access to download anything you want from over 100,000 images, graphics, icons, vectors, textures, backgrounds and more. You can come claim your 7 days of FREE access to all of the new designs on GraphicStock today.

graphic-stock

Make Sprites Animations for all Devices & Browsers

Posted · Category: Information

While meeting some game studios, I often have the same question coming over and over: if I’m writing/porting my game in HTML5, will it run well on the various targeted devices? Will it be playable or will the gameplay suffer too much? To answer to that question, I often use my own experience based on what I know and what worked well during my own tests. But I also had the feeling it wasn’t enough to provide some good advices.

In the meantime, there were some obvious facts. For instance, we all know that mobile devices can’t animate as many sprites as desktop PC and preserve 60 fps. We know also that combining SVG and Canvas is a good idea to write games that scale across devices but this could also impact the performance. Moreover, even if GPU and hardware acceleration is available on mobile, their hardware architectures differ a lot from the PC and this impacts also a lot the performances. There is dozen of scenarios like that to address and to be aware of while writing HTML5 games for mobiles. But in which proportions?

With my friend David Catuhe, we then decided to measure these various scenarios and build a benchmark framework to have a better idea on what to pay attention for. It’s named the HTML5 Potatoes Gaming Bench framework. The concept is then to help you benchmarking your targeted platforms and to obtain indicators for your future games: number of simultaneous sprites supported, SVG & Canvas composition performance, usage of videos, etc. It’s a tool we’d like to provide you to help you benchmarking your own scenarios for your games. Read the rest of this entry »

Quick Tips and Examples of Running Successful eShop

Posted · Category: Information

Running an online store is far not as easy as it seems at first sight. However, if you are a smart merchant, you can’t ignore the fact that we have already entered the era of e-Commerce, so ‘the game is worth the candle’.

Did you know that by 2016, more than $320 billion will be spent on online shopping according to Forrester Research? Just think about it! This is impressive.

Of course you would like to put your finger into this hot, delicious pie. The problem is that now online commerce becomes something ordinary. That is, online stores pop up like mushrooms making tough competition to each other. Even the most quality expensive design can’t guarantee high conversion rates. Moreover, even if you run a successful street store, it doesn’t mean that the same thing will happen on the net. Cyberspace requires certain changes in your business strategy, psychology, and deeper understanding of the difference between the two parallel worlds.

To make your online store stay afloat you need to keep in mind hundreds of details like replenishing products stock, driving more traffic to your store, inventing new promo campaigns, responding to unsatisfied customers, training your employees and so on.

So, the goal of our today’s blog post is to lay down some concrete tips on global e-business strategies. In other words, to share some secrets on how to make people living worldwide buy from you and bolster them with good examples of e-commerce stores that managed to become successful despite the difficulties they met on their way to popularity.

Follow these life hacks and they will help you deliver superior customer experience, boost business efficiency, expand product market and raise your income. Read the rest of this entry »

Page 6 of 33«2345678910»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons