Category Archives: 3D

Hiring Experienced Graphic Artist for Online Web and Game Applications

Jafty Interactive Web Development is looking to hire a very talented Graphics person. You must be accustomed to doing high-end projects. I need someone that excels in the following areas of Graphic Design:

  • Photoshop
  • Blender
  • Three.js
  • Gimp
  • 3D Modeling
  • Web Page design
  • Experience with Unity a plus
  • Must have a portfolio of web sites you have designed(not developed, but designed in Photoshop or similar)
  • Portfolio in 3D modeling for games and/or websites is plus
  • 5 years min experience
  • Self-Taught okay if you can prove yourself
  • Be willing to do a challenge project
  • Be willing to work on a project by project basis

We will consider hiring one Photoshope designer and a separate 3D designer, so please let us know if you have experience in either and need some work. If you're looking for full-time work though, you'd need to be able to do both Web site design and 3D modeling to stay busy with us because I don't have enough work in one or the other to keep you busy, but I do in both combined. Coding sills not required, but are a plus.

Creating a Web Development Environment

This week, I decided it was time to upgrade my web development tools. When you reach my age and have been coding for over 20 years, you have to upgrade every once in a while. I am doing this because I know there are faster and better ways to do what I do everyday. I also wanted to document the new system I create for myself as a seasoned web developer so that those of you just starting out can gain some insight.

Defining your Development Needs

First, I had to layout what my needs as a web developer were. I simply made a list of the technologies I use every day and some I use regularly but not every day necessarily and ordered the list in order of priority. The first items on my list are technologies I use the most:

  1. PHP
  2. HTML
  3. CSS
  4. JavaScript
  5. MySQL
  6. WordPress
  7. Woocommerce
  8.  jQuery
  9. Photoshop
  10. SEO
  11. Three.js 3D programming
  12. FTP
  13. Perl
  14. C++
  15. C#
  16. Ajax
  17. Blender
  18. Gimp
  19. Unity 3D Development
  20. XHTML
  21. XML

As you can see, I use over 20 web technologies in my day to day work and I didn't even list them all, but those are the most significant ones off the top of my head that I use. My goal is to put together a work environment with the most important of those technologies in mind. Ultimately I wish to create an environment that focuses on speed and the ability to make the top technologies I use to work together in a more organized fashion. For example an app that allows me to code in many languages and preview server-side code live in a local server would be one of the primary objectives of my new routine.

With that in mind, I am going to narrow down my above list to what I use in my day to day work from which I actually make money from and do the most. Those would be mostly the ones at the top of my list, but this gives me the opportunity to rethink what I need the most and come up with a work environment that best facilitates my needs as a web developer. Here's what I came up with in the end:

 

  • PHP
  • HTML
  • CSS
  • JavaScript
  • MySQL
  • WordPress
  • Woocommerce
  • Graphic Design
  • SEO
  • FTP
  • Perl

 

Several of the items in my first list were related to JavaScript such as jQuery, Three.js and Ajax, so really, my main objective is to just have JavaScript available in my work environment and it will basically cover all the related technologies as well for the most part. There is no way we are going to make an efficient work environment with over 20 technologies, so it is important to narrow your list down as much as is practical. There were also a few different methods of creating graphics on my first list and instead of naming Photoshop, Gimp, Blender, etc, I just put "Graphic Design" on my short-list because that enables me to think in more broad terms about what applications I can use that might be able to accomplish the same tasks as those tools all rolled up in a more advanced tool(if that is possible).

Searching for Applications

My next task was to find programs and applications that will help speed up the web development process. First, I will list the programs and applications I use currently and from there figure out where I can make improvements. So I copy and paste my short-list from above and add after each technology what tool or program I use to accomplish tasks related to each technology:

 

  • PHP ------------------- Notepad++, Filezilla, Firefox, IE, Safari, Chrome
  • HTML ----------------- Notepad++, Filezilla, Firefox, IE, Safari, Chrome
  • CSS -------------------- Notepad++, Filezilla, Firefox, IE, Safari, Chrome
  • JavaScript ----------- Notepad++ , Filezilla, Firefox, IE, Safari, Chrome
  • MySQL ---------------- Notepad++, PHPMyAdmin, Firefox, Putty
  • WordPress ----------- Notepad++, wp-admin, Filezilla, PHPMyAdmin, Firefox, IE, Safari, Chrome, Putty,
  • Woocommerce ----- Notepad++, wp-admin, Filezilla, PHPMyAdmin, Firefox, IE, Safari, Chrome
  • Graphic Design - Photoshop, Gimp, Blender, Unity, MakeHuman, FileZilla, Firefox, Notepad++
  • SEO -------------------- Notepad++, Firefox, Various Service Providers
  • FTP -------------------- Filezilla, Notepad++
  • Perl -------------------- Notepad++, Putty, Filezilla

