top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

    Get Free Article Updates

Facebook Login
Site Registration
Print Preview

About PlayCanvas.Js

0 votes
71 views

What is PlayCanvas.Js?

PlayCanvas is an enterprise grade open source JavaScript based WebGL game Engine that has got tons of developer tools to help you build 3D games within no time. PlayCanvas.js is built by a professional community and was not an open source initially but now you can fork it on GitHub and start using it for your next 3D game project, free of cost.

It also comes with cloud based editor that runs in your browser,  so getting started with PlayCanvas is as easy as navigating to the Editor URL. Editor supports collaboration among teams which essentially means many people can work on the same project in parallel.

PlayCanvas.js is backed by the giants like Mozilla, Activision and ARM.

PlayCanvas is an open-source game engine. It uses HTML5 and WebGL to run games and other interactive 3D content in all modern browsers without the need for a plugin.

Features:

Graphics

  • WebGL-based 3D renderer
  • Physically based rendering (PBR)
  • Directional, point and spot lights (all of which can cast shadows)
  • Runtime Lightmap baking
  • Static and skinned meshes
  • GPU Particle engine with editor
  • PostFX library: bloom, edge detect, FXAA, vignette, etc
  • Seamless default material support from Maya, 3DS Max, Blender, etc.
  • Full model export pipeline from Maya, 3DS Max, Blender, etc via Assets User Manual

Collision & Physics

  • Full integration with 3D rigid-body physics engine ammo.js

Audio

  • 3D Positional audio via Web Audio API
  • Resource Loading
  • Simple and powerful resource loading
  • Streaming of individual assets
  • Asset Variants - loads compressed textures (DXT, PVR, ETC1) based on platform support

Video for PlayCanvas 

posted Mar 2 by Manish Tiwari

  Promote This Article
Facebook Share Button Twitter Share Button Google+ Share Button LinkedIn Share Button Multiple Social Share Button


Related Articles

What is Tern.Js?

Tern is a stand-alone code-analysis engine for JavaScript. It is intended to be used with a code editor plugin to enhance the editor's support for intelligent JavaScript editing. 

Features:

  • Autocompletion on variables and properties
  • Function argument hints
  • Querying the type of an expression
  • Finding the definition of something
  • Automatic refactoring
  • Tern is open-source (MIT license), written in JavaScript, and capable of running both on node.js and in the browser.

 Tern Supported Editors

  • Emacs
  • Vim
  • Sublime Text
  • Brackets
  • Light Table
  • Eclipse 
  • TextMate
  • SourceLair 
  • Chocolat 

For more read here - http://ternjs.net/doc/manual.html 

READ MORE

What is Crafty.Js?

Crafty, previously known as CraftyJS, is a small, simple, and lightweight game engine that can greatly help you build prototypal or fully-featured 2D HTML5 games. Crafty is also open-source and completely free. Its code is hosted openly on GitHub.com and is distributed under the MIT or GPL license.

Crafty is a cohesive collection of custom-built Javascript libraries that provide a framework for building browser-based games using standard web technology. In other words, it’s a Javascript-based HTML5 game engine. It’s designed to make it very easy to make simple games with 2D graphics. 

A Crafty.js game is build up of entities -- the player character, enemies, and obstacles are all represented this way.

Lets start by creating a simple colored square:

Crafty.e('2D, DOM, Color').attr({x: 0, y: 0, w: 100, h: 100}).color('#F00');

For More Visit Here - http://craftyjs.com/getting-started/

Video for Crafty.Js

https://www.youtube.com/watch?v=cA5BAIIWapE

READ MORE

What is Ractive.Js?

Ractive.js is a template-driven UI library, but unlike other tools that generate inert HTML, it transforms your templates into blueprints for apps that are interactive by default.
It's a JavaScript library for building reactive user interfaces in a way that doesn't force you into a particular framework's way of thinking. It takes a radically different approach to DOM manipulation - one that saves both you and the browser unnecessary work.

