Quantcast
Channel: Learning Three.js
Viewing all 89 articles
Browse latest View live

LearningThree.js News #10: Stay Tuned With Creative 3D Demos

$
0
0

This post is about the 10th episode of Three.js News. We are very happy to share exceptional demos with you every week. In all the 3D experiences we have shared on previous episodes, we have witnessed talent, dedication and skill. Without so many creative projects we wouldn’t have been able to continue with the news. So, to celebrate this 10th edition, we are going to travel through space, time and even dimensions.

In this episode, we will explore other worlds and make musical journeys across decades and light years. We will wonder around the Parisian metro in a different light and be amazed by the simple beauty of land and stone. We will interact with the futuristic and be repelled by the terrestrial. We will learn to safeguard and preserve our cultural heritage through online 3D, and finally, take a walk through the magical woods of the imagination.

Metropolitan IO

metropolitan_io

This project by Dataveyes was made to represent the metro network of the Parisian underground. It is a Webgl data visualisation experience. It gives commuters information about the metro system, like journey times and people touching in at each station. It is dynamic and interactive. Dataveyes’ mission is to transform human data into the best user experiences.

I Want To See Other Worlds

i_want_to_see_other_worlds

I want to see other worlds by Primitive. Have you ever dreamed about traveling through space and time? If the answer is yes, then you are gonna love this demo. Primitive is a demo group with outstanding projects in their record. In this webgl demo you can see various elements floating through space. It is raw and pure at the same time. You will see transformations, visit fantastic universes and be driven through planets of the imagination

Everything Is Fashion

everything_is_fashion

Everything is fashion is a design and rhythmic demo created by Ninjadev. It is colourful, fun and its got style. You feel as if you are travelling through time with the music. You go through decades, 80’s, 90’s…etc. The transitions are impressive and keep up with the beat, great and simple effects. It is both old-school and futuristic

Light Year

lightyear

Lightyear is a very cool experience developed by Mike Lacher, Mika Chernov, Brian Moore and Chris Baker. In this awesome demo you can hear how far music hits have travelled through Space. Music waves from radio broadcasts leave Earth at the speed of light. You can scroll to move away from Earth and you will hear songs that go way back ….even 100 light years.

Bon Appetit

bon_appetit

Bon appetit is a “creeping on your skin” demo by creative coder Mario Klingemann. It will truly make you loose your appetite. It is a realistic and big slimy worm crawling on your screen. The texture is very cool and life-like. The slithering creature is in the form of a torus knot which makes it even more disturbing when it moves!

Future Citizen

future_citizen

This demo is a funky presentation of Future citizen, a studio making interactive web experiences for brands. It is creative and hypnotic. You can see the net of waves flow towards and against the letters. If you move your mouse around to trigger the effect, you will see that the interactions are pretty neat.

Kessler Syndrome

kessler_syndrome

Kessler Syndrome is a Chrome Experiment developed by Will Field. In this demo we can see the amounts of space trash that have been produced by space travel. The idea is to track some of that trash in real time. The red dots are points where the debris fly past each other at close range. In the bottom left we can fast forward to see all the potential future collisions of trash around Earth.

Red Stone

red_stone

Red Stone is a beautifully polished demo made with Goo Create. It was done by Magnus Östergren, their creative director. The scene is like a desert with some subtle wildlife on it. It has wonderful lighting and shadow casting moving around the stone. It was made with an iphone 6. This is just an example of the cool things you can do with the Goo Create tool.

Mount Rushmore

mount_rushmore

Mount Rushmore is a 3D representation of the famous national memorial in the US South Dakota state. It was created by CyArk, an organisation using digital technology to create and share 3D online libraries of the world’s cultural heritage sites. Their mission is inspiring, they want to safeguard and preserve these sites to assure their existence for future generations. Visit their website to learn more.

Way to go

way_to_go

Way to go is an interactive experience created by Vincent Morisset and his team: Philippe Lambert, Edouard Lanctot-Benoit and Caroline Robert. It is a magical walk in the woods which everybody can enjoy. It is fresh and fascinating with its wonderful animation, great old-school characters and 360° video. You can discover the world around you, interact with nature and explore your surroundings admiring the breathtaking effects.

Conclusion

In this episode we travelled far far away, through some exceptional worlds. We experienced fashion extravaganza and music playing in distant light years from Earth. Our journey took us from underground Paris to primitive and futuristic worlds. We explored possible collisions and beautiful life-like scenes. We also protected our cultural heritage and discovered, in the woods, a magical way to go.

Thank you for your contributions. Keep them coming! Stay tuned and see you next time.


Three.js Inspector in Chrome Devtools

$
0
0

Hey guys,

Recently people started to experiment with three.js and Chrome devtools. The excellent @thespite first did Shader Editor Extension and then Three.js Editor Extension. @mrdoob did it too here where he links directly to the three.js editor itself. The goal is to make an extension which allows to inspect your page when you are debugging three.js.

All that is very early work, but the concept seems really promising. It will allow to interact with almost all three.js demos out there. It is a great tool to debug your own work, or to understand how a demo is done. You can even use it to fine tune your parameters.

I loved it so I decided to give it a shot. I forked @thespite work and looked at it over the last weekend. I reused the UI layer from the three.js editor, improved the UI a bit, and applied it to the Chrome Dev tools. The implementation still clearly has some quirks, but I love the concept. I believe it can be a very strong tool to debug three.js.

You can find the Three.js Inspector Extension on chrome app store and play with it.

Install THREE.js Inspector

LearningThree.js News # 11: Stay Tuned With Creative 3D Demos

$
0
0

This post is another edition of Three.js News. We have collected some original demos with skilful effects and lots of style. There is a high degree of talent displayed on these projects. In this episode, we will cycle through the daring climbs of the Tour de France. We will turn around decadent blue worlds, play with colourful Rubik’s cube and take the new Renault Espace for a test run. We will also merge and morph with creative experiences and investigate fascinating generative compositions.

Metropolis

metropolis

Metropolis is an impressive demo by Alex Stockdale. It is a spheric vision of an urban world in destruction, or construction, depending on how you see it. It has a decadent aspect to it, the light is like the shadow of a dream and there is a hazy bluish shade in the atmosphere. This project is not only interactive and skilful but it is also a great example of what we can do with three.js.

The Climb of Alpe d’Huez

the_climb_alpe_huez

This demo by Andrew Mason, Troy Griggs and Lawrence Ostlere, is a 3D representation of the Tour de France. We cycle a trail following the iconic Alpe d’huez climb. Step by step we learn about its history, about details of the trickiest passings and challenges to get to the summit….wonderful work by the talented devs at the guardian!

Roobix

roobix

Roobix is a very fun game created by Marco del Valle on Play Canvas. It is a Rubik’s cube simulator with great animations. The rotations and puzzle combinations are extremely fun to play with. The cube is very reactive and the twinkling colours are part of the features that make this game unique.

Renault Espace

renault_espace

