background preloader

Displaying 3D Models in Web Pages using Webgl

Displaying 3D Models in Web Pages using Webgl
Standards for hardware accelerated 3D on the Internet are starting to become established. This is the first step towards immersive virtual worlds accessible through a browser window and for now, a nice way to display your models. The following tutorial (in four parts) shows how to embed Blender models in web pages using software from, the video tutorial runs through a Blender tutorial from their site. Here are the files created in the tutorial – (not needed, easy to make your own). Here are the files created in the final part of the tutorial, models with textures – Blender 2.5 Displaying 3D Models in Web Pages Using Webgl Exporting X3D Files and using X3DOM Part1 This part of the tutorial shows how to embed x3d code in a web page e.g. greenMonkey2.html (sky colour modified). Blender 2.5 Displaying 3D Models in Web Pages Using Webgl Exporting X3D Files and using X3DOM Part 2 Animation in the x3d Format Files used in tutorial – Related Links Related:  multi-touch rotate zoom

rotoscoping in blender A tutorial for Rotoscoping techniques in Blender 3D by Christopher Barrett showing a step by step process to get rotoscoping done using Blender for people who may not have other programs such as After Effects or Nuke. Rotoscoping in Blender (Part 1) from Christopher Barrett on Vimeo. “This is the first part of a tutorial series for rotoscoping with Blender. I’ll show you how to set everything up, step by step, so you can rotoscope even if you don’t have access to expensive programs like AE or Nuke.” Rotoscoping in Blender (Part 2) from Christopher Barrett on Vimeo. “This is the second part of a tutorial series for rotoscoping with Blender.

FinalMesh - WebGL Technical information FinalMesh saves data as html, javascript and data files. Data files are scene tree, geometry, textures and optional shaders. HTML is for sample only, you may insert required parts from it to your own page. Integration Of course you may upload html file as is and everything will work, no changes are required. Internals We use AJAX for loading all data files, so all data downloaded in background and screen is updated when data is ready. After initializing, script loads objects tree and materials definitions. Data Format Geometry is saved in our own format. Scene tree is saved as text-json file. Data size and Geometry Quality Produced data files are quite compact. Binary encoding with lossy compression is right choice for most cases. Generated data files with precomputed per vertex normals are: about 3-6 times smaller than binary .STL files about 2.5-4 times smaller than .3DS about 3-5 times smaller than .OBJ Including HTML, CSS and Javscript. Customization Coming soon

Introduction to Blender Python API - Introduction Blender is a powerful 3D application for creating 3D images and animations and bring your creativity to life. The strength of Blender is its philosophy to provide a smooth and seamless work flow and tools for the artist. Apart from creating objects using devices, Python also enables you to create objects and other things using a scripting interface. Blender uses the awesome and user-friendly Python scripting language It provides extensive programming interface to match almost all the functionality of the application (hence called Blender Python API or BPY API). Now, If you are absolutely new to Programming, please go through the excellent and free online e-book Learning With Python. Accessing Blender's Built-in Python Console By pressing SHIFT+F4 in any Blender Window (3D View, Timeline etc.,) you can change it to a Console Note: Python is a case-sensitive language, so make sure you type the commands as shown in this tutorial (using the same case) Exercise: Basic BPY API Modules

Setup a Local Web Server on Windows, Mac, and Linux When developing a website, a web designer needs to be able to see his webpages the same way the end user would. Sometimes simply clicking on and viewing your HTML files in the web browser is enough, but if you want to test dynamic content, you will need to set up a local web server. Doing this is quite simple and can easily be accomplished on Windows, Mac, and Linux. There are many types of web servers available, but we will be using Apache as it is the most common server around, very easy to set up, and compatible with all major operating systems. Apache was designed for Unix-like operating systems. Linux falls under this category, and installation and configuration of Apache webserver can be done in one step. For graphical walkthrough, you can follow this tutorial. Most popular distributions allow you to install Apache without compiling it from source using one simple command. For Debian, Ubuntu, and Ubuntu-based distro: sudo apt-get install apache2 For Red Hat and CentOS

Extensions:Py/Scripts From BlenderWiki A script is a program that is written in the Python language which runs within Blender, and calls on Blender routines to create new functionality. Because Python is a popular interpreted programming language, it can be used to extend the functionality of Blender in a wide array of ways. Users all over the world have written hundreds of scripts, and this section of the Blender wiki attempts to catalog and document those scripts. It also provides information on how to use and write scripts easier and more effectively. Blender 2.6 has some big changes compared to 2.4. Information for Artists Scripts Catalog - An overview of the scripts that are available, including their documentation. Information for Script Writers Blender Python Manual - Central wiki page for writing scripts in Blender. Blender 2.49b uses Python 2.6 series.

