DEV Community: Oryam

Intro to WebGL & Three.js

Oryam — Fri, 28 Apr 2023 13:56:53 +0000

TL;DR - 3D in the browser is awesome, you should at least give it a try 🚀

Why read this?

As the internet becomes increasingly interactive and immersive, 3D modeling has emerged as a valuable skill for web developers and designers. With the ability to create and display complex 3D objects and scenes in real-time, 3D modeling can enhance the visual appeal and interactivity of web applications and games, as well as provide new opportunities for creative expression and storytelling. Whether you're a seasoned developer or just starting out, learning about 3D modeling on the web can open up new possibilities for your projects and help you stay at the forefront of web development trends. In this post, we'll focus on some of the basics of 3D modeling on the web and in general.

Intro to general 3D

To understand WebGL, it's helpful to have a basic understanding of 3D modeling.

3D modeling is the process of creating a three-dimensional representation of an object or scene using specialized software. This involves creating a mesh of polygons that define the shape of the object, as well as applying textures and materials to give it color, texture, and other visual properties.

The 3d rendering pipeline

We start with a Vertex that identified by it's x, y and z coordinates
The Vertices are connected together to create triangles named Primitives. They then connected to each other to form a more complex shapes,
A light source point at them to create the appearance of shadows and depth, Fragment
The 3d vector graphic converted to projection of 2d pixels on the screen (rendering)

In low graphics we can notice where the fragments

Shaders are the functions that tell the computer how to render the fragments on the screen, something the CPU can't handle by itself, which is why we use the graphics processing unit (GPU).

What is WebGL

WebGL stands for Web Graphics Library and is a JavaScript API that allows you to render 3D graphics in the browser without the need for plugins. It is based on the OpenGL ES 2.0 specification and is supported by all modern web browsers.

In order to render 3D models in a web browser, WebGL uses the GPU of the computer to perform complex calculations and render the graphics in real-time. This makes it possible to create interactive and immersive 3D web applications, such as games, simulations, and virtual reality experiences.

While writing this post the new WebGPU API is coming out.

To make the connection between the script and the DOM we use the HTML canvas element.

  <body>
    <canvas id="app"></canvas>
    <script src="src/index.js"></script>
  </body>

Why not to use WebGL API directly

While it's certainly possible to use the WebGL API directly to create 3D graphics in a web browser, doing so can be quite complex and time-consuming. WebGL is a low-level API that requires you to write shader code in GLSL (OpenGL Shading Language) to define how objects should be rendered, as well as manage low-level details such as buffers, textures, and framebuffers.

This can be challenging even for experienced developers, and can lead to code that is difficult to read, maintain, and debug. Additionally, using WebGL directly can be less efficient than using a higher-level library such as Three.js, as it requires you to perform many low-level operations manually that a library would handle for you.

For example, to create a simple box you'll need around 180 lines of code

Using a library like Three.js provides a number of benefits over using WebGL directly. Three.js provides a simplified and user-friendly interface for working with 3D graphics, abstracting away many of the low-level details of WebGL and providing a range of useful features and tools for building 3D applications. This can make it much easier to get started with 3D graphics on the web, and allows you to focus on the creative aspects of your application rather than the low-level details of WebGL.
And just for the demonstration to create the same cube from before it will take us about only 30 lines of code (and much more understandable).

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  74,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById("app")
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(2);
renderer.render(scene, camera);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const animate = () => {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.005;
  cube.rotation.z += 0.005;

  renderer.render(scene, camera);
};

animate();

In the next part I’ll go more hands on in Three.js and what are the Scene, Renderer and Camera.

Here are some awesome example of Three.js:

Better call Generator

Oryam — Sat, 12 Nov 2022 19:08:19 +0000

Found out that the fonts from the Better Call Saul intro are free to use, so I played a bit with some CSS and HTML to mock it.

Added some JS so the users can insert any name they like instead of "Saul".

Also added animation to make the VHS grain effect.

Code
Live Demo

Chords in HTML

Oryam — Sat, 07 May 2022 18:30:34 +0000

As an amateur guitarist, I use chord websites, and sometimes I think about how to implement it with HTML and CSS. I mean, the tricky part of keeping the chords in the right position relative to the letter it points on.

One day came across a cool HTML element, <ruby/> that can solve this problem.

The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.

A codepen to play with

By the way, by inspecting chords website you can see that they are using different methods.

Turn Object to Array using Object.entries()

Oryam — Wed, 09 Dec 2020 18:22:00 +0000