This demo is an interactive prototype of the New Renault Space by Guillaume Collinet. It is a webgl visualizer using real time 3d. You can go inside the car as if you were gonna take it out for a test drive. The interior and animations are life-like and will make you feel like you own it! You can visit Guillaume’s little workshop for more stylish experiences.

Omm Experience

omm_experience

Omm Experience shows us the fantastic world created by Jean Helfenstein. At first, there is an awesome lens flare effect with a halo of light glowing around a revolving asteroid. As the demo evolves, there are 3 chapters about creativity with great morphing and merging animations that transform and deform the object as if it was a ball of water.

Gridiron

gridiron

Gridiron is “an exploration of generative compositions based on vertical structures fighting for space” developed by Kyle Phillips. We can see procedurally generated geometries that rain up and fill the screen. We can also modify their properties and play with the effects. It kind of reminds me of chemistry class.

Conclusion

In this edition of Three.js News we saw the talent behind daring and challenging experiences like the Tour de France, behind life-like animations and reactive games like Rubik’s cube. We floated through procedurally generated worlds and through spheric decadent visions of a city. We took a drive around our imagination and witnessed creativity in its abstract form.

Thanks for sharing. Stay tuned for more Three.js News and see you next time.

Three.js Inspector in Chrome Devtools: v1.2.5 Released

$
0
0

Hey everybody,

We recently announced three.js inspector. This chrome devtools extension allows you to inspect the three.js within your page, directly from devtools.

It is also a great debugging tool! With it you can learn how three.js demos are made, interact with them and modify their parameters. You can grab it on chrome web store and give it a try. It is definitely fun to work on :) We had some long week ends with sleepless nights, and now the Three.js Inspector 1.2.5 is released !

Install THREE.js Inspector

Some of these new features include cool stuff with textures, material shading, shadow casting and practical exporting and tuning options. We will be writing posts to highlight each of these new features. Here is the ChangeLog with the features recently added to version Three.js Inspector 1.2.5, revised and improved.

ChangeLog

  • massive cleanup of the scene capture code
  • added range limit to material.opacity
  • added ability to create a texture from material popup menu
  • added export-in-console for material and geometry
  • added upload support for texture
  • added dragdrop support for texture
  • added “about” tab
  • added texture.sourceFile it is now possible to change texture
    • external texture needs to be on a CORS server
  • added ‘visibility toggle’/’export to console’ and better css on treeview
  • added an object is now relative to the selected parent
    • better controls over the scene tree when you build something
  • added support for face material
  • added texture.anisotropy
  • added texture handling - repeat/offset/wrapS/wrapT
  • added help button linking to three.js documentation
    • good for learning
  • added object3d.castShadow / receiveShadow
  • added material.shadding
  • added left/right/top/bottom for ortho camera
  • fixed Sprites crash + castShadow support
  • added viewVertices + viewFaces in geometry menu
  • added a Config.js and save autoRefresh
  • added bounding sphere in geometry
  • added linewidth, dashSize in material
  • added auto refresh to on by default
  • fixed bug in case of typedGeometry, PointCloud
  • ‘export in console’ in object3d inspector popup menu
  • implemented a tab for setting
  • added autoRefresh setting to periodically refresh the inspector
  • added the ‘no’ panels for a better visibility in the UI
    • simply show it with a object3d selected and without
  • uniform live tuning for shader material
  • implemented better number tuning with the mouse.
    • if shift is pressed, it goes 10 times faster
    • it meta is pressed, it goes 100 times faster
    • if shift+meta are pressed, it goes 1000 times faster

Do not hesitate to try it out. If you have any suggestions, feedback or questions please contact us.

Thanks for sharing this project :)

Learning Three.js News #12: Creative demos of the week

$
0
0

Hello everybody,

This post is a special edition of Three.js News. We have decided to change the format a bit. We will continue publishing the most interesting and creative 3D demos on the web. We will collect the ones that we have tweeted during the week and highlight each one. It’s more of a Newsletter kind of style. Hope you like it :)

Icosahedron Snake

screen shot 2015-08-10 at 10 43 09

Fun and twisty three.js demo by Thomas Hooper on Codepen.io. It’s a spiral snake making its way in a funky pink background.

Vortex Pair Warp

screen shot 2015-08-10 at 10 51 34

Generative net of cells from Turing pattern with gradient flow. It’s got twin vortex mouse and cool shaders. The demo is by Felix Woitzel.

Harvest

screen shot 2015-08-14 at 14 22 35

This demo is a 3d platform using three.js. Work in progress by James Milner. Based on the three.js PointerLockControl example.

BLCK4777

screen shot 2015-08-14 at 14 47 46

This demo is all about realtime audio visual animations with “good’ole 2D canvas”. Great project by Mathieu ‘p01’ Henri.

Sneakers

screen shot 2015-08-12 at 11 58 53

Sneakers is one of Travis Irby’s first experiments with webgl javascript framework three.js. It is interactive and it works on mobile too.

Particle Shader

screen shot 2015-08-13 at 11 00 43

Shiny shader based particles running with three.js and GLSL. Smooth and colourful demo by Philipp Wambach.

The Thing From Limbo

screen shot 2015-08-13 at 11 09 20

Cool 3d design and animation by Army Chiu for the WebDesignerPro. It’s got good use of shaders and shadows.

Conclusion

Okay guys, that’s all for this week. The demos featured here are all awesome projects that deserve to be recognised and shared. So don’t hesitate to check them out.

Stay tuned and see ya next time.

Learning Three.js News #13: Creative demos of the week

$
0
0

Hello everybody

Welcome to a new episode of Three.js News. This time we will discover some artistic and abstract demos. We will go through them at fast speed, see them grow, expand and dissolve. We will also get a bit spooked by a creepy head!

Bjork’s website

bjork

Beause arty design is also a three.js matter, here is a beautiful demo created by Vince Mckelvie from M/M design agency in Paris. It’s singer Bjork’s new website.

Fluid Experiment

fluid_experiment

This demo is an experiment with Fluid particles in Webgl. It was developed by George Corney and it has great effects. It is both hypnotic and mesmerising.

Meander

meander

Meander consists of randomly generated organic sand-storm clouds that dance around the screen. Its author, Anders Hoff shared this via Codedoodl a tool to create original code sketches.

Arrows

arrows

Like a painting in a canvas, this demo by Cabbibo is abstract and bursting with colour. The arrows wander around like small brush strokes in 3D. You can also find it at Codedoodl.

Signal barrel

signal_barrel

Signal barrel is a demo created by Austin Mayer and inspired by a similar project by Beeple. It is a very cool tunnel like recreation on CodePen. You will want to follow it ‘til the end.

Fungal State

fungal_state

This evolutive demo was created by the talented Greg Tatum. It shows us a dynamic and realtime growing fungus shape. It is part of Greg’s Growth series.

Creepy Head

creepy_head

This demo is a creepy morph animation made with javascript. It was created by Sascha Sigl on CodePen. The way the mouth moves and the eyes follow you is kind of disturbing and spooky :)

Conclusion

