
**This prototype is a webgl application that users navigate architectural project and visits all floors**

## Technical Aspects

- Webgl 3D Application(Playcanvas)

This protoype lets users
- navigate architectural project
- visit all floors
- see sold & unsold floors
- see sample interior

All the 3D modelling process done by me in 3ds max.
All coding things done by me.
Works on all devices and platforms easily without downloading.

This prototype has potential to be a scalable project.

Here is some screens :

<Image src="/projects/archviz/aw1.jpg" alt="archviz" width={1200} height={674} />
<Image src="/projects/archviz/aw2.jpg" alt="archviz" width={1200} height={674} />
<Image src="/projects/archviz/aw3.jpg" alt="archviz" width={1200} height={674} />

Here is a video : 

<blockquote className="twitter-tweet"><p lang="en" dir="ltr">Archviz Webgl prototype project i did some time ago in playcanvas.(150 drawcalls)<a href="https://twitter.com/hashtag/playcanvas?src=hash&amp;ref_src=twsrc%5Etfw">#playcanvas</a> <a href="https://twitter.com/hashtag/webgl?src=hash&amp;ref_src=twsrc%5Etfw">#webgl</a> <a href="https://twitter.com/hashtag/archviz?src=hash&amp;ref_src=twsrc%5Etfw">#archviz</a> <a href="https://twitter.com/hashtag/gamedev?src=hash&amp;ref_src=twsrc%5Etfw">#gamedev</a> <a href="https://t.co/eovisHeFTD">pic.twitter.com/eovisHeFTD</a></p>&mdash; Eser (@eser_cetiner) <a href="https://twitter.com/eser_cetiner/status/1334424450897481729?ref_src=twsrc%5Etfw">December 3, 2020</a></blockquote> 





**Coolheadz is Platform app that lets users create their 3D coolheadz , hare & render hi-res images for further use cases .Project size is Large.Here are details...**

## Technical Aspects

Coolheadz platform is fully developped by me including 3D models.There are 3 main parts.

- Platform (Nextjs)
- 3D Avatar Editor (Webgl,Playcanvas)
- Backend (Supabase)

In coolheadz platform , i used magic link auth which is avaliable on supabase.The main backend is created in supabase with some
custom functions and web app created in react,nextjs.

3D Avatar editor is created in playcanvas and adopted to the platform.

3D models done in Blender

<Warning type="info">
    The most challenging part of the 3D editor is , rendering hi-res screenshot in fixed aspect-ratio
    that works on all devices.
</Warning> 

Coolheadz will be live on late 2022 or begining of 2023.And maybe nft tech will be implemented so users mint their coolheadz as nft.😀

Here is a short video from my twitter:

<blockquote className="twitter-tweet">
<p lang="en" dir="ltr">Coding Coolheadz platform.Users can create 3D coolheadz &amp; render as hi-res image for further usage😉webgl fully integrated to nextjs<a href="https://twitter.com/hashtag/playcanvas?src=hash&amp;ref_src=twsrc%5Etfw">#playcanvas</a> <a href="https://twitter.com/hashtag/nextjs?src=hash&amp;ref_src=twsrc%5Etfw">#nextjs</a> <a href="https://twitter.com/hashtag/webgl?src=hash&amp;ref_src=twsrc%5Etfw">#webgl</a> <a href="https://twitter.com/hashtag/react?src=hash&amp;ref_src=twsrc%5Etfw">#react</a> <a href="https://twitter.com/hashtag/javascript?src=hash&amp;ref_src=twsrc%5Etfw">#javascript</a> <a href="https://twitter.com/hashtag/3dart?src=hash&amp;ref_src=twsrc%5Etfw">#3dart</a> <a href="https://twitter.com/hashtag/NFTs?src=hash&amp;ref_src=twsrc%5Etfw">#NFTs</a> <a href="https://t.co/D0Af1XVF3S">pic.twitter.com/D0Af1XVF3S</a></p>&mdash; Eser (@eser_cetiner) <a href="https://twitter.com/eser_cetiner/status/1480190581729107975?ref_src=twsrc%5Etfw">January 9, 2022</a></blockquote> 

