ChatGPT A-Frame Rounded Corner Plane

This is my very first experiment where I started using GPT-4 to create A-Frame custom components.

This experiment included:

• Going through a first attempt by using a generic prompt
• Improving the generated output by submitting subsequent prompts
• Analysing the code and the steps that led to the final wanted outcome
• Engineering a final prompt to consistently achieve the wanted result on the first output

The Making Of

First Attempt

In the images below, you can see the generic prompt I gave GPT-4 to get started with this experiment, the resulting rounded-plane component generated on the first output, and all the subsequent iterations.

This is not the solution I wanted, so I simply gave GPT-4 instructions not to follow this approach.

As I noticed that GPT-4 was trying to use a transparent texture in this second version of the component, I stopped the process and gave ChatGPT more accurate instructions on how to proceed.

This time, the generated output gave me the result I wanted.

Prompt Engineering

This is the part of the experiment where things got quite interesting.

My first idea was to put the whole prompt sequence together with the (false) expectation that this would lead to the same result and, most importantly, on the first output.

So I tried this naive prompt in a new chat: "Create an A-Frame component that applies rounded corners to a plane primitive. Don't use any shaders or transparent textures. Modify the geometry of the plane instead."

Pretty straightforward, right? No.

My attempt to get the wanted result on the first output failed, and every time I used this prompt in new/different chats I could observe GPT-4 unleash its creativity to generate the plane in different ways.

During one of those tests, the object's origin wasn't even at its center.

Not to mention the times when ChatGPT was randomly adding to the A-Frame scene entities I had never asked for, such as lights or the camera (the latter as an entity using ECS syntax but missing the wasd-controls component).

Then, on some occasions, GPT-4 was including in the custom component important parts like the update() and remove() Lifecycle Handlers. On others, instead, it wasn't anymore.

So I started searching for the solution in the output that had generated the wanted result.

This made me realise that not only I had to be specific, but also clear.

Therefore I started crafting a prompt that would give GPT-4 instructions on what to do AND how to get there.

Finally, I could open a new chat, use the prompt, and consistently get the result I wanted on the first output!

It's worth noting that, during the subsequent tests I ran to validate the prompt, I observed ChatGPT using some coding style variants, but this also happens between different developers in real life. Fair enough.

In the below image, you can see my engineered prompt and the custom component generated by GPT-4.