Okay guys, that’s all the news for this week. We discovered some very artistic, abstract and fast paced projects. Some evolving and expanding, morphing and growing…and some freaking us out! In any case, they are all creative and fun.

Stay tuned and see you next time.

Introducing Three.js Office Hours

$
0
0

This post is to announce Three.js office hours. A practical and easy way to get answers to your questions. The principle is simple: you post your questions on twitter with #learningthreejs hashtag and we will try to answer them.

It is a direct channel for the three.js community. We told ourselves that since our blog is about learning three.js, our mission is to coach and guide willing learners. We are starting it as an experiment, we will try it out and see how it goes. We noticed that people out there have many queries. Whether you are working with it as part of a project, or experimenting with it as a hobby, three.js can be tricky. We have been receiving emails and notifications with kind words (thank you for that!)… and a lot of questions too :) You expect answers and we want to deliver them.

So the idea behind Three.js office hours is to help you get around your troublesome issues. If you are stuck and don’t understand something we encourage you to post your questions in the Twitter hashtag #learningthreejs. If you have sent us queries before and we have overlooked them (sorry for that), please don’t hesitate to ask about it on the hashtag.

We will then pick up questions that you guys posted and record a short video. We will answer them one by one, giving you detailed advice and useful pointers. In addition to that, we will write a blogpost about the content of the video, and publish it so you can come back to it whenever you want.

Thanks for participating in this experience with us. We are sure your questions will benefit the whole three.js community, so don’t be shy!

There is always something new to learn ;)

Learning Three.js News #14: Creative demos of the week

$
0
0

Hello everybody!

This post is about edition 14 of Three.js News. Our favorite demos of last week were very fun to play around with. There were some set above the clouds, staring directly at the sun. Some were cool webgl experiences inspired by games and movies. Some showed a brilliant use of shaders and VR technology. And we even met a three.js sock puppet!

Evolution

evolution

This breathtaking project is a photo-realistic CGI-rendered 3D Virtual Reality film on three.js player. “It takes the viewer on a journey from one beginning to a new beginning.” It was made for Vrse.

Above The Clouds

above_the_clouds

Mesmerising journey above Earth, interactive experience created by Plus 360 Degrees where you travel around the world, floating with the clouds.

Auto Exposure

auto_exposure

A wonderful sunny demo developed by Rasmus Karlsson. A scene with only a camera, you turn around the field, look up at the sky and see the light.

Share The Force

share_the_force.jpg

With this webgl experience made for Target you can explore Star War memories. If you are a fan you are gonna love it. Type in your favorite character to discover its universe.

Casino

casino.jpg

Casino is an extremely accomplished and interactive experiment released by PlayCanvas. The quality of the rendering and the level of detail are excellent.

Small Island

small_island.jpg

This is a fun project by Christian Östman on Codepen.io. Small islands are randomly generated every time you load. You can ass trees, mountains and clouds to the scene.

Flux Core

flux_core.jpg

Flux Core amplifies and concentrates energy. This powerful demo was created by otaviogood on ShaderToy. Be sure to try out the high-quality non-realtime renderer and use it for your shaders.

Puppetic

puppetic.jpg

This charming character is a three.js sock puppet. This interactive demo is a creation of mediosyproyectos, they’ve got a cool website. You can make him move the way you choose and change his mood.

Conclusion

Okay guys, that’s all for this time. We hope you will play around with these demos and become a fan! You can even get inspire and try out your own :) Thanks for sharing and see you next time.

Stay tuned for more Three.js News.


Learning Three.js News # 15: Creative 3D demos of the week

$
0
0

Hello everybody

Welcome to a new edition of Three.js News. In this episode we have gathered some of the most impressive demos of the past weeks. We will play with fun webgl games, matrix-like maps and visit beautiful landscapes. We will also discover apocalyptic experiences, large terrains and original animations.

Vortex Spheres

vortex_spheres

Vortex Spheres is a swirly webgl demo by David Li. It is a wild vertically growing mass of green and blueish spheres. You can tune variation, radius or just let it drop.

LOD terrain

lod_terrain

LOD terrain is a great example of how to efficiently render a large terrain in 3D. You can check out Felix Palmer’s detailed tutorial on how to build it using webgl and three.js.

Spring

spring

Beautiful webgl spring. Great light sets the natural mood on the landscape. You will feel like walking barefoot on the grass. Created by OutofSociety moxiecode.

Reshaping Excellence

reshaping_excellence

This project is Sennheiser’s own webgl experience. It takes us to an apocalyptic and inspiring world. Descending monoliths carry us to a monument of sound. Done by Sehsucht, there is also a mobile version that you can try out.

Mapzen

mapzen

This matrix-like demo is developed by Mapzen, an open source mapping lab. Tangram is a flexible mapping engine, designed for real-time rendering. It is a new wireframe way to look at your city with a wow effect.

Keep Out

keep_out

Keep Out is a fun dungeon game for the brave. It was created by Little Workshop, company crafting fine experiences and games for webgl. There is a lot of action, monsters to kill, gold to loot, weapons to win and levels to clear!

Cycle Through The Night

cycle_through_the_night

This original Codepen demo was developed by Sascha Sigl. It’s a skeletal animation made in three.js. A modern dandy riding a high wheel bicycle towards a full grey moon gives it an intelligently comic atmosphere.

Conclusion

Ok guys, that’s all for this edition. There were some awesome demos these weeks and featuring them all in a post is a challenge. The ones we listed here are our personal favorites. We will be back soon with more Three.js News…stay tuned.

Three.js Online Meeting with JoclyGames

$
0
0

Hello everybody.

This is a new Three.js Online Meeting post. The idea is to interview people using Three.js in their projects. I think it is a great way to learn from each other and share our experiences. You know me, I love three.js and I love talking about it. In this video of about 1 hour you are gonna see some interesting people really passionate about games and three.js

For this interview, i talked with Jérôme CHOAIN and Michel Gutierrez , the guys behind Jocly Games. They have over 113 web board games with very cool features as you will see. You can play on and off line with your friends, or just you and your computer. They also have some mobile apps that make their games even more accessible. You can dowload their games from Facebook, Google Play and iTunes. And good news for developers: you can create and embed your own games! It is tons of fun. Be sure to check it out.

I hope you enjoy it.

See-through Effect for Augmented Reality On Your Phone

$
0
0

This post shows how to read your phone camera and make it appears as transparent, aka to act as a see-through. It may seems unrelated to 3d at first but it is extremely useful in augmented reality. I know it may seem silly :) But this see-throught is the base of Augmented Reality in a phone. This and other AR tech will be the subject of future posts.

It makes your device ‘appears as transparent’ So when the user is looking at her device, she is seeing the reality. You just have to display your augmented part on top and you got augmented reality. A Picture is Worth a Thousand Words :)

How It Is Coded

Webcams are great for interactivity. We will read the webcam thanks to WebRTC, html5 API which can be used to do video/audio conferences like Skype or Hangout.