Features

  • Data-binding, with a beautiful declarative syntax.
  • Event handling that doesn't make you tear your hair out.
  • Flexible and performant animations and transitions.
  • And much more!

Ractive was originally created at theguardian.com to produce news applications. A typical news app is heavily interactive, combines HTML and SVG, and is developed under extreme deadline pressure. It has to work reliably across browsers, and perform well even on mobile devices.

Ractive was initially created to tackle the data binding problem in a more elegant way. We on the Guardian interactive team are acutely aware of the challenges of creating app-like experiences on the web;

Key features like two-way binding, animations, and SVG support are provided out-of-the-box, and custom functionality can be easily added via plugins.

Video for Ractive.Js 

https://www.youtube.com/watch?v=wKzcWbxVtKA

READ MORE

What is Sinon.Js?

“Standalone test spies, stubs and mocks for JavaScript. No dependencies, works with any unit testing framework.” Sinon.js is a really helpful library when you want to unit test your code. It supports spies, stubs, and mocks.

Sinon provides spies, stubs, and mocks. They’re all useful as fakes in tests. They come with essential differences for what they’re helpful in doing and how they work.

Test stubs are functions (spies) with pre-programmed behavior.

They support the full test spy API in addition to methods which can be used to alter the stub’s behavior.

As spies, stubs can be either anonymous or wrap existing functions. When wrapping an existing function with a stub, the original function is not called.

Example :

var stub = sinon.stub();

NPM Installation

npm install sinon

Video for Sinon.JS
https://www.youtube.com/watch?v=SvudHPTEsIk

READ MORE

What is WebPack.Js?

Webpack is a module bundler for modern JavaScript applications. It is incredibly configurable, but to get started you only need to understand Four Core Concepts: entry, output, loaders, and plugins.

Webpack constructs two separate dependency graphs and emits two bundle files, one called app.js containing only the application code and another called vendor.js with all the vendor dependencies.

Webpack is fed via a configuration object. It is passed in one of two ways depending on how you are using webpack: through the terminal or via Node.js. 

Webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.

It allows you to split your codebase into multiple chunks. Chunks are loaded asynchronously at runtime. This reduces the initial loading time

NPM Module for install

npm install webpack -g

Video for Webpack.Js

https://www.youtube.com/watch?v=TaWKUpahFZM

READ MORE

What is Babel?

Babel is a JavaScript transpiler.Essentially Babel takes the ES2015 JavaScript code and compiles it into ES5 code. This opens up all the ECMAScript 6 features to us when we code our projects.

The compiler can be broken down into 3 parts:

  1. The parser: babylon (moved to a separate repo and versioned independently)
  2. The transformer[s]: All the plugins/presets.These all use babel-traverse to traverse through the AST
  3. The generator: babel-generator
Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.
 

Node NPM InstalInstallation:

npm install --save-dev babel-preset-env​

Video About Babel?
https://www.youtube.com/watch?v=-Fxi62nYitY

READ MORE

What is Plotly.Js

Built on top of d3.js and stack.gl, plotly.js is a high-level, declarative charting library. plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. 

plotly.js charts are shipped with zoom, pan, hover, and click interactions. Click-and-drag to zoom into a region, double-click to autoscale, click on legend items to toggle traces.

NPM Command :

npm install plotly.js

Modele Example : 

// in custom-plotly.js
var Plotly = require('plotly.js/lib/core');

// Load in the trace types for pie, and choropleth
Plotly.register([
    require('plotly.js/lib/pie'),
    require('plotly.js/lib/choropleth')
]);

module.exports = Plotly;

Video for Plotly.js
https://www.youtube.com/watch?v=ZRiAWz-sVlM

READ MORE
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#470/147, 3rd Floor, 5th Main,
HSR Layout Sector 7,
Bangalore - 560102,
Karnataka INDIA.
QUERY HOME
...