Here are screens:

<Image src="/projects/coolheadz/1.JPG" alt="coolheadz" width={1200} height={674} />
<Image src="/projects/coolheadz/2.JPG" alt="coolheadz" width={1200} height={674} />
<Image src="/projects/coolheadz/3.JPG" alt="coolheadz" width={1200} height={674} />
<Image src="/projects/coolheadz/4.JPG" alt="coolheadz" width={1200} height={674} />
<Image src="/projects/coolheadz/5.JPG" alt="coolheadz" width={1200} height={674} />
<Image src="/projects/coolheadz/6.JPG" alt="coolheadz" width={1200} height={674} />
<Image src="/projects/coolheadz/7.JPG" alt="coolheadz" width={1200} height={674} />
<Image src="/projects/coolheadz/8.JPG" alt="coolheadz" width={1200} height={674} />
<Image src="/projects/coolheadz/9.JPG" alt="coolheadz" width={1200} height={674} />


**[Iventyo](https://iventyo.com) is full scalable & multi-tenant 3D webgl application that has own dashboard , dynamic web sites & 3D Editors.So this is the biggest project developped by me.Here are details...**

## Technical Aspects

[Iventyo](https://iventyo.com) project has 5 main parts.And all parts have some seperate projects actually

- Dashboard (Angular)
    - 3D Hall Editor (Webgl integrated)
    - 3D Stand Editor (Webgl integrated)
    - Blog Editor
    - Survey Editor
    - Live video streaming
    - Live Video Meeting system
    - Live messaging (Signal-R)
    - Management Systems
    - Stats Systems
    - And much more...
- 3D Webgl Apllication (Webgl,javascript)
- Dynamically created landing page for Expos (nextjs ISR)  
- Web based live meeting App (Nextjs,Webrtc)
- Backend (.Net Core EF)

<Warning type="info">
 As you can see, Iventyo has many applications that a frontend developer will develop throughout his/her career.😀
</Warning>

[Iventyo](https://iventyo.com) is very challenging project.Cause it's multi discipliner workflow.Besides the coding part , all 3D models modelled
by me in 3ds Max and adopted to webgl.By the way I used Playcanvas for all webgl applications.Playcanvas is very proffesional
and they have great editors.

Thanks fow webgl and javascript , Iventyo works on all platforms , browsers & devices.I optimized whole 3D process and developped some custom workflows.
So technically , every 3D stand has only 2-3 drawcalls so on maximum , one scene has only 85-90 drawcalls and max 100 MB Vram.Very optimized😀

## General Description

Basically, [Iventyo](https://iventyo.com) is an application where every organizer can create their own 3D show, arrange halls and stands in 3D and share them with everyone from the automatically generated website.

Stand owners can also design their own stands in 3D and upload many content within certain permissions.

Here are some screens

<Image src="/projects/iventyo/sc1.JPG" alt="iventyo" width={1200} height={674} />
<Image src="/projects/iventyo/sc2.JPG" alt="iventyo" width={1200} height={674} />
<Image src="/projects/iventyo/sc3.JPG" alt="iventyo" width={1200} height={674} />
<Image src="/projects/iventyo/sc4.JPG" alt="iventyo" width={1200} height={674} />
<Image src="/projects/iventyo/sc5.JPG" alt="iventyo" width={1200} height={674} />
<Image src="/projects/iventyo/sc6.JPG" alt="iventyo" width={1200} height={674} />
<Image src="/projects/iventyo/sc7.JPG" alt="iventyo" width={1200} height={674} />
<Image src="/projects/iventyo/sc8.JPG" alt="iventyo" width={1200} height={674} />
<Image src="/projects/iventyo/sc9.JPG" alt="iventyo" width={1200} height={674} />
<Image src="/projects/iventyo/sc10.JPG" alt="iventyo" width={1200} height={674} />

I hope [Iventyo](https://iventyo.com) project long lives.And it will become some kind of platform application.





**Webgl prototype that lets users visit custom nft gallery**

## Technical Aspects

- Webgl application(Playcanvas)

This prototype can be adopted to custom projects or dynamic platforms as well.

Yo can visit the gallery in here:(For Best view click full screen button)

<div className="row" style={{ height: '700px' }}>
     
            <iframe
              id="frame"
    
              src="https://playcanv.as/p/NTg5qibG/"
              webkitallowfullscreen="true"
              mozallowfullscreen="true"
              allow="autoplay"
              allowFullScreen={true}
              allowvr=""
              scrolling="no"
              frameBorder="0"
              style={{ height: '450px',width:'100%' }}
              ></iframe>
 
        </div>


**[Tritail](https://tritail.com) is 3D webgl application that has own dashboard & 2D Shelf Editors.Project size is Large.Here are details...**

## Technical Aspects

[Tritail](https://tritail.com) project has 3 main parts

- Dashboard (Pure javascript)
    - 2D Shelf Editor
    - Interactive Ads Editor
    - Heatmap & Stats Module
    - And much more...
- 3D Webgl Apllication (Webgl,javascript)
- Backend (.Net Core EF)

<Warning type="info">
    Tritail name comes from 3D Retail(Tri-retail)
</Warning>

[Tritail](https://tritail.com) is also large sized project.On dashboard side ,there is 2D shelf Editor
which utilizes 2D product management on 3D shelfs.So here we have some kind of custom unwrapping algo.

All the things done by me except backend side.All 3D models modelled
by me in 3ds Max and adopted to webgl(Playcanvas).

So this user created shelfs transferred to 3D application seemlessly.When a user clicks a product
on any shelf , he/she gets the product detail from integrated supermarket API.

On the backend side , we mainly integrated actual supermarket API to our API.So 3D supermarket products
are updating automatically and only the updated datas shown.

<Warning type="info">
Another challenging part is heatmap creation & stats.All user interactions recorded to 
our DB instantly.So supermarket owner can see shelf heatmaps and stats for specific time.
</Warning>

Since we're in a 3D space , there are some modular games integrated to the project.So 
if some brand want to promote their products in 3D supermarket , these games can be adopted to
that brand.And brands also can give discount coupons to the customers. 

<Warning type="info">
The main accomplishement in Tritail project is custom 2D shelf editor.So 3D supermarket has only 100
drawcalls with thousands of products.This means , there is no need to run Tritail on powerfull devices
</Warning>

## General Description

Basically, [Tritail](https://tritail.com) is a 3D webgl Supermarket application that works
on all platforms , devices & browsers without downloading.Customers can buy products, play games,
earn discounts in 3D space.Supermarket owners can manage their 3D supermarket by dashboard.And
the main API can be integrated to any actual supermarket API.

All the products and product stickers generated dynamically.

Here are some screens

<Image src="/projects/tritail/d1.jpg" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/d2.jpg" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/d3.jpg" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/d5.jpg" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/d7.jpg" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/d8.jpg" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/d9.jpg" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/d10.jpg" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/dash1.png" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/dash2.png" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/dash6.png" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/dash7.png" alt="tritail" width={1200} height={674} />
<Image src="/projects/tritail/dash9.png" alt="tritail" width={1200} height={674} />


I see this project as a promising one. Tritail is now waiting for its investors.
I'm also considering a metaverse integration for Tritail in the future.


**[Zladron](https://zladron.com) is Nft project that introduces unique 3D Characterz and lately 3D interactive Universe that will have 3d landz and props.Here are details...**

## Technical Aspects

[Zladron](https://zladron.com) project has 2 main parts that developped by me.

- Landing page (Nextjs)
- 3D Nft Gallery (Webgl)

Zladron Nft project first phase includes a landing page and a 3D webgl Gallery.This is a small sized project.
All Zladron Nft Characters modelled by Zeze , al talented 3D artist in Blender.And all the coding things developped by me.

<Warning type="info">
    By the way you can buy Zladron Nfts by visiting Zladron website.
</Warning> 

On the second phase , if Zladron becomes succesfull , I will develop a 3D Universe that have lands , props & additional
characters.So this may be an exciting project in the future.

3D Nft Gallery also modelled by me.

Here is some characters

<Image src="/projects/zladron/nft_collection.jpg" alt="tritail" width={1200} height={674} />



**This is an inhouse survey system and dashboard.Produced surveys used in other application**

## Technical Aspects

Used Stack : 
- Pure Javascript & jquery
- Html
- CSS
- Parcel for bundler
- Bakcend : .Net Core EF

This dashboard created with pure javascript.😣One of my oldest projects.It was challenging for me.
Cause as you know , i had to implement all things from scratch.

For example ,  i implemented an API requester even for easy api requests
```JS
const baseApi = "http://18.192.-----:90";
export const apiInfos = {

    routes: {
        "postSurvey": baseApi + '/api/Surveys',
        "getAllSurveys": baseApi + '/api/Surveys/getAll',
        "getSingleSurvey": baseApi + '/api/Surveys/', // :ID
        "deleteSurvey": baseApi + '/api/Surveys/', // : ID
        "changeCurrentSurvey": baseApi + '/api/Surveys/',// :ID 
        "publishSurvey": baseApi + '/api/Surveys/Publish/',// :ID
        "unpublishSurvey": baseApi + '/api/Surveys/UnPublish/',// :ID
        "getSurveyAnswers": baseApi + '/api/SurveyAnswers/Counts/',// :ID
        "accountLogin": baseApi + '/api/Account/Login'
    }
}


export const apiRequester = (function () {

    // ERROR HANDLER
    function handleError(errTitle, errText) {
        swal({
            type: 'error',
            title: 'Service Error',
            text: 'Error occured .Seems that service is unavaliable right now.Please wait and try again'
        })
        preloaderModule.removePreloader();
    }

    function beforeFetch() { preloaderModule.createPreloader() }
    var bearer_token = localStorage.tritailToken ? JSON.parse(localStorage.tritailToken) : '';
    var bearer = 'Bearer ' + bearer_token;

    // HEADERS
    var myHeaders = new Headers();
    myHeaders.append("client", localStorage.client);
    myHeaders.append('Authorization', bearer);
    myHeaders.append("Content-Type", "application/json");
    //myHeaders.append("Authorization", "test");

    var getOptions = {
        method: 'GET',
        headers: myHeaders,
        withCredentials: true,
    }

    return {

        'get': (url) => {
            beforeFetch()
            return fetch(url, getOptions)
                .then(e => e.json())
                .catch(err => handleError(err, err))

        },

        'post': (url, body) => {
            beforeFetch()
            return fetch(url, {
                method: 'POST',
                headers: myHeaders,
                body: JSON.stringify(body)
            })
                .then(e => e.json())
                .catch(err => handleError(err, err))
        },

        'patch': (url, body) => {
            beforeFetch()
            return fetch(url, {
                method: 'PATCH',
                headers: myHeaders,
                body: JSON.stringify(body),
            })
                .then(e => e.json())
                .catch(err => handleError(err, err))
        },

        'put': (url, body) => {
            beforeFetch()
            return fetch(url, {
                method: 'PUT',
                headers: myHeaders,
                body: JSON.stringify(body),
                redirect: 'follow'
            })
                .then(e => e.json())
                .catch(err => handleError(err, err))
        },

        'delete': (url, id) => {
            beforeFetch()
            return fetch(url + id, {
                method: 'DELETE',
                headers: myHeaders,
            })
                .then(e => e.json())
                .catch(err => handleError(err, err))
        },
    }
})()

```


I planned backend models & controllers.And integrated survey.js to the dashboard.
The final product was a fully functional and scalable survey system.
I used this system to create surveys for inhouse projects and for other applications. 

Here are some screens :

<Image src="/projects/survey/survey_sc1.jpg" alt="survey" width={1200} height={674} />
<Image src="/projects/survey/survey_sc2.jpg" alt="survey" width={1200} height={674} />
<Image src="/projects/survey/survey_sc3.jpg" alt="survey" width={1200} height={674} />
<Image src="/projects/survey/survey_sc4.jpg" alt="survey" width={1200} height={674} />







Projects 7

Archviz Prototype

Coolheadz

Iventyo

Nft Gallery Prototype

Tritail

Zladron

Survey System