In our case, we just get the video from the webcam with the getUserMedia() function. we dont need all the network part. It is quite widespread according caniuse which is great! You can learn more about it on mdn or html5rocks

Now that we know how to get a video, which camera to pick ? This demo is intended for phone. They often got multiple cameras nowsadays. typically a front camera for selfies a back camera for the normal photos. MediaStreamTrack will list all the media source available in your browser. In webrtc vocabulary, front camera is called ‘user’ facing video back camera is a ‘environment’ facing . So we try to get the environment video camera if we can.

For the see-through effect to be convincing, we need to be careful. first we display the video stream in full screen, thus it is more real to the user. We display it in the background of the page with the proper css Additionally we ensure we keep a proper aspect ratio, no matter the size of the browser window. So it isn’t streched. So it must be robust to window resize and orientation change. All that makes the resize function more subtle than usual. but nothing dramatic

Source

Here is the full source of the effect. It is in a github repo. Enjoy!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body, html {
        height : 100%;
}
</style>
<body style='margin: 0px;; overflow: hidden;'><script>

// shim
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL      = window.URL || window.webkitURL;


;(function(){

        'use strict;'

        // create video element
        var video        = document.createElement('video')
        video.setAttribute('autoplay', true)
        document.body.appendChild(video)

        /**
         * Resize video element. 
         * - Made complex to handle the aspect change 
         * - it is frequent when the mobile is changing orientation
         * - after a search on the internet, it seems hard/impossible to prevent browser from changing orientation :(
         */
        function onResize(){
                // is the size of the video available ?
                if( video.videoHeight === 0 )   return

                var videoAspect = video.videoWidth / video.videoHeight
                var windowAspect = window.innerWidth / window.innerHeight

                // var video = document.querySelector('video')
                video.style.position = 'absolute'

                if( videoAspect < windowAspect ){
                        video.style.left        = '0%'
                        video.style.width       = window.innerWidth + 'px'
                        video.style.marginLeft  = '0px'

                        video.style.top         = '50%'
                        video.style.height      =  (window.innerWidth/videoAspect) + 'px'
                        video.style.marginTop   = -(window.innerWidth/videoAspect) /2 + 'px'
                }else{
                        video.style.top         = '0%'
                        video.style.height      = window.innerHeight+'px'
                        video.style.marginTop   =  '0px'

                        video.style.left        = '50%'
                        video.style.width       =  (window.innerHeight*videoAspect) + 'px'
                        video.style.marginLeft  = -(window.innerHeight*videoAspect)/2 + 'px'
                }
        }

        window.addEventListener('resize', function(event){
                onResize()
        })

        // just to be sure - resize on mobile is funky to say the least
        setInterval(function(){
                onResize()
        }, 1000)

        // get the media sources
        MediaStreamTrack.getSources(function(sourceInfos) {
                // define getUserMedia() constraints
                var constraints = {
                        video: true,
                        audio: false,
                }
                // to mirror the video element when it isnt 'environment'
                // video.style.transform   = 'scaleX(-1)'

                // it it finds the videoSource 'environment', modify constraints.video
                for (var i = 0; i != sourceInfos.length; ++i) {
                        var sourceInfo = sourceInfos[i];
                        console.log('sourceInfo', sourceInfo)
                        if(sourceInfo.kind == "video" && sourceInfo.facing == "environment") {
                                constraints.video = {
                                        optional: [{sourceId: sourceInfo.id}]
                                }
                                // not to mirror the video element when it is 'environment'
                                // video.style.transform   = ''
                        }
                }

                // try to get user media
                navigator.getUserMedia( constraints, function(stream){
                        // set the video.src with the userMedia stream
                        video.src = URL.createObjectURL(stream);
                }, function(error){
                        console.error("Cant getUserMedia()! due to ", error);
                });
        });
})()
</script>
</body>

LearningThree.js News #2: Stay Tuned with Creative 3D Demos

$
0
0

This post is about Three.js News, a fun and brief newsletter about demos in three.js. The idea is to present the new and interesting 3D creations on the web. Our goal is to keep the audience up to date and tuned with Three.js most recent developments. We will upload videos and collect information of the latest demos. Let’s take a look at this episode

In this second edition of Three.js news we have collected very creative and funky demos. Some of them were developed for both desktop and mobile phones. Some are games, some are just pure fun. Using the latest technologies, they are all a clear example of what’s possible to do with web 3D today.

Inconvergent Waves

screen shot 2015-05-26 at 10 42 57 Inconvergent waves is a nicely done demo by Anders Hoff. You can create waves by moving your mouse around. It’s like making ripples on the water. This technique is actually used as a method for generating landscapes. It’s very reactive and the movements are smooth and natural. Visit the inconvergent website to check out the developing process.

Interactive WebGL globes

screen shot 2015-05-26 at 10 57 30 Interactive WebGL globes is a great way to improve your geography skills! This very educational and fun demo is a creation of Steve Hall. You mouseover the countries that you want and turn around by clicking on the interactive globe. Don’t hesitate to read Steve’s blogpost to know more about his implementation of D3 and Three.js.

Spiral Circle

screen shot 2015-05-26 at 10 58 52

Spiral Circle is another cool demo created by Steve Hall. It is based on mbostock’s example. It is extremely hypnotic and it has kind of a disturbing texture, like the skin of a snake monster or something. You can pan to the left to divide the circle in two. Be careful, it’s alive!

Hatsune Miku

screen shot 2015-05-26 at 11 00 53

Hatsune Miku is a Three.js example demo done by takahiro. It’s a very fun demo even if takahiro is still working on improving it. This very cute blue hair girl is Japan’s sweetheart. She dances in holograms and does live concerts…yeah i’m not kidding! We are even trying to bring her to life in AR.

Race Against Oblivion

screen shot 2015-05-26 at 10 59 58

Race against oblivion or Timeshift is an original game made by Utranoir. Inspired on the story of a unique French car : The Delahaye 165, you have to race against time to save this one of a kind automobile. The presentation of the game is outstanding, it has great design, background and effects. Bonus, it can be played on both desktop and mobile!

A Particle Dream

screen shot 2015-05-26 at 11 03 05 A Particle dream is a demo created by Nop Jiarathanakul. It is one of the latest Chrome experiments. It is a wonderful simulation of particles moving smoothly around. You can choose the shape you want the particles to morph into. The music and the ambiance mix together for a very relaxing result. Oh and you can actually use Leap Motion in this demo.

Our Galactic Neighbourhood

screen shot 2015-05-26 at 11 02 06

Our Galactic Neighbourhood is another very educational demo. Developed by creative coder Charlie Hoey this demo is a simulation of the charted stars in our Galaxy. You are able to explore the stars travelling both in space and time. Have you ever wondered how the stars are like lightyears away from Earth? Or how will they be thousands of years from now? This demo is your interstellar adventure.

Conclusion

In this blogpost we reviewed some 3D demos for Three.js News. They are all very diverse. We saw games, educational projects, simulations and funky characters. What they all have in common is their creativity and the use of 3D technology on the web. Some even go further and incorporate fun control sensor like the Leap Motion device. Have fun checking out all these demos. I hope you enjoy them as much as we did.

