Creating a real 3D website - javascript

Would it be possible to create a truly 3D website using technologies such as WebGL? By 3D I mean, using a 3D monitor.
Firstly does any browser implementation of WebGL provide any type of functionality that allows for 3D such as Quad Buffering?
Is there any other plausible approach to making a 3D webpage, be-it flash, a browser pluggin etc? (not anaglyph)

Side-by-side stereo would work fine for mobile devices, provided you have something like an FOV2Go or Hasbro My3D viewer to look at them:
http://projects.ict.usc.edu/mxr/diy/fov2go/
http://www.hasbro.com/hasbromy3d/en_us/shop/browse/_/N-1rZgt/Ntt-my3d&viewer?Ntx=mode+matchallpartial&Items=50&Ntk=All
In this case, you would simply draw your scene twice, at slightly different angles, like the example here:
http://fhtr.blogspot.com/2010/06/webgl-stereo-rendering-demo.html

Related

Is it possible to abort drawing pixel of javascript/canvas method fill in adobe air?

I want to build a simple modelviewer. In fact that most 3D Engines for javascript/canvas out there are way too complex for my purpose I'd prefer building a small one on my own. By writing a z-buffer I'd like to check wether canvas API should draw a pixel over the existing image. At the moment I am using the method fill() to draw triangles. I do so because I'd like to avoid writing my own anti-aliasing stuff. Are there any callbacks or is there any other way I can implement my check into the native script?
In fact that's going to be in Adobe AIR, are there any native ressources I could use to speed up(molehill/Stage3D WebGL? Dunno). Or are there any ways in combination of Flash? Actually I'd prefer Javascript but if there are native solutions I'd also like to check them as long as I can implemenet them into my HTML mock-up.
EDIT: A more simply question: Is it possible to implement a check for each pixel the canvas API should draw to abort drawing the pixel if it doesn't fit some conditions? I don't think that the chance is high that the question becomes affirmed but its really woth it.

Real world 3D model using CSS3 / Javascript

I need to rotate/animate 360 deg. a real world 3D object from Smart Phones browsers. When a user scrolls on screen that real world object (e.g. a car) needs to rotate or animate. One option can be replacing images one after another.
Is there any better solution anyone can offer using CSS3/Javascript?
There's a Javascript 3d Library called Three.js - https://github.com/mrdoob/three.js/
Or if you're looking for something more simple like vectors, you might wanna check out Raphael.js - http://raphaeljs.com
Three.js won't be the best choice for mobile browsers, considering the WebGL implementation is still a desire on iOS Safari even it's not the case with Android. CSS3 is not capable of working with high complexity 3D object manipulation, so from this perspective is somehow limited. It has all the 3D (rotation, scaling and transformation) functionalities but for post processing effects - which can be obtained with shaders - are out of scope.
But there is a nice little library which combine Javascript with CSS3 to create some 3dish effects: http://www.edankwan.com/lab/css3dEarth
I think this is what You need!

Spinning wheel or 360 degree rotation wheel