For most cases the easiest way for manipulating and displaying data with Javascript is when it is organized as an array of objects.
Usually, we get data like that from an api. But in some cases, the data is organized as nested objects.

The problem

While working on a Crypto currency SPA project we used cryptocompare API
to compare crypto coins to USD.
The returned data looks something like this (json format):

{"BTC":{"USD":18188.04},"ETH":{"USD":557.07}}

But we wanted it to be organized like:

  [
    {name:"BTC",currency:"USD",value:'181.88.04'}, 
    {name:"ETH",currency:"USD",value:'557.07'}
  ]

The solution

So we googled...
and found out about Object.entries(obj)

part 1

This method returns an array. Each item in the array is another array that has the first item as a key and the second as its key value.

It looks like this:

const coins = { BTC: { USD: 18188.04 }, ETH: { USD: 557.07 } };

console.log(Object.entries(coins));
//[ [ 'BTC', { USD: 18188.04 } ], [ 'ETH', { USD: 557.07 } ] ]

part 2

Ok, this is a good start. Now we can use map() to turn it into an array of objects.

And it should look like:

coinsToArr = coinsToArr.map(([name, data]) => ({ name, data }));
// [ { name: 'BTC', data: { USD: 18188.04 } }, { name: 'ETH', data: { USD: 557.07 } } ]

part 3

Now it looks much better and easier to work with. But it's not exactly what we wanted to achieve.
We have the same kind of problem but now the object is nested in the new object we created.

Assuming we will get only one currency each time we used the same method as above inside the first map function :

coinsToArr = coinsToArr.map(([name, data]) => {
  data = Object.entries(data); 
  data = data.map(([currency, value]) => ({ currency, value }));
  return {
    name,
    currency: data[0].currency,
    value: data[0].value,
  };
});

// [ { name: 'BTC', currency: 'USD', value: 18188.04 }, { name: 'ETH', currency: 'USD', value: 557.07 }]

Now this is what we wanted.

part 4

Refactoring and turning it into a function

const coinsObjToArr = (obj) => {
//using Object.entries().map()
  return Object.entries(obj).map(([name, data]) => {
//getting the currency and value using Object.entries().map() 2nd time
    const { currency, value } = Object.entries(data).map(
      ([currency, value]) => ({
        currency,
        value,
      })
// getting the first and only item from the array
    )[0]; 
    return {
//return all values as object
      name,
      currency,
      value,
    };
  });
};

I know it might look hard to understand because of all the destractuaring and chaining methods but it's just all the parts connected.

We simply used Object.entries() and map() twice, nested.

References:

Hope it was helpful.

Git Bash Customization (on windows)

Oryam — Sun, 06 Dec 2020 10:45:27 +0000

A simple Costumization tutorial

Turn This :

Into This (or any style):

The easy way

Go to bash settings by simply right-clicking and go to options menu.
There you will find the "Looks" tab.
You can play with the themes and properties to make it look the way you like.

The cool way

Using this method you can change some more things like the window title for example.

go to C:\Program Files\Git\etc\profile.d\
open git-prompt.sh as administartor in your favorite code editor. (I found an easy way, to open Powershell as administrator and then open vscode from there).

In the file this is what you suppose to find:

PS1='\[\033]0;$TITLEPREFIX:$PWD\007\]' # set window title
PS1="$PS1"'\n'                         # new line
PS1="$PS1"'\[\033[32m\]'               # change to green
PS1="$PS1"'\u@\h '                     # user@host<space>
PS1="$PS1"'\[\033[35m\]'               # change to purple
PS1="$PS1"'$MSYSTEM '                  # show MSYSTEM
PS1="$PS1"'\[\033[33m\]'               # change to brownish yellow
PS1="$PS1"'\w'                         # current working directory

The comments talk for themself...

I change it to be :

PS1='\[\033]0;Git-Bash\007\]'  # set window title Git-Bash
PS1="$PS1"'\n'                 # new line
PS1="$PS1"'\[\033[32m\]'       # change to green
PS1="$PS1"'\u -> '             # user -> 
# removed  MSYSTEM
PS1="$PS1"'\[\033[33m\]'       # change to brownish yellow
PS1="$PS1"'\W'                 # current working Folder(not the whole path)

And, That's it!

CSS Light Saber

Oryam — Tue, 03 Nov 2020 12:57:27 +0000

Inspired by lynn fisher and this live streaming video with her,
I created:

Single div Lightsaber

In CSS, there are three layers: the selector, :before, and :after.
In this case the “div” holds the blade, the :before holds the hilt and the :after holds the button.
The drawing was made with color-gradients inside a background-image.

Getting started with Lambda + DynamoDB Using Serverless Framework