Stay tuned for more Three.js News and see you next time.

LearningThree.js News #3: Stay Tuned with Creative 3D Demos

$
0
0

This post presents another edition of Three.js News. In this episode we have gathered some wonderful demos, web documentaries and very artistic experiences. They have all different genres but each of them show a wide range of skills.

It is inspiring to see how many great demos are out there in the 3D world. I wish I could make them fit all in one episode. But it’s okay, I’ll do my best to keep up with your creative minds.

Nightmarish Tentacles

screen shot 2015-06-05 at 11 34 41

This is demo is so cool. It was created by the imagination of Gregoire Divaret and it is fantastically twisted. It is perfect for a Halloween night! You can see the tentacles moving like snakes entwined with each other. Zoom in very close in full screen for a great fright.

Generative Tree

screen shot 2015-06-05 at 11 36 03

This is another demo developed by Gregoire Divaret. The tree grows from the beginning and expands into shape. It is beautifully designed and it has a really nice lighting. You can turn around and see it from different angles. Be sure to check out Gregoire’s website for all his cool experiences with WebGL

The Fallen of WWII

screen shot 2015-06-05 at 11 38 55

The Fallen of WWII or fallen.io is a data drive documentary about war and peace. Directed and coded by Neil Halloran it examines the human cost of the second World War. It can be watched on video through mobile, Apple TV and Chromecast. You can also watch the interactive version which allows you to pause at key moments in the video to interact with charts and numbers. This touching project is a way to remember and never forget the devastating consequences of war.

Gugelmann Galaxy

screen shot 2015-06-05 at 11 40 57

Gugelmann Galaxy is a very artistic experience created by Matthias Bernhard. This awesome demo is a great way to explore the image galaxy live in the browser with three.js. It is very educational, you can arrange the paintings by color, technique or description. Bonus points since it also has a Google cardboard version. Don’t forget to check out the blogpost to see how it was developed.

Procedural Star

screen shot 2015-06-05 at 11 42 46

Procedural Star is an excellent demo with great colors and effects. It was designed by Bruno Simon. The star is great for any space game, you can turn it around, zooming in and out and see the smooth movements it has. You can also change the parameters to customise it as much as you like. Bruno’s website is filled with other amazing projects he has worked on.

Enough

screen shot 2015-06-05 at 11 43 35

Enough is an interactive picture book created by Isaac Cohen or Cabbibo. It is a beautifully artistic and immersive adventure into a world of dreams. It makes the technology appear as if it were alive. It is wonderfully designed and it has a oneiric sense to it. In Cabbibo’s website you can see all his other creations and be amazed by his skill.

Experiment for Google IO 2015

screen shot 2015-06-05 at 11 46 03

This is a very fun and playful demo coded by Jaume Sanchez for the latest Google IO. You play with the Is and the O by clicking on them. They react, with very good physics, by jumping around. There is also an option to change the camera and look at it from different angles.

Pregoneros de Medellin

screen shot 2015-06-05 at 11 47 45

Pregoneros de Medellin is a breathtaking and very interactive street walk experience developed by Thibault Durand and his talented team. It was created using a GoPro and Javascript. You can read the post on how it was produced. In this web documentary you walk around Medellin city in Colombia and listen to the street-vendors cries, which are very traditional in the cultural Colombian landscape. You can click on each vendor to watch a video of his typical day to day life. I just loved it!

Conclusion

In this blogpost we talked about some wonderful demos and very artistic projects. We were very impressed by the rich experiences that lead to web documentaries and interesting publications. All these demos are very interactive and show the amazing things we can do with 3D on the web.

We also want to thank our readers. We love it when developers out there send us their stuff, new and creative demos that we can share.

Stay tuned for more Three.js news. See you next time.

LearningThree.js News #4: Stay Tuned With Creative 3D Demos

$
0
0

This post introduces another episode of Three.js News. In this edition we explore dynamic and constantly changing experiences. With the featured demos we will travel through time, discover new worlds and parallel universes. We will also get into fun and procedurally generated experiences that never repeat themselves twice; they are different every time, no matter how much you try them out. We will enjoy psychedelic effects and interactive experiments.

Ancient Earth

screen shot 2015-06-11 at 14 45 41

Ancient Earth is a very educational experiment found in the dinosaur pictures website. It is a globe of how Earth used to look like, from 20 million to 600 million years ago. There is a list where you can choose any period on the evolution of our planet. For example, when multicellular life was first developed or when plants and flowers first appear… or even jump to dinosaur extinction! You can also remove clouds to see Earth’s transformation and use the left and right keys to travel through time.

Dennis

screen shot 2015-06-11 at 14 51 06

Dennis is a very colourful generative 3D experience produced by Always & Forever computer entertainment and presented by NHX. It is a fun music video with music from popcorn_10. Frames are created in real time. Nothing is pre-rendered. Each scene is procedurally created every time you press play. You’ll never see the same video twice. Check out the about page to see how it was developed.

Growing Tree

screen shot 2015-06-11 at 15 05 00

This demo displays the beautiful and natural growth of a tree. It was created by Greg Tatum. You can check out his blog to see the other works and animations he has done. It starts out at the root, from seedling to tree with small incremental additions. It shows a dynamic growth of the 3D tree structure. Nice colours and lighting make it truly mesmerising.

Another End Game

screen shot 2015-06-11 at 15 18 01

Another End is a procedurally-generated game with an interesting story and a thread to follow. It was developed by Ryan Bottriell and his team. Inside the adventure, you are a player, created by Entity to reunite the 4 Glyphs which are essential to the world. You can have great powers; you can be Architect, a Protector, an Illusionist. Plus there are experimental versions to play it with Leap Motion and Occulus Rift. Follow them on twitter and take a look at all their developments.

Simple Ball

screen shot 2015-06-11 at 15 29 21

Simple Ball is a traditional pinpall game for the web browser using Three.js. It a Chrome Experiment developed by Andreas Rominger. It is very interactive and fun. You will have a very good time trying to keep the ball inside the game. The trick is to shake and tilt!

Sanoran’s Valley

screen shot 2015-06-11 at 15 33 27

Sanoran’s Valley is an exceptional experience imagined by Samuel Honigstein. It is a desert vision of the city inspired by Alberts Camus quote about the big city “being the desert we should seek to remedy life in society”. Very philosophical! It has great shader effects and it actually uses Google Street View, so you can tap in any address you want and see how would it be like transformed into a desert. Check out Sam’s portfolio to take a look at his other creations.

Box Physics

screen shot 2015-06-11 at 15 47 59

Box Physics is a very cool and creative demo. It was developed by interactive coder Silvio Paganini. We can see applied physics in the boxes using oimo.js. They react with a click of your mouse and they change color. There is also a very cool screen effect. You can visit Silvio’s website to try out at all his experiments online.

Magic Mirror

