Files
awesome-awesomeness/html/playcanvas.html
2024-04-23 15:17:38 +02:00

423 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<h1 id="awesome-playcanvas-awesome">Awesome PlayCanvas <a
href="https://awesome.re"><img src="https://awesome.re/badge.svg"
alt="Awesome" /></a></h1>
<blockquote>
<p><img src="playcanvas-logo.png" align="right" width="100"></p>
<p>PlayCanvas is an open source platform for building interactive web
content. Its written in JavaScript, HTML5, CSS3 and WebGL.</p>
<p>This list is a curated collection of awesome resources, tools,
tutorials and projects using the PlayCanvas engine to help developers
make <em>awesome</em> games and visualizations.</p>
<p>Contributions <em>very welcome</em> but first see <a
href="#contributing">Contributing</a>.</p>
</blockquote>
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#playcanvas">PlayCanvas</a></li>
<li><a href="#community">Community</a></li>
<li><a href="#tutorials">Tutorials</a></li>
<li><a href="#extensions-and-utilities">Extensions and
Utilities</a></li>
<li><a href="#technical-demos">Technical Demos</a></li>
<li><a href="#interactive-experiences">Interactive Experiences</a></li>
<li><a href="#browser-games">Browser Games</a></li>
<li><a href="#io-games">IO Games</a></li>
<li><a href="#messenger-games">Messenger Games</a></li>
<li><a href="#automotive">Automotive</a></li>
<li><a href="#product-configurators">Product Configurators</a></li>
<li><a href="#arvrxr">AR/VR/XR</a></li>
<li><a href="#blockchaincryptonft">Blockchain/Crypto/NFT</a></li>
</ul>
<h2 id="playcanvas">PlayCanvas</h2>
<ul>
<li><a href="https://playcanvas.com/">Editor</a> - Browser-based,
real-time collaborative WebGL Editor.</li>
<li><a href="https://github.com/playcanvas/engine">Engine</a> - Full
source to the PlayCanvas run-time licensed under MIT.</li>
<li><a href="https://playcanvas.com/viewer">glTF Viewer</a> - glTF 2.0
compliant model viewer.</li>
<li><a href="https://www.npmjs.com/package/playcanvas">NPM Package</a> -
Node.js packages of the PlayCanvas engine run-time.</li>
<li><a href="http://playcanvas.github.io/pcui/">PCUI</a> - Open source
front-end framework used by the PlayCanvas toolset.</li>
<li><a href="https://api.playcanvas.com/">Reference</a> - API reference
manual for the engine run-time.</li>
<li><a href="https://playcanvas.com/supersplat/editor">SuperSplat</a> -
3D Gassuian Splat Editor.</li>
<li><a href="https://playcanvas.com/texture-tool">Texture Tool</a> -
Tool for reprojecting textures.</li>
<li><a href="https://developer.playcanvas.com/user-manual/">User
Manual</a> - PlayCanvas user guide.</li>
</ul>
<h2 id="community">Community</h2>
<ul>
<li><a href="https://forum.playcanvas.com/">Forum</a></li>
<li><a href="https://twitter.com/playcanvas">Twitter</a></li>
<li><a href="https://discord.gg/RSaMRzg">Discord Server</a></li>
<li><a href="https://www.facebook.com/playcanvas/">Facebook</a></li>
<li><a
href="https://www.html5gamedevs.com/tags/playcanvas/">HTML5GameDevs
Forum</a></li>
<li><a href="https://openbase.com/js/playcanvas">Openbase</a></li>
<li><a href="https://www.reddit.com/r/PlayCanvas/">Reddit</a></li>
<li><a
href="https://stackoverflow.com/questions/tagged/playcanvas">Stack
Overflow</a></li>
</ul>
<h2 id="tutorials">Tutorials</h2>
<ul>
<li><a
href="https://3dground.net/en/articles/playcanvas-webgl/1">Vehicle and
Interior Tutorials</a> - Detailed write ups of 2 PlayCanvas
visualization applications.</li>
<li><a
href="https://www.gamefromscratch.com/post/2017/05/25/PlayCanvas-Engine-Revisited.aspx">Create
a Bowling Game</a> - Create a physics-based bowling game.</li>
<li><a
href="https://gamedevelopment.tutsplus.com/tutorials/create-a-space-shooter-with-playcanvas-part-1--cms-28066">Create
a Space Shooter</a> - Recreate Asteroids in this Tutsplus tutorial.</li>
<li><a
href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">MDN
tutorial</a> - Build up a basic demo with PlayCanvas.</li>
<li><a href="https://developer.playcanvas.com/en/tutorials/">Official
Tutorials</a> - Large collection of official PlayCanvas tutorials.</li>
<li><a
href="https://magazine.substance3d.com/high-end-renders-online-bike-configurator-substance/">PlayCanvas
and Substance</a> - Creating high-end artwork for vehicle configurators
with PlayCanvas and Substance.</li>
<li><a
href="https://medium.com/@omar4ur/rescue-the-lunar-lander-a-coderdojo-tutorial-5217d463e26a">Rescue
the Lunar Lander</a> - Tutorial to make a simple physics based
game.</li>
<li><a href="https://solargames.io/mentorship/">Solar Games
Mentorship</a> - Premium PlayCanvas training and mentorship
services.</li>
<li><a
href="https://www.youtube.com/playlist?list=PLy57qL2R3Z6NlBQBEMnjVPT0iz320i4Ko">Video
Tutorials</a> - YouTube playlist for short PlayCanvas tutorials.</li>
</ul>
<h2 id="extensions-and-utilities">Extensions and Utilities</h2>
<ul>
<li><a
href="https://www.8thwall.com/docs/api/playcanvas/getting-started/">8th
Wall</a> - Markerless AR runtime.</li>
<li><a
href="https://github.com/playcanvas/playcanvas-ar">playcanvas-ar</a> -
Marker-based AR solution built on ARTollkit.</li>
<li><a
href="https://github.com/yushimatenjin/playcanvas-node">playcanvas-node</a>
- REST API wrapper for Node.js.</li>
<li><a
href="https://github.com/playcanvas/playcanvas-p2.js">playcanvas-p2.js</a>
- An integration with the p2.js 2D physics engine.</li>
<li><a
href="https://github.com/playcanvas/playcanvas-rest-api-tools">playcanvas-rest-api-tools</a>
- CLI tools built on the PlayCanvas REST API.</li>
<li><a
href="https://github.com/playcanvas/playcanvas-spine">playcanvas-spine</a>
- Spine plugin for PlayCanvas for 2D animations.</li>
<li><a
href="https://github.com/playcanvas/playcanvas-tween">playcanvas-tween</a>
- Officially supported tween animation plugin.</li>
<li><a
href="https://github.com/isobolewski/playcanvas-vue">playcanvas-vue</a>
- A PlayCanvas integration with Vue.js.</li>
<li><a href="https://github.com/tweenjs/tween.js/">tween.js</a> -
Popular JavaScript tweening library that integrates easily with
PlayCanvas.</li>
<li><a href="https://solargames.io/tools/">Solar Tools</a> - A
commercial toolkit for PlayCanvas that includes a GPU instancer, terrain
and effects scripts, multiplayer etc.</li>
<li><a href="https://github.com/playcanvas/sublime-completions">Sublime
Completions</a> - Sublime Text Autocompletion for the PlayCanvas
API.</li>
<li><a
href="https://marketplace.visualstudio.com/items?itemName=playcanvas.playcanvas">VS
Code Extension</a> - VS Code Extension that can be used instead of the
built-in Code Editor.</li>
</ul>
<h2 id="technical-demos">Technical Demos</h2>
<ul>
<li><a href="https://playcanv.as/p/44MRmJRU/">After the Flood</a> -
Collaboration with Mozilla to promote WebGL 2.</li>
<li><a href="https://playcanv.as/p/LpmXGUe6/">Casino</a> - Physically
rendered 3D casino environment.</li>
<li><a href="https://playcanv.as/p/ZV4PW6wr/">Global Illumination</a> -
GI approximation using interpolated lightmaps.</li>
<li><a href="https://playcanv.as/p/MflWvdTW/">Seemore</a> -
Collaboration with ARM to promote mobile WebGL.</li>
<li><a href="https://playcanv.as/p/txPePQvy/">Sponza</a> - Run-time
lightmapped Sponza environment.</li>
<li><a href="https://playcanv.as/p/SA7hVBLt/">Star-Lord</a> - First ever
PBR demo from PlayCanvas.</li>
<li><a href="https://playcanv.as/p/nL1dYbMv">Steampunk Slots</a> -
Physically rendered slots machine.</li>
</ul>
<h2 id="interactive-experiences">Interactive Experiences</h2>
<ul>
<li><a href="https://playcanv.as/p/XPWoTZ4F/">Call of Duty: Gunsmith</a>
- Promotional 3D experience themed on Call of Duty.</li>
<li><a
href="https://gallery.familyforeverychild.org/Childhood-on-The-Move/">Childhood
on the Move</a> - Virtual art exhibition from charity Family for Every
Child.</li>
<li><a href="https://vz777.com/cybercity/index.html">Cyber City</a> -
Promotional site for Visionaries777.</li>
<li><a href="https://vimeo.com/136313614">DOOH Invaders</a> - Worlds
largest Space Invaders clone unveiled at Cannes Lions.</li>
<li><a href="https://playcanv.as/p/A5qC9ftM/?overlay=false">Fatal System
Error</a> - Interactive opera experience created by Dumbworld from the
Royal Opera House.</li>
<li><a href="https://hntsam.com/">How Not To Suck At Money</a> -
Educational game from Invesco about personal finance.</li>
<li><a href="https://gallery.familyforeverychild.org/">Life During
COVID-19</a> - Virtual art exhibition from charity Family for Every
Child.</li>
<li><a href="https://playcanv.as/p/ika9sdKu/?truck=johncena">MMX
Racing</a> - Interactive 3D ad for a popular mobile game.</li>
<li><a href="https://www.party.space/">Party Space</a> - Virtual events
platform.</li>
<li><a href="https://pocketverse.net/">Pocketverse</a> - Procedurally
generated star systems.</li>
<li><a href="https://vimeo.com/152996271">Ride Along 2</a> - Using WebGL
to promote a Hollywood movie release.</li>
<li><a href="https://www.youtube.com/watch?v=onOJBCC8R7A">Rugby World
Cup</a> - Promoting the Rugby World Cup in Londons Piccadilly
Circus.</li>
<li><a href="https://unlock.wildrift.leagueoflegends.com/">Wild Rift</a>
- Solve the puzzle to unlock a League of Legends: Wild Rift
character.</li>
</ul>
<h2 id="browser-games">Browser Games</h2>
<ul>
<li><a
href="https://www.bbc.co.uk/cbbc/games/beyond-bionic-extreme-encounters">Beyond
Bionic: Extreme Encounters</a> - Outdoor adventures in this game from
the BBC.</li>
<li><a href="https://play.famobi.com/bubble-tower-3d">Bubble Tower
3D</a> - Old school bubbleshooter game.</li>
<li><a href="https://play.famobi.com/bus-parking-3d">Bus Parking 3D</a>
- Park the bus in the designated space before the timer runs out.</li>
<li><a href="https://play.famobi.com/cannon-balls-3d">Cannon Balls
3D</a> - Use the cannon to destroy the various structures in this
physics-based game.</li>
<li><a
href="https://portfolio.redox-interactive.com/en/projects/continental-marble-adventure">Continental
Marble Adventure</a> - Marble game for Continentals 150 year
anniversary.</li>
<li><a href="https://play.famobi.com/curve-ball-3d">Curve Ball 3D</a> -
3D pong game.</li>
<li><a href="http://partners.disney.com/hour-of-code">Disneys Hour of
Code - Moana</a> - Learn programming fundamentals with Disneys
Moana.</li>
<li><a href="https://play.famobi.com/euro-penalty-cup-2021">Euro Penalty
Cup 2021</a> - Try to hit the goal and outsmart the goalkeeper.</li>
<li><a href="https://playcanv.as/p/2OlkUaxF/">Flappy Bird</a> - Guide
the bird through as many pipes as possible.</li>
<li><a href="https://playcanv.as/p/Ikq6Uk6A/">Galaxies: Combat</a> -
Carefully select power ups to defeat waves of hostile ships.</li>
<li><a href="https://play.famobi.com/garden-bloom">Garden Bloom</a> -
Garden themed 2D match 3 game.</li>
<li><a href="https://play.famobi.com/garden-match-3d">Garden Match
3D</a> - 3D match 3 game.</li>
<li><a href="https://www.gamee.com/game/geometryrun">Geometry Run</a> -
Stylized endless runner built from geometric shapes.</li>
<li><a href="https://play.famobi.com/hoop-royale">Hoop Royale</a> -
Maneuver the ring around the ball.</li>
<li><a href="https://poki.com/en/g/jungle-friends">Jungle Friends</a> -
Earn coins by helping your animal friends.</li>
<li><a
href="https://www.toggo.de/spiele/jurassic-world/jurassic-world-das-gelaenderennen-6727.htm">Lego
Jurassic World: Off-road Race</a> - Dinosaurs, LEGO and vehicle
stunts.</li>
<li><a href="https://play.famobi.com/mahjong-world">Mahjong World</a> -
3D Mahjong puzzle game.</li>
<li><a href="https://www.crazygames.com/game/mancala-classic">Mancala
Classic</a> - Strategic board game.</li>
<li><a href="https://playmegopoly.com/">Megopoly</a> - Free to play
casual strategy board game where you invest in virtual property.</li>
<li><a href="https://benbean.tech/monopoly-io/">Monopoly</a> - The
classic boardgame recreated in a 3D video game.</li>
<li><a href="https://gamedistribution.com/games/nitro-knights">Nitro
Knights</a> - Futuristic jousting game.</li>
<li><a href="https://play.famobi.com/om-nom-run">Om Nom Run</a> -
Endless runner.</li>
<li><a href="https://playcanv.as/p/3G3RnfUz/">Orbital Survival</a> -
Destroy wave after wave of enemies on a tiny world.</li>
<li><a href="https://play.famobi.com/slice-rush">Slice Rush</a> - Take
the knife and chop your way through the kitchen.</li>
<li><a href="https://play.famobi.com/stack-smash">Stack Smash</a> -
Destroy all platforms to get to the ground and win.</li>
<li><a href="https://www.starstable.com/en/register">Star Stable</a> -
Character registration portal for popular horse game.</li>
<li><a href="https://poki.com/en/g/stickman-climb">Stickman Climb</a> -
Physics based puzzle game.</li>
<li><a href="https://play.famobi.com/tnt-bomb">TNT Bomb</a> - Destroy
buildings and structures with explosive power ups.</li>
<li><a href="https://playcanv.as/p/JtL2iqIH/">SWOOOP</a> - Pick up gems
in a bi-plane above a magical island.</li>
<li><a href="https://gala.games">Town Star</a> - Online farming game
built by the Creative Director of Farmville 2.</li>
<li><a href="http://www.miniclip.com/games/virtual-voodoo/en/">Virtual
Voodoo</a> - Voodoo doll simulator.</li>
</ul>
<h2 id="io-games">IO Games</h2>
<ul>
<li><a href="https://www.bulletbonanza.io/">Bullet Bonanza</a> - Fast
paced, high fidelity, 3D Multiplayer FPS game from Kiloo.</li>
<li><a href="https://www.fieldsoffury.io/">Fields of Fury</a> - Capture
the flag set during WW2.</li>
<li><a href="https://gummyz.fitfuns.com">GUMMYZ</a> - Sword-swinging
multiplayer combat game.</li>
<li><a href="https://playcanv.as/p/YvyiZeqL/">Ink Wars</a> - Paint
faster than your opponents to win the round.</li>
<li><a href="https://miniroyale.io/">Mini Royale: Nations</a> - Battle
Royale first person shooter.</li>
<li><a href="https://robostorm.io/">Robostorm</a> - Frenetic online
multiplayer mech battle game.</li>
<li><a href="https://rollem.io/">Rollem</a> - Guide your hamster to the
end of the obstacle course in the fastest time.</li>
<li><a href="https://simplyup.io">Simply Up</a> - Climb to the top of
the tower in the shortest time.</li>
<li><a href="https://tankroyale.io/">Tank Royale</a> - Cartoony
fast-paced top-down multiplayer shooter.</li>
<li><a href="https://tanx.io">TANX</a> - Online multiplayer tank battle
game.</li>
<li><a href="https://tribals.io/">Tribals</a> - First-person multiplayer
survival game.</li>
<li><a href="https://venge.io/">Venge</a> - 3D Multiplayer FPS
shooter.</li>
<li><a href="https://poki.com/en/g/vortellis-pizza-delivery">Vortellis
Pizza</a> - Multiplayer restaurant game.</li>
<li><a href="https://www.warbands.io/">Warbands</a> - 3D Multiplayer FPS
shooter.</li>
<li><a href="https://poki.com/en/g/wheat-farming">Wheat Farming</a> -
Multiplayer farming game.</li>
</ul>
<h2 id="messenger-games">Messenger Games</h2>
<ul>
<li><a href="https://support.snapchat.com/en-GB/a/games">Snap Games
Support</a> - Snapchats gaming platform powered by PlayCanvas.</li>
<li><a
href="https://www.facebook.com/instantgames/play/2236502786367605/">Archery
3D</a> - Archery simulator.</li>
<li><a
href="https://apps.apple.com/us/app/gamebytes-games-for-imessage/id1506797690">GameBytes</a>
- Multiplayer games for iMessage.</li>
<li><a
href="https://www.facebook.com/instantgames/play/267920816949420/">Golden
Boot</a> - Penalty kick game.</li>
<li><a
href="https://www.facebook.com/instantgames/play/188237332468920/">Hoop
Master</a> - Head to head basketball game.</li>
<li><a
href="https://www.facebook.com/instantgames/play/1315812941823883/">Master
Archer</a> - Shoot the fruit from the top of Bobs head.</li>
</ul>
<h2 id="automotive">Automotive</h2>
<ul>
<li><a
href="https://www.airstream.com/travel-trailers/airstream-basecamp-3d-experience/">Airstream
Basecamp</a> - Travel trailer visualizer.</li>
<li><a
href="https://www.benningtonmarine.com/en-us/build-model/">Bennington
Pontoon Boats</a> - Boat configurator.</li>
<li><a
href="https://www.bmw.com/en/design/car-design-the-keys-to-bmw-design.html">BMW
Car Design</a> - Interactive exploration of BMW design.</li>
<li><a
href="https://www.bmw.com/en/performance/electric-sports-car-BMWi4-M50-driving-dynamic-test.html">BMW
i4 M50 Showcase</a> - Blog article that embeds a technical overview of
the new i4.</li>
<li><a href="http://car.playcanvas.com">BMW i8</a> - Car
visualizer.</li>
<li><a href="https://dabmotors.com/configurator/">DAB Motors</a> -
Motorcycle configurator.</li>
<li><a href="https://www.honda.co.jp/CIVICTYPE-R/configurator/">Honda
Civic Type R</a> - Configurator (Japanese).</li>
<li><a
href="https://www.indianmotorcycle.com/en-us/scout-bobber/build-color/">Indian
Motorcycles</a> - Motorcycle configurator.</li>
<li><a href="https://beijing.infiniti-experience.com/">Infiniti
Experience</a> - Explore the 2020 Infiniti range (Chinese).</li>
<li><a
href="https://www.kia.com/kr/buy/build-your-car/build/trim?rcCode=KRSG078">Kia
Niro Hybrid</a> - Kia configurator (Korean).</li>
<li><a href="https://www.kiavirtualexperience.com/">Kia Virtual
Experience</a> - Explore Kias latest line of cars.</li>
<li><a href="https://playcanv.as/p/4e391c28/">Mercedes AMG GT C</a> -
Car visualizer.</li>
<li><a href="https://saas.nissan.co.jp/clubariya/login/">Nissan
Ariya</a> - Explore Nissans Arriya in 3D (Japanese - requires sign
in).</li>
<li><a href="https://rzr.polaris.com/en-us/build-model/">Polaris RZR</a>
- Off-road vehicle configurator.</li>
</ul>
<h2 id="product-configurators">Product Configurators</h2>
<ul>
<li><a href="https://3dplans.com">3D Plans</a> - Virtual tours and
interactive maps for the property market.</li>
<li><a href="https://www.amisco.com/en_us/uprightstool">Amisco
Furniture</a> - Interactive 3D furniture configurator.</li>
<li><a href="https://www.cibeslift.com/lift-configurator/">Cibes
Lifts</a> - Elevator configurator.</li>
<li><a href="http://elfa.com/sv-se/planner">Elfa Closets</a> - Closet
configurator.</li>
<li><a
href="https://www.fjallraven.com/uk/en-gb/bags-gear/kanken/kanken-bags/kanken-me">Fjällräven
Kånken</a> - Backpack configurator.</li>
<li><a
href="https://www.inr.se/planera-badrum/planera-badrum-verktyg-3d/">Iconic
Nordic Rooms</a> - Shower and sink configurators.</li>
<li><a href="http://phone.playcanvas.com">iPhone 6</a> - iPhone
visualizer.</li>
<li><a
href="https://www.montblanc.com/en-us/headphones_cod19971654706731691.html">Montblanc</a>
- Product visualizer for Montblanc pens, watches, wallets and
headphones.</li>
<li><a
href="https://www.myslidingwardrobe.co.uk/design-your-wardrobe/">My
Sliding Wardrobe</a> - Closet configurator.</li>
<li><a
href="https://www.renewalbyandersen.com/windows-doors/replacement-windows/double-hung">Renewal
by Andersen Windows</a> - Window configurator.</li>
<li><a href="https://configurator.wfi.se/#/?lang=en">WFI</a> -
Workstation configurator.</li>
<li><a href="http://www.vaxthusguiden.se/">Willab Gardens
Greenhouses</a> - Greenhouse configurator.</li>
</ul>
<h2 id="arvrxr">AR/VR/XR</h2>
<ul>
<li><a href="https://playcanv.as/p/1ha5glKf/">Orange Room</a> - A highly
realistic interior environment demonstrating room-scale VR.</li>
<li><a href="https://www.rtz23.de/">Neon Bubblegum</a> - Demo scene
style WebXR-based homepage from Karsten Weil.</li>
<li><a href="https://www.phoria.com.au/projects/paralympics-xr/">Raw:
Paralympics XR</a> - Webby 2022 nominated WebXR 360 video
experience.</li>
<li><a href="https://js13kgames.com/entries/storage-space-13">Storage
Space 13</a> - Fun VR game and winner of js13k WebXR category.</li>
<li><a href="https://www.viverse.com/">Viverse</a> - Open platform for
virtual worlds and environments developed by HTC.</li>
<li><a
href="https://playcanvas.com/project/446331/overview/webxr-vr-lab">WebXR
Lab</a> - Sandbox for VR interaction experiments.</li>
</ul>
<h2 id="blockchaincryptonft">Blockchain/Crypto/NFT</h2>
<ul>
<li><a href="https://aritelia.io/">Aritelia</a> - Open world social MMO
with sandbox building and collectable NFTs.</li>
<li><a href="https://www.dogetemple.io/">Doge Temple</a> - Online
microverse devoted to Dogecoin.</li>
<li><a href="https://www.crypt.art/">The Crypt</a> - Gallery for rare
art and collectibles.</li>
<li><a href="https://www.rarerooms.io/">RareRooms</a> - 3D virtual rooms
for NFT collections.</li>
<li><a href="https://somniumspace.com/parcel/">Somnium Space</a> -
Virtual Reality world built on the Ethereum blockchain.</li>
</ul>
<h2 id="contributing">Contributing</h2>
<p>Please see <a
href="https://github.com/playcanvas/awesome-playcanvas/blob/master/CONTRIBUTING.md">CONTRIBUTING</a>
for details.</p>