So from the above exercise, I was able to make a comprehensive list of the programs and applications I use when doing my web development work:

  1. Notepad++
  2. wp-admin
  3. Filezilla
  4. PHPMyAdmin
  5. Firefox
  6. Internet Explorer(IE)
  7. Safari
  8. Chrome
  9. Putty
  10. Photoshop
  11. Gimp
  12. Blender
  13. Unity
  14. MakeHuman

So out of those 14 programs, I don't actually use them all everyday and I use some more than others. For example, I am more of a programmer than a graphic designer. That's why I call myself a "Web Developer" and not a "Web Designer". So numbers 10 - 14 on the list can go into my "Nice to Have" category and do not require crucial changes since I only use them every once in a while and it's not a huge deal to keep using what I use now for those. If you are primarily a web designer however, these applications would be higher up on your list of tools you use and you WOULD want to give more thought to whether you can find better tools and tools that can combine the abilities of several of those. For example, Photoshop can do everything Gimp can do for the most part, so you might want to drop Gimp as a regular tool and use Photoshop more often. Then Unity, Blender and MakeHuman are all 3D modeling tools used more for video game development than web development, but if you use these regularly, you can probably search and find a tool that does most of what you need to do using those tools all rolled up in one good tool. Actually Unity is close. I try to learn to do what models and textures I can right in Unity instead of going to Blender to create them and then import them into Unity which takes more time, but sometimes it is still necessary to do.

Anyway, being first and foremost a web developer and not a designer, the tools most important to me right now are the first ones on my list and can be narrowed down to these:

  1. Notepad++ is what I currently use for most of my coding needs.
  2. PHPMyAdmin is a must have for all of my MySQL database manipulation needs currently.
  3. Filezilla is what I always use to download files from client's web servers. Then I edit them and upload them back to the server using Filezilla once again.
  4. Firefox is my web browser of choice since it is by far the most standards compliant of all the available popular web browsers. The others listed above are only used at the end of a project to check for cross-browser compatibility and there is no real way to get around having to use them all to properly debug your web applications.
  5. Putty is a great tool I also use often to access client's web servers for just about anything that I cannot do through the Filezilla FTP program. Tasks I use Putty for include tweaking PHP settings, changing ownership of files and editing server configuration files.

The next thing I have to ask myself is where can I make improvements in my development process and what tools are involved. After that I can search for better tools to accomplish those goals. From what I gather after examining my own habits and tools that I use, I figure the most improvement can be made in the areas of FTP, Code editing and Previewing the results of the code I write.

I came up with the above conclusion by thinking about where it seems like I waste the most time. Also I kept in mind what is possible to change and I figured that recent developments in developer tools probably will allow me to be able to improve the way I edit code, the way I update files and the way I view server-side scripts while in the process of coding them. Here's my current most common process in my day to day work routine:

  1. I go to Firefox and locate the problem on a client's website or the area of the website that they may want something added to.
  2. Then, I open Filezilla and locate the files involved that need editing on the server and download them to my desktop for editing.
  3. Next, I will normally open Notepad++ and work on the PHP, HTML, CSS and/or JavaScript code until a portion of the solution is accomplished.
  4.  Then I have to use Filezilla again to upload that file back to the web server for testing.
  5. After that, I open the webpage in Firefox to see if it works and to plan what I have to do next.
  6. I go back to Notepad++ and make more changes.
  7. I upload with Filezilla again and again view the progress in Firefox and keep repeating steps 4,5 and 6 until the changes appear correct.
  8. Then finally, I check the progress in all other popular browsers such as IE, Chrome and Safari to make sure it all works. Again here I have to repeat steps four through six some more until all problems are resolved with cross-browser compatibility.