screen shot 2015-06-11 at 15 55 23

Magic Mirror is another Chrome Experiment created by Alexey Roudenko. It is an original psychedelic artwork demo. It is actually web camera triangulation, great for animation in a game. It is amazingly cool, you can use your webcam and see yourself in kind of a distorted reality. You can change the opacity and effect of the triangles and see the cool effect it has.

Conclusion

In this blogpost we explored some very dynamic and exciting demos. We experienced ever-changing worlds where 3D is ever-present. We played some immersive games and enjoyed fun and altering animations. I hope you liked them as much as we did.

Stay tuned for more Three.js News. See you next time

LearningThree.js News #5: Stay Tuned with Creative 3D Demos

$
0
0

This post explores original demos with lots of knowledge. In this episode of Three.js News we will take a tour around 4D dimensions and creative subdivisions. We will also travel over webs of information and have fun with wildlife games. There is a lot of diversity in these projects, but one thing is for sure, they are all developed with the utmost skill and created for the maximum effect.

Paranoid vs. Shy Birds

screen shot 2015-06-17 at 11 00 12

This is a very fun demo created by Yakudoo on CodePen. The bird characters are so cute. The one in the middle is the paranoid one. You can move his head around and see how he interacts with the small shy birds. The HTML, CSS and Javascript are visible on the scene.

Threepark

screen shot 2015-06-17 at 11 00 12

Threepark is a cool editor developed by liguocn. Easy to understand and to use, great for artists and 3d lovers. You can create different models and designs. You even have a library of templates to use. Subdivide a model as many times as you like in the cagemodeling canvas. You can also store your models in the cloud and export them into 3d printing format. Great way to unleash your creativity.

Parrot Hunt

screen shot 2015-06-17 at 11 00 12

Very funky retro game, and also a Chrome Experiment, created by Magnus Persson aka nergal . The idea is to shoot only the parrots, not the flamingos. You can move around and reload your rifle to keep shooting at your prey. Fortunately its not real hunting! You can get really serious and try to improve your score every time like I did! It’s really enjoyable and it makes you feel like a great aim.

Ntype

screen shot 2015-06-17 at 11 00 12

Ntype is another Chrome Experiment demo developed by Kevin Zweerink. It shows us a compelling and interesting way to explore 4D. The typography is extruded into the 4d dimension. You can change the parameters and settings and customise the rotation planes. You can even modify the trails that the letters leave behind them. There are also a lot of other designs to explore in Kevin’s homepage

WikiGalaxy

screen shot 2015-06-17 at 11 00 12

WikiGalaxy is a beautiful and original demo created by Owen Cornec. This experiment takes us to a fantastic space that we actually already use everyday life. We can visualise Wikipedia as a galactic web of information. It’s a marvellous world of knowledge. There is a map where you can fly over the planets, zoom and search. Wikipedia articles are stars, interests are nebulas. Have a good time learning! You can see more WebGL visualisations in Owen’s portfolio

Multivers3D

screen shot 2015-06-17 at 11 00 12

This is the first video game demo released by the multivers3d team. It supports multi-users, cross platforms and it has zero install. This first episode is called Earth Creed. You are a honey bee and you need to harvest pollen and nectar from your environment. You have to use your judgement to equilibrate the balance of the ecosystem. This game will definitely make you love nature.

Conclusion

In this post, we discovered some varied and original demos. We traveled through a space of information and explored 4D dimensions. We also played very funky games and designed 3D models with various subdivisions. The experience each of these demos give us is unique. Keep creating such wonderful projects.

Stay tuned for more Three.js News. See you next time.


LearningThree.js News #6: Stay Tuned with Creative 3D Demos

$
0
0

This post is our new edition of Three.js News. In this episode we will be amazed by cinematographic experiences and awesome effects. Some of them will even give you goosebumps or make your hairs stand on end. We will explore physics engines, blockbuster movies coming soon, particles, portfolios. We will take a look at everything from a manga universe to a world of change. There is also a show off, a very special mention to a great experience that we found, combining 3d animation, motion capture and projection. These vivid experiences are unforgettable and all too real.

Cardboard With Oimo

cardboard_with_oimo

This is a very fun and colourful demo created by Marcio Puga using oimo.js. Oimo is a great physics engine developed by lo-th. In this demo you can see how the spheres change color and react when they touch each other and the surface around them. It’s very cool and you also have a view for google cardboard.

Insidious movie experience

insidious_movie_experience

This awesome cinematographic experience will make your hairs stand on end. The first two episodes of the Insidious movie saga really frightened me. I’m anxiously waiting for the new one. This demo is not reassuring. I think i’m gonna be even more scared! You explore the room around you and click on the hot spots, the story will develop with each click. The effects will have you screaming your heart out!

1 Million Particles

1million_particles

This demo shows us a beautiful and subtile way of creating particles in codepen.io. Developed by Edan Kwan using curl noise and fbo on three.js. He produced a very professional and fascinating effect. You can change the color of the particles, the size, the speed.

Aaron Meyers portfolio

aaron_meyers_portfolio

In his portfolio Aaron Meyers creates a very cool environment. We can see his skills as a developer in this original homepage.Turn around in the room and by clicking on each TV screen you can explore the works he has done. You can also click on Aaron himself to know a bit more about him. This is hands down one of the most creative portfolios I have seen.

Realize project

realize_project

If you liked the movie Ghost in the Shell you are going to love this project It is an homage made by true fans. Ghost in the Shell is a manga by Masamune Shirow, there was also a movie made of it. This demo captures the universe of the manga pretty well. You can turn around and decide which icon to pop-up. There are very cool neon lights in the space, it gives it kind of a Tron aspect. You can also take a look at posts on VR and AI from other news-based sites.

A world of change

a_world_of_change

This demo is part of Google Trends. It is a great idea for social impact. Through google search you can click on topic (recycling, energy, water, natural environment, pollution) or a city, and see how those searches reflect the way the world thinks about climate change. You can discover what certain cities are doing about the environment. It is an eye opener and a great way to encourage sustainable development

Terminator Genisys

terminator_genisys

Terminator Genisys is another successful and cinema based demo created my Paramount Pictures. You can get an amazing inside of the characters by rotating the camera to explore 3d models. You can also zoom in and click on hotspots for information and videos about the movie coming soon. It is very fun.

Show Off “Le Petit Chef”

le_petit_chef

Special mention to this great experience that we found. Le Petit Chef is a masterpiece created by the guys at Skull Mapping, Filip Sterckx and Antoon Verbeek. They experimented with projection on a dinner table. Combining 3d animation and motion capture, a miniature chef turns your dish into a grill and cooks right in front of your astonished eyes. I wish I could book a place at this table! It is an awesome experience that I’m sure you will love.

Conclusion

In this episode of Three.js News we have seen awesome projects. All very vivid and lifelike. Some movie related and some really scary, others more realistic and down to protecting earth. They all have their own universe. We experienced physics and particles, projection and motion capture. Regardless of how or by whom they were developed, all these experiences show us what is possible to create in the amazing universe of 3D.