Oryam — Thu, 29 Oct 2020 18:05:46 +0000

Part 1:

Intro to AWS (Lambda-functions and DynamoDB)

What is Serverless?

Serverless !== No Server.
It means that you as a developer don't need to worry about writing, deploying and maintaining the server behind the scenes. So you can focus on writing the actual functionality of the server.

Why serverless?

A serverless service can scale depending on its use. Scale up when using and scale down when not.
Some use case examples: voting tv shows or delivery apps on special holidays. Both need to scale up/down for a short time.
Pros: low cost and easy to scale
Cons: cold-start can happen, don't have access to a file system (no state in memory), each function needs to be independent.

Why AWS?

Easy to get started with, popular and free for prototype scale, but you can choose any other cloud service you want, they all have kind of the same services.

Part 2:

Getting started with Serverless FrameWork (how to setup a new profile)

You can also use the GUI on AWS website which can be easier at first, but if you want to keep, change or duplicate your settings and functions it is preferred to work with serverless.

The serverless framework helps us to setup and deploy all the services from the cloud using a yml file and a CLI.

You can use the steps here but it’s also recommended to use the serverless docs

First steps:

Create a new user on AWS IAM service with administrator access and keep the user keys.
Install the serverless framework using npm install -g serverless
Config your profile using

serverless config credentials --provider aws --key <your key> --secret <your secret key> --profile <choose profile name>

Now you all setup and can start using serverless with AWS.

Part 3:

Create a Lambda Function

Go to a new folder and run:

serverless create --template aws-nodejs --path <folder name>

Now inside the path you entered you'll have handler.js and serverless.yml files.
The yml file should look like: (without the comments)

service: <your path>
frameworkVersion: '2'

provider:
  name: aws
  runtime: nodejs12.x

functions:
  hello:
    handler: handler.hello

In this file we need to add the serverless profile from the last part.
So in the provider section below runtime enter your profile name like this:

provider:
  name: aws
  runtime: nodejs12.x
  profile: <your profile name>

Now if you run serverless deploy
Serverless will create a config file and deploy the project with the hello function to AWS.
If you check AWS lambda with your account you will see the new function.

Part 4:

Create a DynamoDB Data-base

DynamoDB is a database service from AWS that will scale automatically with the data you will put on it so you don't have to manage a database system.

First you need to add dynamodb as a resource in the yml file.

in yml file the lining is important !

custom:
  usersTable: usersTable

resources:
  Resources:
    DynamoDBTable:
      Type: AWS::DynamoDB::Table
      Properties:
        TableName: ${self:custom.usersTable}
        AttributeDefinitions:
          - AttributeName: id
            AttributeType: S
        KeySchema:
          - AttributeName: id
            KeyType: HASH
        BillingMode: PAY_PER_REQUEST
        StreamSpecification:
          StreamViewType: NEW_IMAGE

We used custom variables for the table name so we can use it later in other places.

After saving the changes you can run serverless deploy and check
that it was created on your AWS account.

Part 5:

Connect the Lambda to DynamoDB

To keep things simple and easy we will only create a user (put). We now will change the hello function to a create-user function by this steps:

1.Import AWS library with require the sdk

const AWS = require('aws-sdk');

2.Change function name to handler instead hello (yml and js)
3.Create a Dynamo document-client

const documentClient = new AWS.DynamoDB.DocumentClient();

4.Create AWS params

const params = {
    TableName: 'usersTable',
    Item: {
      id: '001',
      name: 'john',
    },
  };

5.Because it's an async function we can use try/catch to assign the user to the client-document with the put method.

try {
    const data = await documentClient.put(params).promise(); //aws promise
    responseBody = JSON.stringify(data);
    statusCode = 201; //object created
  } catch (err) {
    responseBody = `unable to create user - ${err}`;
    statusCode = 403;
  }

final result:

'use strict';
const AWS = require('aws-sdk');

module.exports.handler = async (event, context) => {
  console.log('event', event);
  const documentClient = new AWS.DynamoDB.DocumentClient();
  let responseBody = '';
  let statusCode = 0;

  //AWS params
  const params = {
    TableName: 'usersTable',
    Item: {
      id: '001',
      name: 'john',
    },
  };

  try {
    const data = await documentClient.put(params).promise(); //aws promise
    responseBody = JSON.stringify(data);
    statusCode = 201; //object created
  } catch (err) {
    responseBody = `unable to create user - ${err}`;
    statusCode = 403;
  }

  const response = {
    statusCode,
    headers: { 'Content-Type': 'application/json' },
    body: responseBody,
  };

  return response;
};

