
## Why is A.I. so bad at writing in text in images?

If you have used A.I. generators for images before, such as MidJourney, Dall-E or Image GPT, you will have noticed that they are really bad at writing text in images. Why is this?

Well, first, lets take a quick look at using MidJourney, we will start with our first prompt using the string `the letter "D" cute, adorable, octane renderer, 8K, high detail, --aspect 3:2`

<picture>
		<source 
		srcset="https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/letter-d-sm.avif 320w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/letter-d-md.avif 800w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/letter-d-lg.avif 1200w" type="image/avif">
		<source 
		srcset="https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/letter-d-sm.webp 320w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/letter-d-md.webp 800w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/letter-d-lg.webp 1200w" type="image/webp">
		<img 
		className="shadow-lg mx-auto" 
		src="https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/letter-d-md.jpg" 
		alt="Letter D in MidJourney" 
		width="800" 
		height="600">
</picture>

Well great... that seemed to work ok! Well yeah, it's just one letter, ok lets try something else like "Hello" 

<picture>
		<source 
		srcset="https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/hello-sm.avif 320w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/hello-md.avif 800w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/hello-lg.avif 1200w" type="image/avif">
		<source 
		srcset="https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/hello-sm.webp 320w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/hello-md.webp 800w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/hello-lg.webp 1200w" type="image/webp">
		<img 
		className="shadow-lg mx-auto" 
		src="https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/hello-md.jpg" 
		alt="Letter D in MidJourney" 
		width="800" 
		height="600">
</picture>

So, as you can see the first frame seems to have something resembling the word "Hello" but the rest are either unreadable or missing letters, so we can see already it's struggling with text in these images.