LearningThree.js News #7: Stay Tuned with Creative 3D Demos

$
0
0

This post is part of the Three.js News series. In this episode we will see some very cool editors, we can share assets and create WebGL experiments with. They are useful, practical and easy to use; they are also a great way to start designing your own 3D models. We will take a look at some impressive demos with cute animals, multiple icons, shaders and crazy skills. All these projects are very fun to play with!

Poonya

screen shot 2015-07-03 at 08 37 42

Poonya is an active community and a cool portal for sharing assets. That is, you will be able to share models, material, textures, animations and scripts with SEA3D Studio for web. An easy to use editor that allows you to create models and to share them with others. You have a wide range of tutorials to help you get started and discover all the functionalities. You can also take a look at all the projects, contributions from other developers.

Chill de lion

screen shot 2015-07-03 at 11 39 39

Beautiful demo created by Yakudoo. We saw paranoid birds in another three.js news. Now its time for the king of the jungle. You will see a very cute animation of a lion who is in desperate need of chillin’ and refreshment. It must be a very warm summer day for him. By clicking you activate the ventilation and when turning around with your mouse you make wind blow in every direction. The lion will definitely appreciate. He will actually smile.

Holy Running Cow

screen shot 2015-07-03 at 11 40 36

This is another demo done by Yakudoo. He really has a talent for creating fun animal characters! You can see a very cute cow running around. When you press and drag the scene rotates, and the cow tries to pick up the pace.

Mighty Fish

screen shot 2015-07-03 at 11 41 24

We just love Yakudoo’s demos. This one is called Mighty Fish. In it you will see a very determined fish, swimming with or against the current. Kind of Nemo’s father when he couldn’t find Nemo. You can move your mouse to change speed and direction and see how adorably funny it is.

Many Icons Using Three.js

screen shot 2015-07-03 at 11 42 27

Funky demo created by Yasunobu Ikeda in codepen.io. It shows various icons and letters that come together and turn into one, flowing in a replaying cycle. It changes color every time and it sometimes gives you the impression of being inside the Matrix. This demo was created using the Time Remap effect with Three.js and TweenMax. You can visit the Clock Maker website to see all Yasunobu’s experiences in this interactive motion lab.

Unstable Clock

screen shot 2015-07-03 at 11 42 51

This one is a captivating demo and a Chrome Experiment developed by Tomasz Slawnikowski, a freelance html developer. It measures time in an original frame. Every second is drawn according to the hour passing by. If you look a it for a while you will feel in a state of unreality, in a haze, hypnotic state. Even if it appears unstable, the clock is ticking!

Crazy Skills

screen shot 2015-07-03 at 11 43 42

Crazy Skills is a very cool project created by Panasonic. If you are a football fan you are definitely gonna enjoy it. It is an awesome presentation of football player Neymar incredible sport skills. Just in case you don’t know him, Neymar is a recognised and adored Brazilian football player who plays for FC Barcelona and is captain of the Brazilian national team. He is very talented as you can see it in this motion museum dedicated to him. There a a set of skills you can click on and see how Neymar’s avatar plays on the field.

Fiddling with shaders

screen shot 2015-07-03 at 11 48 33

Very kaleidoscopic experiment created by Chris Chua. In this demo Chris plays around with shaders in WebGL to simulate force over an area. You can click and drag your mouse around to see how a trail is designed, go faster or slower. It almost resembles a small fish in the water.

I’ll be back

screen shot 2015-07-03 at 11 45 27

Amazing project brought to us by the team at Goo Create. Here is another cinematic and life like demo inspired by the last Terminator film. The effects and sound intensify the experience and the ambiance around is purely immersive. On their website you can try out their great WebGL creation tool for ads, games and interactive experiences. Their editor is impressive by its simplicity and accessibility.

Conclusion

In this episode of Three.js News we discovered some great ways to create 3D models and share assets. There are vast possibilities when using great editors and tools. We discovered letters and numbers that form together in time and space. We also played with fun and lovable characters and professional football skills. We hope that you will really enjoy experimenting with all these projects.

Stay tuned for more Three.js News. See you next time

LearningThree.js News #8: Stay Tuned With Creative 3D Demos

$
0
0

This is another post for Three.js News. In this eighth edition we are going to travel and dance with cubes, discover Swiss ground with points, and do some commuting with lines. We have a couple of educational viewers, one for asteroids and another, less space related but equally exact, for terrains. We will enjoy turning around with funky vertex and spinning helix. We will discover some beautiful models skillfully displayed in Three.js. We will also be able to measure and forecast happiness.

The Happy Forecast

the_happy_forecast

The Happy Forecast is a beautifully made and innovative social experiment. It was created by the team at Clubhouse, an interactive design studio. In this project they measure happiness in every region and postcode of London. They did this with over a year social wellbeing research. Everything from public interactions to body language and audio factors are taken into account. You can visit their website to learn more about their cool projects

Point Cloud Viewer

point_cloud_viewer

The point cloud viewer experiment is amazing. It measures the exactness of land, making an accurate replica of it. They have displayed the Swiss canton of Neufchatel. You can navigate through it, keeping above ground, increasing the moving speed, flying or changing controls. The ground will materialize before your eyes.

Double Helix Spin

double_helix_spin

This fun demo was created by Thomas Hooper. The helix have a predefined motion, their trajectory is spiral and never ending. You can see them entwined as snakes each with a different color, it is a very cool effect! You can see some of Thomas very artistic projects on his website stainless vision

Fluuuu

fluuu

Fluuuu is a fun and rythmic demo created by Silvio Paganini. Silvio is a very talented developer, we featured him in previous Three.js news. In this demo, you can see cubes dancing as if to a beat. They were inspired by Conway’s game of life. You can change their size and color. Silvio did this for FLUUUID, a London creative-tech collective that converges art and technology.

Asteroid Model Viewer

asteroid_model_viewer

This educational demo was developed by Ian Webster. We featured his Ancient Earth project, which we loved, in previous episodes. Now Ian has created an asteroid viewer with lots of models to choose from. You can see various types of asteroids; a lot of research has been put into this demo. You can even see them in wireframe mode.

Metrogram3D

metrogram_3d

Metrogram3d is a wildly interactive and creative demo by nulldesign. It is a time lapse simulation of the Tokyo metro. You can see what is happening in the web of lines in real time. It makes you feel dizzy sometimes. We can realize the pace we are living at when we commute every morning…maybe we should slow down a bit!

Cube Travelling

cube_travelling

Cube Travelling is a very cool interactive demo created by Rauri on Codepen.io. The effect of the cubes or bars, depending on which was you see them, is fantastic. In this version, you can change the camera perspective and view. You can also toggle the colours. The motion is very fast and the effect is enthralling. In his funky vector website you can check out all the demos Rauri has developed.

Maya models converted to Three.js

maya_to_threejs