I am looking for some jquery plugin or any code examples for multiple spinning wheels or 360 degree rotation wheels. Attached is the demo image for which, I am looking for the solution, where all the wheel can be rotate and This is basically develop birthdate selection somewhat like desktop and mobile application...But I need for my web application. I am using PHP & Apache web server.
Thanks in advance for any idea or sameple code or similer solution to moving forward
-Himanshu
I don't know of any ready made solutions, but I can point you in two directions you can go:
You can make an image for each of the 3 different wheels with the correct sizes and next use css3 transformations to rotate the specific wheels with javascript ( https://developer.mozilla.org/en/CSS/transform#rotate )
The other option is to look into the html5 canvas tag and draw the wheels onto it by hand. Here is a tutorial which covers making a roulette game on a canvas tag, which is quite different from your requirements, but does describe the necessary techniques. http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas
Yes HTML5 canvas rotate() is the way to go with this. My site http://www.dougtesting.net has a winning wheel that uses canvas rotation, but only for one wheel image. The code is fully commented so you may find it a useful starting point.
For your project you would probably need multiple images that are rendered to the canvas and rotated to the desired angles. Also you will probably need to look in to a mouseDown, mouseMove, and mouseUp code to allow the user to drag the wheels to the desired locations, with the code being able to tell you the values pointed at (something the code in my winning wheel can also do).
I am not aware of a jQuery plugin that does exactly what you ask. In terms of browser compatibility, I recommend you to take a look at the excellent RaphaelJS JavaScript library. It allows you to draw and rotate a wheel using vector graphics. Best of all, this library is IE6+ compatible and works in most if not all modern webbrowsers, including tablets and mobile phones.
To ease the creation of the necessary vector graphics, you can draw the wheel in a vector image editor of your choice (e.g. Illustrator, Inkscape, etc..) and save the vector image as SVG file. A very convenient online companion tool called ReadySetRaphael takes an SVG file as input and produces the necessary JavaScript to draw the graphics automatically.
If you have the path of the vector graphic as an object in JavaScript, it is easy to rotate it with the Element.rotate() method.
Although I am not sure if a plugin exists for this purpose;In my current project we have made a context menu using the canvas api which is not that different from your requirement, if not a bit more complex. Therefore, I highly recommend using the HTML5 Canvas api to do this, if you are not restricted from it. You can use a few ideas from the interactive flower tutorial.
http://www.html5canvastutorials.com/labs/html5-canvas-interactive-flower/
This should help too if you're interested in bringing jQuery into play.
http://www.elated.com/res/File/articles/development/javascript/snazzy-animated-pie-chart-html5-jquery/

Apply 2D canvas (image + text) to 3D surface and do 360 degree rotation/animation - possible to do this with HTML5/CSS3/Javascript or Flash necessary?

I'm contemplating (if it's possible or) how I would implement the following functionality in the browser:
I'm trying to design a web app that will allow the user to custom design (add images + text) to a 3D surface in the browser. The design can take place on a (2D) canvas/editor which will allow users can drag and drop images and add text, etc. Then, preferably in real-time, the design is transformed & applied to the 3D shape/surface. The user can preview by rotating the 3D surface.
It needs to work in iOS so Flash is out. Also would it be possible to avoid WebGL for this kind of application - would like the a wide browser coverage (IE8 would need to be supported with the relevant canvas shims).
Is there anything out there that already does this? Would it be possible to implement this exclusively in the client side (HTML5/Javascript)?
Check out http://www.c3dl.org/ for 3d js libraries
http://www.addyosmani.com/resources/googlebox/ for the image and text mapped to box,
And http://mugtug.com/sketchpad/ for an html5 editor
Yes this is definitely possibly. Look at Three.js and thingiview for examples and inspiration in how to do the 3d side of it. You should be able to design the editor using html5 canvas and then get an image version of it using the toDataUrl() method.

Is it possible to create a polarized 3d website?

is it possible to create a website which would display in 3d similar to 3d games or movies? What if I were to modulate the website using some sort of css or webgl technique?
Something which i've found quite interesting is adjusting the angle of an image e.g:
Polarised would require APIs that don't exist (yet). You can however play with analglyphic techniques.
I made this 3d spinning cube (requires a browser with 3d transforms to work) that uses red cyan glasses to work: http://css3.bradshawenterprises.com/demos/3d.php
It kinda works!
Doing a 3d website is possible, but hard, using red/cyan anaglyph glasses. Getting 3d using active shutter glasses is perhaps theoretically possible, but almost certainly unfeasible without huge timing issues. Polarized glasses is impossible without using a projector with a split image lens and polarized filters (or two projectors).
Latest stable version of Chrome 9 now has built-in support for WebGL. Some of famous example will be Aquarium, Jellyfish and even Virtual globe.

Categories

Resources