Ok, so lets try something else, lets try "Steve Jones" - a common enough sounding name (well if you're from the UK anyhow!) - lets see what we get:

<picture>
		<source 
		srcset="https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/text-steve-jones-sm.avif 320w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/text-steve-jones-md.avif 800w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/text-steve-jones-lg.avif 1200w" type="image/avif">
		<source 
		srcset="https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/text-steve-jones-sm.webp 320w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/text-steve-jones-md.webp 800w,
		https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/text-steve-jones-lg.webp 1200w" type="image/webp">
		<img 
		className="shadow-lg mx-auto" 
		src="https://cdn.3dnames.co/blog/why-ai-sucks-at-text-in-images/text-steve-jones-md.jpg" 
		alt="Letter D in MidJourney" 
		width="800" 
		height="600">
</picture>


Again, we can see that it's kind of resembling the text, but it's not really readable, and it's missing letters.

## Whats going on?

So why are the images above pretty amazing looking as long as you disregard the spelling? I mean I love the lighting, the 3D Effects are just awesome and the quality and colors are great, but just what the hell is going on with that spelling? 

Well, the answer is that the A.I. is not really understanding the text, it's just seeing it as a bunch of pixels, and it's trying to recreate those pixels in the image. 

Imagine you had a (very horrible) experiment where you raised 5 children from infants, and you taught them how to paint, sculpt and draw, but you never taught them how to read or write. I'm sure they could all be excellent artists, and if you asked them to draw a portrait, or Landscape they would impress you with their awesome skills, but if you asked them to draw you a painting that had some words in it, they would probably struggle. To them the words and letters are just a combination of shapes, and they don't understand the meaning of them.

This is also true for the A.I. image generators we see right now, they have only been trained using hundreds of thousands of normal types of images, i.e. cars, animals, objects, actions, colors etc. And although they are now mind-blowing at creating these images, they have not had the training at reading another few billion images containing the same type of objects plus text!

So the text they are trying to add is an approximation of what they think it should be... hence why we get the results we see above.

## How can we fix this?

So what did we do at 3D Names to help the A.I. understand text? Well, we actually ignore the fact that the A.I. is bad at text, but we take advantage of the fact that it's really amazing at creating images, and we combine the two.

That's why on our image generator tool we get you to first create the text you want to use, edit the font etc, and then once you're happy with it we then instruct our A.I. tool to focus on drawing around the text mask we have given it! 

As you can see the results are pretty amazing, and we are able to get the A.I. to create some really cool looking images, and the best part is that the text is readable 99% of the time! The only time it's not readable is when the text is too small, or the font is too thin, or if you try and ask the A.I. to do something that is just way to complicated but we are working on improving this all the time.

Here are some examples of the images we have created using this method:


![3DNames Image Generator](https://cdn.3dnames.co/tmp/promote-3d-text/landscape/CREATE.webp)

![3DNames Image Generator](https://cdn.3dnames.co/tmp/promote-3d-text/landscape/ANY.webp)

![3DNames Image Generator](https://cdn.3dnames.co/tmp/promote-3d-text/landscape/TEXT.webp)

![3DNames Image Generator](https://cdn.3dnames.co/tmp/promote-3d-text/landscape/YOU.webp)

![3DNames Image Generator](https://cdn.3dnames.co/tmp/promote-3d-text/landscape/WANT.webp)

![3DNames Image Generator](https://cdn.3dnames.co/tmp/promote-3d-text/landscape/WITH.webp)

![3DNames Image Generator](https://cdn.3dnames.co/tmp/promote-3d-text/landscape/AI-POWERED.webp)

![3DNames Image Generator](https://cdn.3dnames.co/tmp/promote-3d-text/landscape/3DNAMES.webp)



Why A.I. Sucks at Text in images

## Part 1 - Enter ThreeJS

How do you generate 3D in a browser - well you can ultimately make use of what is called WebGL, this is the technology that lets your browser talk directly to your graphics card (i.e. the GPU), and allows the millions of pixels to be manipulated by it. However, WebGL is extremely powerful, but also is extremely complicated. 

Luckily a guy who goes by the codename <a href="https://twitter.com/mrdoob">mrdoob</a> started writing an amazing JavaScript library called ThreeJS, first launched in April 2010 and has been growing ever since. It is a library that allows you to create and display animated 3D computer graphics in a web browser using the WebGL API. 

Lets take a look at the following VanillaJS & ThreeJS code that lets us have a red wireframe cube in the middle of a the screen and a camera that lets us rotate around the cube:

```js
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

// Cursor
const mouse = {
    x:0,y:0
}
window.addEventListener('mousemove', (event) =>{
    mouse.x = (event.clientX / sizes.width - 0.5) 
    mouse.y = -(event.clientY / sizes.height - 0.5)
})

/**
 * Base
 */
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Sizes
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}
window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()
    renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
})

// Scene
const scene = new THREE.Scene()

// Object
const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1, 5, 5, 5),
    new THREE.MeshBasicMaterial({ 
        color: 0xff0000,
        wireframe: true
    })
)
scene.add(mesh)

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
const aspectRatio = sizes.width / sizes.height, AR = aspectRatio;
camera.position.z = 3
camera.lookAt(mesh.position)
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.update(); 
controls.enableDamping = true;

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))


// Animate
const clock = new THREE.Clock()

const tick = () =>
{
    // Update controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()
```

...as you can see from the example above, it's a lot of plain vanilla JS. If like me you are used to a framework for your JavaScript (and that framework happens to be React) then you are in for a treat with the next part... 

## Part 2 - Introducing React Fiber

React Fiber is a layer on top of ThreeJS that allows you to use the power/simplicity of React and JSX to create your 3D scenes. Lets take a look at the same example as above, but this time using React Fiber (Note: We are also using NextJS in this example):

```js
import type { NextPage } from 'next'
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei';

// Make a box function
const Box = () => <mesh position={[0, 0, 0]} scale={20} >
        <boxGeometry args={[1, 1, 1, 5, 5, 5]}  />
        <meshStandardMaterial color={'red'} wireframe={true}/>
</mesh>

// Render the page
const BasicBoxPage: NextPage = (props: any) => <div className="fixed top-0 left-0 right-0 bottom-0 bg-gray-900 text-gray-400 py-40 text-center text-2xl">
    <Canvas camera={{ position: [0, 0, 3] }}>
        <ambientLight intensity={0.5} />
        <Box  />
        <OrbitControls  autoRotate={true} maxDistance={200} minDistance={30} />
    </Canvas>
 </div>

export default BasicBoxPage
```

You can take a look at the above page here <a href="/blogs/how-we-made-a-realtime-3d-text-generator" target="_blank">Simple Red Cube using React Three Fiber</a>

...as you can see, by using React Fiber we can now use the power of JSX to create our 3D scene and reduce the amount of code we have to write. Now, it has top be said, that under the hood we are actually using more JavaScript overall that our VanillaJS version, so technically it not as performant as our VanillaJS version, but it is a lot easier to write and maintain. 


Coming soon... Check back here soon and I'll be writing about how you can add text to a scene, as well as adding in a simple form to edit the text.

How we made a realtime 3D Text Generator.


## Before we start

In this tutorial we are going to use 2 bit's of software. The first is [Adobe After Effects](https://clk.tradedoubler.com/click?p=265883&a=3266343&g=22838626)  for the video effects, plus 
a plugin for After Effects called **Element 3D** which is available via [videocopilot.net](https://www.videocopilot.net/products/element2/) - you will need both of these in order to be able to edit your own videos.

## What we'll be making:

<youtube id="6Do8z-PG29k"></youtube>

## Getting the template file

In this tutorial we are going to make use of an After Effects Template called <a href="https://1.envato.market/headphonesvideo" rel="nofollow sponsored">Headphones Logo</a> - so purchase yourself a copy of this template file, download it and open up one of the project files in After Effects (In my case I opened up the "Headphones_Logo(CC2015-2017).aep" file)

## Re-linking files

When you open it up for the first time, and depending on your OS it may ask you to re-link some of the 3D Object files. 

![Relinking files](https://cdn.3dnames.co/blog/create-vid-1.0-lg.jpg)

This is because Element 3D needs absolute paths, and if the file was made on a Windows machine or a user specific location then it will need re-mapping to your own location (I'm hoping they fix this very annoying bug in a future update!) - to do this, you need to select the Element 3D Layer, then press the "Scene Setup" button in the Effects and Presets panel - see image above.

![Relinking files promot](https://cdn.3dnames.co/blog/create-vid-2.0.jpg)

You will either be prompter in which case press Yes, or you will need to navigate within the Element 3D Menu to **File** --> **ReLink Scene Files** - this will bring up a panel like below, and from here you need to choose the location of your download template file was unzipped to, and choose the folder "3D_models":

![Relinking files menu](https://cdn.3dnames.co/blog/create-vid-3.0-lg.jpg)

Once you hit ok, and close the element 3D Panel, you should be able to return into After Effects and if you hide the layer called "Instructions" you should now see the Headphones Model has appeared into the scene:

![Headphones Model](https://cdn.3dnames.co/blog/create-vid-4.0-lg.jpg)

## Editing the Text

Now the fun part, lets edit the text and render our video. Find the layer called "YOUR TEXT" and double click it, this will alow you to edit the text at the top left which is a special layer that is hidden from our final render but visible here, this is linked to our 3D Custom Layer, so when we edit it it will update the red 3D Text above the headphones:

![Editing Text](https://cdn.3dnames.co/blog/create-vid-5.0-lg.jpg)

Here's my update after adding "Joes Video": 

![Updated Text](https://cdn.3dnames.co/blog/create-vid-6.0-lg.jpg)

Next lets add the composition to our Render Queue from the top menu: 

![Render Menu](https://cdn.3dnames.co/blog/create-vid-7.0-lg.jpg)

Now, when we press the render button our video will start rendering and create our final output file. Hint: run this through Adobe Media Encoder to compress it after your done!

![Render Menu](https://cdn.3dnames.co/blog/create-vid-8.0-lg.jpg)

## More Videos:

Take a look at our [Videos Section](/videos), or Browse the <a href="https://1.envato.market/mgy5v1" rel="nofollow sponsored">Videohive.com 3D video section</a> for loads more!

Create your own Customized 3D Video


## Method 1 - using this website

So, it's pretty obvious to say this, but if you want to create a 3D Names then, duh, of course the first place you'll try is the very website you're reading this blog on! 

We have generated millions of wallpapers already for you, and if you go to the [search page](/search/) and search for your first name, then hopefully from the 100,000 names available your name will give you some cool wallpapers back!

...however, if you're name is too unique and we don't have it, then here is the next solution:

## Method 2 - using PSD Files

Go take a look at <a href="https://1.envato.market/c/3427064/275988/4415" rel="nofollow sponsored">the Envato Market</a> - here you'll find hundreds, no sorry, thousands of designs to choose from. Many of which are PSD files that are editable within Adobe Photoshop

In this tutorial we are going to make use of a PSD Template called <a href="https://1.envato.market/orangetoon" rel="nofollow sponsored">Cartoon Photoshop Text Effects - Comic Styles</a>  - this template is a PhotoShop PSD file that you can purchase and edit within your own software. 

<a href="https://1.envato.market/orangetoon" rel="nofollow sponsored">
    <picture>
        <source srcset="https://cdn.3dnames.co/blog/create-your-own-cartoon-style-sm.avif 320w,https://cdn.3dnames.co/blog/create-your-own-cartoon-style-md.avif 800w,https://cdn.3dnames.co/blog/create-your-own-cartoon-style-lg.avif 1200w" type="image/avif">
        <source srcset="https://cdn.3dnames.co/blog/create-your-own-cartoon-style-sm.webp 320w,https://cdn.3dnames.co/blog/create-your-own-cartoon-style-md.webp 800w,https://cdn.3dnames.co/blog/create-your-own-cartoon-style-lg.webp 1200w" type="image/webp">
        <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/blog/create-your-own-cartoon-style-md.jpg" alt="Cartoon Style 3D Name from Envato" width="800" height="329">
    </picture>
</a> 

So first download your file from Envato once you've purchased it, then next up we want to get hold of the font used. 

This template is using a font called "Luckiest Guy" - and we are a lucky guy (or girl) because we can get this font for free from [Google fonts - Luckiest Guy](https://fonts.google.com/specimen/Luckiest+Guy) - so download this font and install it onto yur system (Otherwise we'll get warnings when we go to edit it the PSD)

Back at our main download file, Unzip it, as this will contain our PSD files we need to use. There will be 5 PSD files along with 5 jpg files. Lets open the file called **364.psd**:

![Open our file in Photoshop](https://cdn.3dnames.co/blog/create-1.1.jpg)

If you look in the Layers section, you'll notice there is a layer called "Your Text Here":

![Choose Layer](https://cdn.3dnames.co/blog/create-2.0.jpg)

Double click the icon and it will open the Smart Object within a new tab, and from here you can edit the text object, feel free to type whatever you want, and you can resize the text or re-position it to where ever you feel works best:

![Edit the text](https://cdn.3dnames.co/blog/create-2.5.jpg)

Now in order to get the new text updated within the template file we'll need to save this smart object, so go to File -> Save - and depending on your machine this may take a few seconds or a few minutes: 

![Save smart object](https://cdn.3dnames.co/blog/create-3.0.jpg)

Once it's saved, go back to your first tab and hey presto, you should now see your updated Photoshop file with your own text added! 

![Our updated 3dname file!](https://cdn.3dnames.co/blog/create-4.0.jpg)

...and that's it! You are now able to create your own 3D Names with absolute freedom to edit the design to your pleasing!

Enjoy!


Creating your own Custom 3D Name Wallpaper


## Technologies change

Here at 3D Names, the website has been running since around 2010 (it actually goes back to 2005, but that's another story altogether!) at the time the web was much much different place, it was very common to build a website entirely using HTML tables, and pages written in ASP, PHP or possibly even just plain old .html files were standard practice. Websites needed to be quick, but it was quite easy for them to get bloated and slow quickly as more and more was added to them. 

Today it's very different story, with the advent of Mobile devices taking the lead in traffic % shares there are now many new technologies out there that can help us developers create much better performing websites using state of the art software and frameworks.

Image &amp; Code optimizations have always been essential (arguably more so in the past) but today with the mobile fist approach to website design there is once again a need to really focus on page speeds not only to make your website better for customers but also to please the many web checking tools out there.

### V1.00 to V5.00

The first 5 versions of this website were built with traditional PHP, HTML, jQuery and CSS, all hand-coded at first and then eventually shifting towards Bootstrap. 

The domains used to be hosted on **3dnames.net** &amp; **3dnamewallpapers.com** - you can still see how these looked using the Way Back Machine for [3dnames.net in 2010](https://web.archive.org/web/20101026205813/https://www.3dnames.net/) and also for [3dnamewallpapers.com in 2012](https://web.archive.org/web/20120121210448/http://www.3dnamewallpapers.com/) 😬 
 
### V6.00

The last update of 3D Names I created was built using [React Static](https://github.com/react-static/react-static) - this neat framework allowed me to essentially build a React based website, but each page served as a landing page to launch React from. This allowed the 3D Names website to be "pre-built" like a standard React App but with 5.0 million individual landing pages so perfect for page speed as well as SEO.

Interesting fact - it only took about 15 minutes to build all 5.0 million pages on an 8 core Macbook pro!

Unfortunately the draw back was that any updates to the site required me to re-build all 5.0 million pages each time... which took a few hours. Secondly, there were a few limitations of the React Static framework, and with no more versions being released it was time to say Goodbye! 😥 😭 I loved that framework! Anyhow, even though it's sad to move away from it, I did want to say a big thanks to [Tanner Linsley](https://github.com/tannerlinsley) for your amazing work you did with it!

### V7.00

Version 7.00 was an experimental version I started to build using [https://svelte.dev/](https://svelte.dev/) - I find this framework totally amazing, but alas I realized I wasn't going to get up to speed with it quickly enough for me to be able to do this next update so had to skip this version for now... maybe V9.00!

### V8.00 

So, this is where we are with the latest version 8.00 of the website... and as mentioned above React Static was great but with it no longer being supported I had to switch to something else. So I choose to use NextJS &amp; Tailwind CSS to build this time around.

NextJS is an exceptionally good framework, created by [Vercel](https://vercel.com/), it's built on top of React which is now a hugely popular framework itself, and has an enormous amount of developer and community support. The main problem with React on it's own is that from an SEO perspective it's useless as technically there is only one single page. NextJS solves this by making each of your "pages" actual .html end points that act as the loader for the React application. This means when our website is indexed by search engines there are pages that can all be crawled by our server just like a traditional web server, but as soon as the first page has loaded the user is then browsing the rest of the site with the speed and snappiness of a React Website.

It also supports ServerSide rendering as well, meaning I could serve the Search and Preview pages on the fly, by doing an API lookup to my AWS stored files. So updates are extremely quick now (as I don;'t have to pre-build all 5.0million pages)

If you are a React developer and you haven't yet used NextJS then I strongly recommend you take a look at it by going to the Vercel official website [https://nextjs.org/](https://nextjs.org/) 

## Tailwind CSS

My favorite go to CSS framework in the past was always Bootstrap, but recently I heard a lot of talk about [Tailwind CSS](https://tailwindcss.com/) so had to check it out and give it a go. 
It's certainly a bit weird to get used to at first and if you're a big fan of writing your own CSS instead of using "out of the box" ready made CSS then it might not be for you,
but if you're a developer who understand CSS fairly well but would like a tool that speeds up your development then this Framework is just awesome. 

The idea is that you don't (or very rarely) touch your CSS files yourself as there are literally thousands or pre-built classes that you simply write into your HTML code,
for example, if you need to add a purple button, with white text that turns dark purple when you hover over it? Then you simply write this HTML:

```html
<div className="bg-3dnames-500 hover:bg-3dnames-700
text-white px-2 py-2 text-center w-48 
border-2 border-3dnames-700 rounded-md cursor-pointer">Click Me</div>
```

<div className="bg-3dnames-500 hover:bg-3dnames-700
text-white px-2 py-2 text-center w-48 
border-2 border-3dnames-700 rounded-md cursor-pointer">Click Me</div>

Then when it comes to building your website for production, the Tailwind compiler will simply omit the unused classes out of your production code leaving you with a tiny CSS footprint.

I'm now a huge fan of it, and am now using it for all my new projects!

Are there any downsides? Yes, arguably you may end up knowing less about CSS itself and only know TailwindCSS, and secondly your HTML doesn't look as tidy as the traditional approach.

## Vercel Hosting

I usually host my Website directly within AWS CloudFront or Amplify and then stick CloudFlare on top, but this time around I'm testing the water with hosting the Front end site directly with Vercels free hosting! I'll report back soon once it's been running for a few weeks or months! 

## Lighthouse scores

With this latest build of the 3D Names website, I wanted to focus on making sure the performance was kept as high as possible, NextJS helped me to reduce my JavaScript bundle size especially with its fantastic out-of-the-box code splitting, and using Tailwind CSS also meant my websites CSS remained nice and small as well. 

The Lighthouse benchmark tool built into Chrome is super useful in helping you to identify any areas in your website that need attention, and once you start to use NextJS and Tailwind you almost become a bit obsessive, and although it's not the only testing you should be doing, it's a neat and convenient place to start. 

Anyhow, by switching to NextJS, making careful use of TailwindCSS, and using correctly sized images and the HTML `<picture>` tag along with .webp and .avif images where possible I was able to get this website score up nice and high again:


<blogimage id="3dnames-lighthouse-score" alt="3D Names Lighthouse Scrore!"></blogimage>


#### Grrrrr! Google Adsense

Annoyingly... those scores above were given a bit of a nose bleed as soon as I enabled Google Adsense! Performance dropped down a bit as did the accessability:

<picture>
        <source srcset="https://cdn.3dnames.co/blog/lighthouse-after-adding-adsense-2.avif" type="image/avif">
        <source srcset="https://cdn.3dnames.co/blog/lighthouse-after-adding-adsense-2.webp" type="image/webp">
        <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/blog/lighthouse-after-adding-adsense-2.jpg" alt="Lighthouse Score After Enabling Adsense" width="500">
</picture>

...I guess some of those Advert publishers are getting a bit slack these days!

## Verdict:

By using NextJS and TailwindCSS - the latest 3D Names Website has been given a perfect balance of Speed &amp; Ease of Editing. Hosting with Vercel is simply amazing for a free to use service. I feel like my now 16 year old website might now have a fresh new pair of legs to see it going for a few extra years! That is until GPT-4 comes out and takes over the internet!



3D Names Website V8.00


## Foreword by the developer:

Hello, I'm Joe, and I develop Websites and Apps. As a developer you often have older projects that don't work out for whatever reason, and back in 2010 I started working on a 
Wordsearch based game, needless to say it never worked out, so last year (in 2021) I decided I'd start from scratch &amp; rewrite this game again, the result is this [www.superwordsearch.com](https://www.superwordsearch.com) - a super simple game where you find the words and guess the category!


## App Store Links:

The game is available for both iOS and Android, for iPhones and iPads you can find the game here: [Super Wordsearch on the Apple App Store](https://apps.apple.com/gb/app/super-wordsearch/id1556320007) and here: [Super Wordsearch on the Google Play Store](https://play.google.com/store/apps/details?id=com.tinysoft.superwordsearch&hl=en_GB&gl=US)

The game is free to download and play, but you can buy or earn hints through rewarded adverts

## The Game:

If you'd like to jump straight into a demo game, you can play a slimmed down version in your browser here: 🔗 <a href="https://game.superwordsearch.com" target="_blank">game.superwordsearch.com</a>

The idea behind this game is extremely simple, Pick a Difficulty, then choose a level. Next you need to try and find all of the words within the grid, once you've found all the words you need to figure out the category that they belong to:

<a href="https://game.superwordsearch.com" target="_blank">
<blogimage id="supws-game-1" alt="Super Wordsearch Sceenshot"></blogimage>
</a>

Now it's pretty obvious in the above Example that the words "TRACTOR, COW, HORSE, SHEEP, CHICKEN" (and PIG still yet to be found) all belong the the category **FARM**

The web demo itself only has 12 easy playable levels, but the Apple and Android apps have over 300 levels to play. Split into 4 difficulties: **Easy, Medium, Hard** and **Extreme**

A word of warning the Extreme levels are really really tough! Only the most avid of Word Search fans will be able to guess them! 

So please go and take a look now, the App is completely free to download and play! I've included in App Purchases and rewarded Ads in order for you to be able to buy or earn hints to help you through the levels.

<a href="https://apps.apple.com/us/app/super-wordsearch/id1556320007">
    <img alt="Download on the App Store" src="https://www.superwordsearch.com/assets/img/app-store-badge-apple.png" width="300"/> 
</a>

<a class="google" href="https://play.google.com/store/apps/details?id=com.tinysoft.superwordsearch">
    <img alt="Get it on Google Play" src="https://www.superwordsearch.com/assets/img/app-store-badge-google.png" width="300"/>
</a>

Super WordSearch Game


## Brand new 3D Names Website

We hope you like our brand spanking new website! We've given it a new facelift and tried to make it super fast for the best browsing experience possible!

### The technical details:

The 3D Names website has been going since 2006, back then it was first built using really old Classic ASP, along the way it got converted over to using PHP/MySQL, and today it's now sat within the cloud using AWS Amplify & CloudFront and with a sprinkle of CloudFlare on top!

The frontend has also been given a new facelift, and we have made use of React to try and deliver the site to end users with as quick page loading times as possible. By careful use of Pre-fetching we have attempted to make page loading times almost feel instant, even on mobile devices

Not to forget SEO, we have also made use of a fantastic library made by Tanner Linsley @ [nozzle.io](https://nozzle.io/) called React Static - which has allowed us to "pre-render" our nearly 2 million pages

One problem we faced when deciding to use something like React that although it gives amazing page loading speeds, it is ultimately bad for SEO because technically it's an SPA (single page application) meaning any search engine only sees a single /index.html file

React Static helped us to fix this by letting us create 2 million end points in order to load our SPA from, so it works great for both SEO and for a lightening quick user experience!

[>> Try out our new website now, search for your name](https://www.3dnames.co/search) 

[>> Read more about React Static](https://github.com/react-static/react-static)




Website V7.00


## Checkout our new App now!

[See here for links on how to download](https://www.3dnames.co/download) 

Along with a brand new, super fast website, we've also been hard at work and built a new app for you to download and have a play with.

Our library of 3D Name wallpapers has recently been updated with nearly 2 million images for you to search through, plus we've added some Ultra high resolution wallpapers that are 6,000 x 6,000 pixels in size

With over 100,000 names to search through we are bound to have a wallpaper for you (Statistically anyhow!) - using our latest app is how you can download the images after watching a small advert.

[See our download page for links on how to download](https://www.3dnames.co/download) 


Branch new App


## Sooooo many wallpapers!

[Click here to view all 3d Names](https://www.3dnames.co/all-names)

Yep that's right there are now 100,000+ names to search from on our app and website. We've been absolutely devastating our CPU's in order to produce as many new wallpapers as possible for you to download for free!

So yeah, there are 100,000+ names, and 9 new styles added - oh and did we mention you can download them for free using our mobile App?

[See results for "Joe" here](https://www.3dnames.co/search/joe/)

![Searhc Results Page](https://cdn.3dnames.co/blog/square/new-styles-added.avif)

Now with 100,000+ names


## Timelpase 2015 (4k)

As well as making peoples names into 3D Wallpapers I also do a bit of Photography... and here is my latest Timelapse Video! I hope you enjoy it! it was filmed when I was out in New Zealand for 2 months with my girlfriend (at the time). We visited both the North and South Islands trying to see as many amazing places as possible. If you have not yet been to New Zealand then I would 100% recommend that you put it on your bucket list as it is a truly amazing place!

This was filmed using my Canon 5D MkIII camera with a 24mm-70mm f2.8 and 14mm f2.8 Lens. Movement was made using a collapsible slider with in built motor, which was fairly flimsy but good for traveling with.

Please make sure you turn the quality/resolution up to 2160p, and turn the volume up, also sounds great wearing a pair of headphones!

Update 27th Sep 2021 - So far this video has had around 33,000 plays, which for a hobby video I'm quite happy with the results so far.

<youtube id="L_WJFiEp2GY"></youtube>

[View Video Directly on Youtube here](https://www.youtube.com/watch?v=L_WJFiEp2GY)


Timelpase 2015


## Welcome aboard Danbo!

Welcome to the 3D Names Universe Danbo! With your cute little boxman figure you are so photogenic! Danbo is a comic book figurine from 2006 and is available to buy as a plastic figure.

Using the Danbo figurine I purchased from Amazon I have been taking him out for many Photoshoots and created some awesome new 3D names available for you to put your own name on!

There are currently just over 60,000 names added with the Danbo figure, please send me a message if you'd like to have any more names added?

[Search your name now and see if we have Danbo as a 3D Name!](https://www.3dnames.co/search/)


Hello Danbo


## New Names Added (Old article)

PLEASE NOTE - This old blog article is now out of date.

Over 5,000 new names were added today. I have finally found time to go through the backlog of the names that need rendering out, and my last render machine had blown up so wasn't able to keep up with the demand!

Anyhow... I've put the most popular name requests list of these names below, so please check to see if your name is on the list! If not then please come and knock on my door with a 6 pack of beers and I'll be sure to put you to the top of the queue! ;-)

[See 2021 Update where 100,000 names have been added](/blogs/new-names-2021)


New Names Added (2014 article)


## New Website Launched (Old article)

**PLEASE NOTE - This blog article is now out of date, and a new website has replaced the 2014 version.**

Today I launched the new 3D Names website... it's fully responsive and should work on all devices including your mobile phone, tablet, laptop and desktop computer! I have used both Bootstrap and Unify theme from www.wrapbootstrap.com, as using a pre built theme really helps to speed up development considerably (Why re-invent the wheel!)

This is the third build I've done in the last year, and I'm hoping I have finally found the right balance now and can finally settle down to a design that will last at least another 4 or so years! 

This websites new front end along with an updated backend should be enough to squeeze out more life from my website that has been running for the last 8 years. It's served via a LAMP stack so Linux server, PHP code base and MySQL for any database. 

I will be keeping a close eye on how it performs with the new website design! Fingers crossed!

**2021 Edit** This version of 3D Names ended up actually lasting 7 years in the end, it was eventually replaced by a React Static version in 2021, and now with a NextJS version in 2022. 

3D Names Blogs