As you can see, there are some seriously repeated functions that can take up a lot of precious development time in my current process. The best way to speed the process up would be to eliminate the process of having to upload the files to he server every time I make a round of changes and view it in a browser then go back to notepad++. With this acknowledgement in mind, I need to find a tool that allows me to do the following important steps in my web development process:

  1. edit several types of code in one place.
  2. get the code to the server seamlessly for testing.
  3. and view the output in a browser.

So the best place for improvement in my process is within those three steps. If I could find the perfect tool to accomplish all three, that would be perfect.

Finding Tools to Improve your Workflow

So, while looking for tools to accomplish these feats, Here is what I found.

CyberDuck

The first one I tried after reading reviews and program descriptions all across the web, was a not-so-well-known application called CyberDuck. After testing CyberDuck for about a week or so, I found that it met most of these needs, but had it's pros and cons like any other application. Let's examine those pros and cons:

CyberDuck Pros:

  • allows for the importing of FTP connection information from Filezille to CyberDuck. This is great because if you have a lot of clients like I do, you have a lot of FTP connections and it would take a lot of time to copy them all manually. In CyberDuck, they call FTP connections "bookmarks" this was strange to me and I didn't know what they were for the first day or so, but once I figured out what they were, I was able to use the application much more efficiently.
  • CyberDuck has an FTP application built in.
  • It allows you to link your favorite text editor or code editor to the FTP function so all you do is click on a file in the server's document tree and it opens in an editor on your local machine! So, it downloads a copy of the file and opens it in your editor in other words. So in my case, I click on a file in the document tree and it opens up in Notepad++ for editing.
  • When I save the file after making changes in Notepad++, it automatically uploads the changes to the remote server without me having to do anything but click on "Save" in Notepad++. This saves a lot of time. Even though I am actually using two programs, CyberDuck and Notepad++, it seems like I'm only using one because there is a nice seamless integration of the two performed within CyberDuck.

Cons of Using CyberDuck

There are not a lot of cons, but the ones that bothered me were:

  1. It drops the connection to the server more often than Filezilla did it seems like.
  2. While it combined two of my three main functnionalities I was seeking, it did not allow for viewing of the code changes live on the server. I still would have to go to Firefox to do that.

All in all, CyberDuck is a great tool. It is still new and has some bugs to work out, but I will definitely follow it and use it while looking for a better solution. Perhaps it will evolve into that perfect solution in a future version. Who knows.

CodeLobster PHP Edition

Next I got an email to let me know of a new program called CodeLobster that was supposed to be the perfect PHP code editor and much more. I am giving it a try right now, so I'll have to come back with most of my review of CodeLobster, but right out of the box I notice that it has a wide range of code editing abilities and features, is expandable and very well made. The only drawbacks I've noticed so far are minor such as the word wrap feature breaks up words in bad places and there is no spell check that I can find for editing plain .txt files. It seems great for editing PHP code so far though.

 

Want to learn more about SEO? Check out these relative books from Amazon:

Roller Ball game

Jafty Roller Ball Game

PLAY GAME!

I have been learning a lot of different 3D technologies lately. I've been getting involved in game development while still doing web development. I find an interesting mix when doing both. There are a lot of techniques used in video game development that can also be employed in a website. Recent advances in HTML5, WebGL, libraries like Three.js and programs like Unity make it much easier to add 3D content to websites than it was previously.

Anyway, I wanted to share a game I made using the Unity framework. It's called simply Roller Ball and you can find it here:

http://jafty.com/RollerBall/

The above game is fully playable and it only took me a few hours to make! Check it out. If you're interested in learning how to make your own game in hours, see the tutorial below from Unity. It is how I learned to make the game in the link above. Good Luck!

http://unity3d.com/learn/tutorials/projects/roll-a-ball/introduction

JavaScript Play Two Sounds at Once

Anyone following my blog may know I have undertaken 3D web development. This includes games and other 3D content for websites. Sound is particularly important to video game development. When it comes to building games with JavaScript, we have to know how to handle multiple sound files at once.  I actually tried a lot of tricks before I found this simple jQuery solution that works:

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function() {
console.log( "Ian says the document is ready!" );
var audio = new Audio('sounds/beat.mp3');
audio.play();
var audio2 = new Audio('sounds/song.mp3');
audio2.play();
});//end doc ready fun
</script>