Webmasters! 3 Ways to 3D Web | Blend4Web This article explains how to place Blend4Web content on websites. Method #1 (Simplest): Self-Contained HTML File The possibility to export scenes from Blender to a single HTML file is one the most exciting features of Blend4Web. Such a file is an all-sufficient web page that can be opened with any standard browser and shared through any means (via email, USB drive/memory card, cloud storage, etc). You can, of course, share it online too. The main advantage of this method is its simplicity. 1. Of course, you can use HTML files as standalone web pages without any embedding too. Method #2 (More Optimized): Web Player + JSON The second method is an alternative to the first and the result seemingly looks the same: 3D content with control elements is embedded in a web page. Nevertheless, this method of embedding is different: instead of a single HTML file, a combination of the Web Player and a separate JSON file is used. Where do you get the Web Player? Note Then the .json file is loaded: That's it!

How to Think Like a Computer Scientist — How to Think Like a Computer Scientist: Learning with Python 3 Version date: October 2012 by Peter Wentworth, Jeffrey Elkner, Allen B. Downey, and Chris Meyers (based on 2nd edition by Jeffrey Elkner, Allen B. Corresponding author: Source repository is at For offline use, download a zip file of the html or a pdf version (the pdf is updated less often) from Search PageCopyright NoticeForewordPrefacePreface-3 This Rhodes Local Edition (RLE) of the bookContributor ListChapter 1 The way of the programChapter 2 Variables, expressions, and statementsChapter 3 Hello, little turtles!

WebGL Tutorial: Interactive Model Viewer In this tutorial, you will learn how to create a simple WebGL interactive model viewer using the Three.js library. It will involve creating an html page, setting up the 3D scene, loading a model, and adding controls that will allow you to zoom, rotate, and pan around the object. A basic understanding of HTML, JavaScript, and 3D will come in handy here. Note that you will need a WebGL-enabled browser, eg Chrome, Firefox, Safari 5, Opera 12. You will also need to put these files on a server in order for them to work properly. STEP 1: Download Three.js First, download the latest Three.js package from Github. The minified version of Three.js. STEP 2: Make a new HTML Document Next we’ll create a new HTML document. STEP 3: Include the Three.js library and Supporting Scripts Place the minified Three.js file in your folder (I keep them in a folder named js) and link to the file from your HTML page. STEP 4: Add a Container for the WebGL Content STEP 5: Call the OnLoad Function Create some lights.

Realtime controlled robotic arm through Blender at BlenderNation Justine Dailey published on his website few videos which demonstrate a great application of controlling external hardware through realime interaction with Blender. He custom wrote code to communicate between Blender and the ports which are connected to the servos and offers those on his website for free. He wrote: To finish up my B.S. in Computer Engineering, I had to come up with a design project. YouTube Video: Getting Started with Three.js Introduction I have used Three.js for some of my experiments, and it does a really great job of abstracting away the headaches of getting going with 3D in the browser. With it you can create cameras, objects, lights, materials and more, and you have a choice of renderer, which means you can decide if you want your scene to be drawn using HTML 5's canvas, WebGL or SVG. For all the awesomeness of Three.js, there can be times where you might struggle. 1. I will assume that you have at least a passing knowledge of 3D, and reasonable proficiency with JavaScript. In our 3D world we will have some of the following, which I will guide you through the process of creating: A scene A renderer A camera An object or two (with materials) You can, of course, do some crazy things, and my hope is that you will go on to do that and start to experiment with 3D in your browser. 2. Just a quick note on support in the browsers. 3. Not too tricky, really! 4. All good, but what about the material for the sphere?

3D scatter plots with Blender - Mathieu Gibert Here is a little python script to import a set of points into blender. This is a way of getting very nice 3D plot rendered by a professional software! data_test.txt is a data sample file containing the positions (x,y,z), the velocities (vx,vy,vz), and the accelerations (ax,ay,az) of the particles (careful this is not the input file for the python script...) testPY.txt is the input file for the python script. Where (x,y,z) are the positions, (a1,a2,a3) are planed to be angles that will represent the particles rotation, (r,g,b) are the RGB values for the color of the particles (in that case computed based on the velocity amplitude), and size is the diameter of the particles. TracksTest1.txt is a "track file format" downloadable HERE It is just one column that reads that way: Nb of tracks in the file - ntrk (ntrk times){ Trk index (from 0 to ntrk) Nb of frames (how long is the track) - nbfr First timestamp at which the track start (nbfr times){ x y z vx vy vz ax ay az This is what you get out of this code!

Viewing Models from Maya in WebGL with three.js Here is the most basic, stripped down Javascript and HTML to load and view a model exported from Maya with textures in three.js with WebGL. I use this example as a test script to check my models before loading them into other applications. Checkout this link on Stack Overflow if you want more advanced control of loading textures that were exported from a 3D package. Model or load the object you want to view in Maya. You may need to load the objExport plugin by going to Window Settings/Preferences Plug-in Manager and selecting the objExport.bundle Export the model as an Wavefront OBJ file. Run the three.js obj converter Python script on the exported file by using this syntax. python -i chameleon.obj -o chameleon.js Use this HTML/Javascript file to load and animate your model. Change line 71 to reference your model. callbackKey = function(geometry){createScene(geometry, 0, 0, 0, 15, "chameleon.jpg")}; Change line 72 to reference your model.