This demo was created by Alex Stockdale. You can see custom Maya models and materials beautifully and skillfully converted to Three.js. You can turn around the models set on the table, zoom in to see them more closely. There is also some great shadow casting in this demo. Alex is an interactive artist, we can see that in his portfolio where he mixes code and creativity in his projects.

Conclusion

In this edition of Three.js News we travelled with cubes, points and lines. We discovered how happiness can be measured and forecasted in a determined region. We enjoyed dancing, spinning and converting models to Three.js. All of these projects reflect researched studies, skills and creativity, and the elliptical never ending wonderment of web 3D.

Hatsune Miku Dancing In Augmented Reality

$
0
0

This demo shows Hatsune Miku dancing in augmented reality within your browser! This is great and surprisingly easy to do. All that running on your browser, based on web standards. I did it to show it was possible to do AR within the browser. I wanted to share the code to see what you guys can do with it.

Best of all, it even runs on mobile phones that support WebGL and WebRTC. The screenshot on the right is made on a nexus. So we can do augmented reality within the browser on mobile

We can do augmented reality within the browser on currently deployed mobile phones today! There is nothing to wait for.

How is it coded ?

It is mainly a link of 2 parts. First webar extensions for three.js. They bundle what is needed to handle augmented reality with three.js, from the webcam setup to the marker localisation. Second part is the mmd loader which loads the model. It loads the Hatsune Miku model and its animations.

Once you got those 2 parts, things are simple :) you just have to display your model where your marker is. To know the tech details, you will have to dig in the code. I will likely talk more about AR tho.

Now Let’s Do a Bit of History

I did this to show it was possible to do AR within the browser and to share the code to see what you guys can do with it. It was for a AR oriented hackathon in Dublin. It recently landed a new job at Daqri. Part of my job is developer relations, so I get to help people doing AR. I love it :)

All the code to handle Hatsune Miku is from Takahiro Aoyagi. He did a fork on three.js to load mmd formats, the format used to store Hatsune Miku. It may be included in three.js soon. Here is his example for three.js It all started with his mmd viewer in pure webgl. The original contains a LOT of neat features like inverse kinetic, physics for the hair, a toon shader to make the color more cartoonish, a edge shader to enhance the outline of the model like a drawing. He is doing excellent work. Check him out on twitter as @superhoge.

Let’s have a word about Hatsune Miku herself. It is such a nice story. She is a Japanese star but she is purely virtual. She is a humanoid persona which appears as a drawing or as a hologram. There is no human behind, even for the voice! When she sings, what you hear is a voice synthesizer from crypton All that is crazy but true :)

She even does concerts where thousand of fans are go to see her. Actual human fans I mean, not virtual ones. As you can see, Hatsune Miku is no stranger to augmented reality. I love her!

How To Run The Demo ?

You may want to run this demo obviously. Here is how to do it. First you put the demo url in your browser. It will read your webcam using getUserMedia. When it asks for permission, allow it :) Then you need to put this AR marker in front of the camera. You can print it and point the camera toward the paper or you can load the marker web page and put the phone in front of the camera. And now you can see Hatsune Mike Dancing in Augmented Reality.

Now let’s look at it in action in this little screencast.

Conclusion

If you want to experiment with augmented reality and three.js, checkout threex.webar. It is so cool to make augmented reality on the web! I hope you have as much fun as I had doing it :) I can’t wait to see what augmented reality will do on mobile’s browsers.

That’s all folks. Have fun.

LearningThree.js News # 9: Stay Tuned With Creative 3D Demos

$
0
0

This post is part of the Three.js News series. If you have a taste for innovation and digital creativity in 3D, this series is for you. For this edition we have collected some very artistic demos. We will take a look at some unique projects. Everything from subversive and divergent experiences to particle libraries has a place in this post. We will play around with funny and endearing characters and explore objects around Earth’s orbit. We will spin around colorful cities and visit impressive one man portfolio. All of these developers are taking creativity one step further.

Like to Death

like_to_death

This demo is a subversively intelligent project to show us the sometimes empty shell of social media ‘likes’. It was created by Geoffrey Lillemon and Stööki, an independent design collective. How many times a day do we “like” something on the web? These clicks have a lot of power over us. In the demo you can see the figure of death and her demons on the middle. As more and more people like the project, it will get destroyed. Our “likes” will totally disintegrate the scene.

Particulate.js

screen shot 2015-07-16 at 16 31 06

Particulate.js is a JavaScript particle physics micro library. Developed by Jay Weeks, it is simple, fast and stable. The movement of the particles is amazing, you can see them flowing in and out and control them with your mouse. They come together in a compact cloud of matter.

Sneeze the Dragon

sneeze_the_dragon

This creative, fun and very interactive demo was created by Yakudoo on Codepen.io. Yakudoo is a very talented developer who truly has a gift when it comes to imagining fun demos like this one. The more you keep clicking the harder the dragon sneezes, be careful, that’s fire he is breathing out!

Blend4Web Player

blend4web

In this project we can see a great real time cartoon model created by Yadoob for Blend4Web, a tool for interactive 3D visualization on the internet. You can turn this funny Yoda like character around and look at the awesome shadows the model casts. Visit the Blend4Web website to see all their different demos and designs.

Christmas experiments

christmas_experiment

Christmas Experiments is an advent calendar which features digital artists from the creative coding community and their web experiments each day leading up until Christmas. Some of the artists include Michael Anthony, Damien Mortini, Matt DesLauriers and Eiji Muroichi. There many experiments and artists you can choose from. Each experience is magical, wonderful and it will make you jolly with Christmas spirit.

My shards

my_shards

My shards is an abstract experience developed by internet artist Ezra Miller. It is diverse, divergent and very creative. Every time you click on it you will get a new texture on the screen. The change in color and design are awesome.

Bruno Quintela’s profile

bruno_quintela-portfolio

This is the impressive portfolio of Bruno Quintela. You can take a tour around his website and see the wonderful forms that contribute to the digital adventure. The WebGL aesthetics is amazing. It is polished and beautifully presented. A true masterpiece.

Stuff in Space

stuff_in_space

Stuff in Space is a sideral demo created by James Yoder. It is a realtime 3d map of objects that are in Earth’s orbit. You can explore all the waves and transmissions surrounding our planet. The website updates daily with data from space track and uses satellite.js a cool Javascript library to calculate satellite positions.

Circular City

circular_city

This interactive demo was developed by Mombasa on Codepen.io. You can follow the movement of a very colourful and revolving city. Nice way to build it using three.js You can see the streets and buildings closer to you as it moves around and uncovers itself. Codepen.io is a code editor in your browser, excellent for designers and developers to create wonderful projects.

Conclusion

In this episode of the Three.js News series we saw demos bursting with artistic innovation and creativity. All developers featured here are true artists of the digital and 3D world. Their characters are memorable. Their ideas and profiles are designed to make a lasting impression in our minds. Their creations are aesthetic, useful, inspirational, filled with knowledge and skill. I hope you appreciate and enjoy their talents.

Stay tuned for more Three.js News. See you next time

Viewing all 89 articles
Browse latest View live