Three.js Rotate 3D Text by its Center Point

It took me a few hours to solve the issue of how to rotate text generated by three.js and the THREE.TextGeometry function. That is why I am posting the final solution here for others to find when they have the same issue. When you simply create a 3D text model with THREE.TextGeometry and add rotation to it it will rotate on it's default pivot point which will be on the first letter of the text. That means it will not rotate according to a center pivot which is what I needed. I tried several types of three.js functions and mods to get it to work that all failed except one. I eded up creating a new pivot object to contain the text object and rotating that. Here is the complete code followed by an explanation of how it works.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Jafty 3D Gallery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background: transparent;
padding: 0;
margin: 0;
font-family:sans-serif;
}

#canvas {
margin:10px auto;
width:800px;
height:350px;
margin-top:-44px;
}

</style>
</head>
<body>
<div id="canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/janda_manatee_solid_regular.js"></script>
<script>
// standard global variables
var container, scene, camera, renderer, controls, textMesh2;
//var axis = new THREE.Vector3(0,1,1);

function init() {
// SCENE
scene = new THREE.Scene();

// CAMERA
var SCREEN_WIDTH = 800, SCREEN_HEIGHT = 300;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,0,1000);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'canvas' );
container.appendChild( renderer.domElement );

// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );

// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,0,1000);
scene.add(light);

// add 3D text beveled and sized
var material2 = new THREE.MeshPhongMaterial({
    color:0xff4444,//default is 0xffffff
    //vertexColors: THREE.FaceColors,//THREE.VertexColors,
    //morphTargets: true,//? doesn't work here
    shading: THREE.FlatShading,//comment out for other default shading type
    //shading:THREE.NoShading,//uncomment for no shading at all.
    wireframe: false,
    wireframeLinewidth: 1,//windows is always 1, but macs/linux will change line width
    //emissive: 0xFF0300,//color of the material, essentially a solid color unaffected by other lighting. Default is black.
    specular: 0xFF0300,//color of shine
    shininess: 65,//default is 30, higher the shinier
    //reflectivity: 100,//not sure what values are, but didn't make diff
    //opacity: 0.4,//0.0 - 1.0
    transparent: true,
});

var textGeom2 = new THREE.TextGeometry( 'Jafty 3D Gallery', {
    size: 120, //text size
    height: 80, //thicknes of text's extrude!
    curveSegments: 3,
    font: 'janda manatee solid',
    weight: 'normal',//normal or bold(both don't always work with all fonts)
    style: 'normal',//normal or italics(both don't always work with all fonts)
    bevelThickness: 12, //how deep bevel goes into text
    bevelSize: 8, //dist of bevel from text outline
    bevelEnabled: true
});
textMesh2 = new THREE.Mesh( textGeom2, material2 );

textGeom2.computeBoundingBox();
var textWidth2 = textGeom2.boundingBox.max.x - textGeom2.boundingBox.min.x;

textMesh2.position.set( -0.5 * textWidth2, 0, 60 );//left-rt/high/far
scene.add( textMesh2 );

pivot = new THREE.Object3D();
pivot.add( textMesh2 );
scene.add( pivot );
}//end init function

function render() {
renderer.render(scene, camera);
}

function animate() {
window.requestAnimationFrame(animate);
render();
pivot.rotation.y += 0.015;
}

init();
animate();
</script>
</body>
</html>

What part of the above code makes it work?

Good question. All goes according to a normal 3D text reduring until after where I added the textMesh2 object to the scene. Look at the line that starts with the word piviot. Here's the functional code that allows us to rotate the text by it's center axis instead of an axis off to the left of center:

Put this in your init function:

pivot = new THREE.Object3D();
pivot.add( textMesh2 );
scene.add( pivot );

Then, place this in your animate or update function:

pivot.rotation.y += 0.015;

What we are doing here is adding a new Object3D to the scene and then adding our textMesh2 object to the pivot object and finally in our update or animate function, we rotate the pivot object containing the text object which rotates on it's center axis now! You can change the no. in pivot.rotation.y += 0.015; to make it rotate faster or slower. Make it a negative no. to rotate the other direction.