As you probably see the user data is hard coded. To enter variables you need to use API Gateway.
After saving the file you can deploy it with serverless deploy
And test the Lambda function on AWS, then check DynamoDB to see the new user.

Hope it was helpfull 👩‍💻

Resources:

A great video series by Sam from Complete Coding Link
A tutorial about how to make it all using the AWS GUI Link
Serverless Framework docs Link

My First Hacktobetfest Experience🎸 (2020)

Oryam — Sun, 25 Oct 2020 17:39:07 +0000

My experience from my first Hactoberfest,

For a while I wanted to participate in an open-source project but didn't know where to start. When I found out about the Hacktoberfest it was perfect for me to make my first steps into the open-source world.

Background

I'm a Junior web developer and as mentioned before, just got into open-source.

Progress

I managed to find more than 4 projects I could contribute to, to be honest most of them were aimed at beginners.

Contributions

interview-prep: added answer to interview question about virtual DOM in react.
I'm currently preparing for interviews so it was also a good practice.
github-langs: fixed css link colors.
unfortunately someone made a pull-request before i did
RollTheDice: a Javascript game, I just added a snapshot to the README file.
JS concepts examples: added an example file to Closure. Again was a good practice.
Canvas-Creations: Added simple canvas animation. Learned about HTML canvas for the first time.

Reflections

It was a great experience and I learned alot about working with github and open-source. Next year I will contribute more meaningful code.

How I Created a Pokedex with CSS

Oryam — Sun, 25 Oct 2020 10:09:23 +0000

A small CSS & HTML Drawing poject

Planing
Start Coding
Adding curved lines
Adding some Javascript

See it on Codepen

Planning

Found a sample image to mock on google.

Then arranged the basic layout.(using draw.io)

I used a grid for the main structure and most of the sections in the grid as a flex-box.
I also colored parts I thought would share the same properties so I could try to reuse some classes.

Start Coding

I started to write the left panel, everything got pretty good as planned, up to the navigation button.
I couldn't remove the border of the top rectangle in the middle.

So, I google it.
I found a way to make it work by adding borders with the same color as the button background and position them so they cover the original border.

HTML

<div class="nav-button">
    <div class="nav-center-circle"></div>
    <div class="nav-button-vertical"></div>
    <div class="nav-button-horizontal">
        <div class="border-top"></div>
        <div class="border-bottom"></div>
    </div>
</div>

CSS

.border-top {
  border-top: 3.5px solid var(--main-buttons-color);
  position: absolute;
  top: -3px;
  left: 20px;
  right: 19.5px;
}
.border-bottom {
  border-top: 3.5px solid var(--main-buttons-color);
  position: absolute;
  top: 11px;
  left: 20px;
  right: 19.5px;
}

Finally it looks like that:

Adding curved lines

At first I tried to use the same method with the borders, but it didn't work as planned (mainly because of the positioning).
I found out about SVG drawing and it turned out to be a good solution.

<svg height="100" width="225" class="left-svg">
    <polyline
     points="0,75 70,75 90,38 224,38"
     style="fill: none; stroke: black; stroke-width: 3"
     />
</svg>

For the right panel I used the same technique.

For cutting the right panel border I used pseudo element:

#right-panel {
  background-color: var(--main-bg-color);
  box-sizing: border-box;
  position: relative;
  height: 100%;
  width: 50%;
  display: grid;
  grid-template-rows: 24% repeat(4, 19%);
  border-bottom: solid black 3px;
  border-bottom-right-radius: 10px;
}
#right-panel::before {
  content: '';
  position: absolute;
  left: -3px;
  bottom: 0;
  width: 100%;
  height: 265px;
  border-right: solid black 3px;
  border-bottom-right-radius: 7px;
}

Adding some Javascript

The only thing left is to fetch some data and display it on the screens.
For this I used the pokeapi and some JS

const getPokemonData = (pokemon) => {
  fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`)
    .then((response) => response.json())
    .then((data) => {
      let id = ('00' + data.id).slice(-3);
      imageScreen.style.backgroundImage = `url('https://assets.pokemon.com/assets/cms2/img/pokedex/full/${id}.png')`;
      nameScreen.innerHTML = data.name;
      typeScreen.innerHTML = data.types[0].type.name;
      idScreen.innerHTML = `#${data.id}`;
      aboutScreen.innerHTML = `Height: ${data.height * 10}cm Weight: ${
        data.weight / 10
      }kg`;
      inputField.value = '';
    });
};

The full Code is on Codepen

Thanks for reading and I hope you liked it.