DEV Community: Reene

[k8s]After restarting the virtual machine, the kube-apiserver of k8s cannot start normally

Reene — Tue, 03 Dec 2024 22:07:11 +0000

After restarting the device:



kubectl get node
The connection to the server x.x.x.x:6443 was refused - did you specify the right host or port?
systemctl status kube-apiserver prompts:

Unit kube-apiserver.service could not be found
There is no such service, so it is judged that the configuration file is wrong

Decided to reconstruct the K8S cluster

Solution:

# 1. Check if kubectl command is working
kubectl get node

# 2. Go to the home directory
cd ~

# 3. Check if the .kube directory exists
ll -a  # List all files to check if .kube directory exists

# 4. Remove the .kube directory
sudo rm -rf .kube/

# 5. Restart Docker service
sudo systemctl restart docker  # Restart Docker

# 6. Restart kubelet service
sudo systemctl restart kubelet  # Restart kubelet

# 7. Reset the Kubernetes setup
sudo kubeadm reset  # Reset Kubernetes cluster

# 8. Remove CNI configurations
sudo rm -rf /etc/cni/  # Delete CNI configurations

# 9. Reinitialize Kubernetes with specific settings
kubeadm init --kubernetes-version=1.23.5 --apiserver-advertise-address=192.168.1.21 --image-repository registry.aliyuncs.com/google_containers --service-cidr=192.1.0.0/16 --pod-network-cidr=192.244.0.0/16

# 10. After successful initialization, configure Kubernetes for the user
mkdir -p $HOME/.kube  # Create the .kube directory
sudo cp -i /etc/kubernetes/admin.conf $HOME/.kube/config  # Copy admin config
sudo chown $(id -u):$(id -u) $HOME/.kube/config  # Change ownership of the config file

# 11. Download the Flannel network configuration file
wget https://raw.githubusercontent.com/coreos/flannel/master/Documentation/kube-flannel.yml  # Download Flannel YAML file

# 12. Copy the kube-flannel.yml file to /opt and apply it
sudo cp kube-flannel.yml /opt/  # Copy the Flannel YAML file to /opt directory
kubectl apply -f /opt/kube-flannel.yml  # Apply the Flannel configuration

# After these steps, check the node status
kubectl get nodes  # Check if the node is ready

Issue with Flannel and CoreDNS Pods Not Starting: When checking the pods, Flannel and CoreDNS are not starting.



Error: Flannel is having an issue where it cannot obtain the necessary subnet lease. Specifically, the PodCIDR (assigned IP range for pods) 192.244.0.0/24 is not included within Flannel’s network configuration subnet 10.244.0.0/16.

Fixing the Subnet Configuration: Edit the Flannel ConfigMap: To resolve the subnet issue, the Flannel ConfigMap needs to be updated.

First, inspect the Flannel Pod:


kubectl describe pod kube-flannel-ds-99grr -n kube-flannel  # Describe the Flannel pod for detailed information

Check the logs:


kubectl logs kube-flannel-ds-fqvvv -n kube-flannel  # Check the Flannel pod logs for errors
Error Explanation: The Flannel network plugin is unable to get a subnet lease because the PodCIDR 192.244.0.0/24 is not within the subnet 10.244.0.0/16 specified in Flannel’s configuration.

Solution: You can resolve this by modifying the Flannel network configuration:

Edit the Flannel ConfigMap:

kubectl edit configmap kube-flannel-cfg -n kube-flannel  # Edit the Flannel ConfigMap in the kube-flannel namespace

Change the subnet in the ConfigMap to match the required PodCIDR.

After modifying the subnet in the kube-flannel-cfg ConfigMap, Flannel should be able to allocate the necessary subnets and the pods should start successfully.

[Github actions][actions]Core File Organization and Guidelines

Reene — Sun, 01 Dec 2024 21:42:43 +0000

Custom GitHub Actions: Core File Organization and Guidelines

Custom GitHub Actions enable users to define specific workflows tailored to their needs. Below are the core conventions and best practices for organizing custom GitHub Actions.

0. Installed images in github acitons environment

https://github.com/actions/runner-images/blob/main/images/ubuntu/Ubuntu2404-Readme.md

1. Folder Organization

Each custom Action must reside in its own folder, typically under .github/actions:

.github/
  actions/
    action-name/          # Custom Action folder
      action.yml          # Core configuration file (required)
      script.sh           # Optional: Supporting script file
      Dockerfile          # Optional: Docker configuration file
      index.js            # Optional: Entry point for JavaScript Actions
      README.md           # Optional: Action documentation

2. Core File: `action.yml`

action.yml is the required configuration file that defines the Action's behavior.

Required Fields

name: The Action's name (for identification).
description: A short description of the Action's purpose.
inputs: (Optional) Parameters to pass to the Action.
outputs: (Optional) Values returned by the Action.
runs: Specifies how the Action should execute.

3. Types of Actions

(1) Composite Actions

A series of steps defined directly in the action.yml file.

Example: `action.yml`

name: My Composite Action
description: A composite Action example
inputs:
  example_input:
    description: "An example input"
    required: true
runs:
  using: "composite"
  steps:
    - name: Print input
      run: echo "Input is ${{ inputs.example_input }}"

(2) JavaScript/TypeScript Actions

Runs on Node.js, allowing complex logic and dependencies.

File Structure:

.github/actions/my-js-action/
  action.yml
  index.js            # Main script file
  package.json        # Node.js dependencies

Example: `action.yml`

name: My JavaScript Action
description: A JavaScript Action example
inputs:
  example_input:
    description: "An example input"
    required: true
runs:
  using: "node16"
  main: index.js       # Entry point

(3) Docker Actions

Runs inside a Docker container with a custom environment.

File Structure:

.github/actions/my-docker-action/
  action.yml
  Dockerfile          # Required for Docker Actions

Example: `action.yml`

name: My Docker Action
description: A Docker Action example
inputs:
  example_input:
    description: "An example input"
    required: true
runs:
  using: "docker"
  image: "Dockerfile"
  args:
    - ${{ inputs.example_input }}

Example: `Dockerfile`

FROM ubuntu:20.04
RUN apt-get update && apt-get install -y curl jq
COPY entrypoint.sh /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

4. Optional Files

README.md

Provides documentation for the Action, including:
- Description of functionality.
- List of input and output parameters.
- Examples of usage.

Scripts

Include additional shell or Python scripts as needed to support the Action's logic.

5. Referencing Custom Actions

(1) Local Repository

If the Action is in the same repository:

- name: Use Custom Action
  uses: ./github/actions/action-name
  with:
    example_input: "Hello World"

(2) External Repository

If the Action is hosted in another public repository:

- name: Use Custom Action
  uses: username/repository-name/path/to/action-name@v1
  with:
    example_input: "Hello World"

6. Best Practices

File Naming
- The configuration file must be named action.yml or action.yaml.
- For Docker Actions, a Dockerfile is required.
Dependencies
- For JavaScript Actions, declare all dependencies in package.json.
- For Docker Actions, include all required tools in the Dockerfile.
Checkout Repository
- Always include actions/checkout before referencing local Actions to load the repository's content.

7. Example Workflow Using a Custom Action

Workflow File: `.github/workflows/main.yml`

name: Example Workflow

on:
  push:
    branches:
      - main

jobs:
  example:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Use Custom Action
        uses: ./github/actions/action-name
        with:
          example_input: "Hello World"

[Subnet][ZeroTier]build local network

Reene — Fri, 29 Nov 2024 09:09:51 +0000

Configure ZeroTier for Host machine and Ubuntu Machine

configure ZeroTier for communication between host and an Ubuntu machine.

Reference:

zeroTier center: https://my.zerotier.com/

1. Install ZeroTier

S Host

Download the ZeroTier client from https://www.zerotier.com/download/.
Install and run the application.
Open the ZeroTier menu bar app and log in to ZeroTier Central.

Ubuntu Virtual Machine

Run the following commands to install ZeroTier:

curl -s https://install.zerotier.com | sudo bash

2. Configure ZeroTier Network

Create a Network

Go to https://my.zerotier.com/.
Log in and click "Create a Network".
Note the Network ID (e.g., 8056c2e21c000001).
Click on the new network and configure:
- Name: Set a friendly name like HomeNetwork.
- Access Control: Select Private to manually approve devices.

3. Join the ZeroTier Network

Host

In the ZeroTier app, click "Join Network".
Enter the Network ID and join.
Approve the device in ZeroTier Central by checking the Auth box.

Ubuntu Machine

Run the following command to join the network:

sudo zerotier-cli join <network-id>

Check connection status:

sudo zerotier-cli listnetworks

4. Assign and Verify IP Addresses

ZeroTier assigns virtual IPs automatically.

Host

Find the IP in the ZeroTier menu bar app.

Ubuntu Machine

Run the following command to check the assigned IP:

ip addr show zt*

5. Test Connectivity

Ping Test

From host to Ubuntu: ping
From Ubuntu to host: ping

SSH Connection

From host: ssh user@

6. Enable ZeroTier on Startup

Ubuntu Machine

Enable and start the ZeroTier service:

sudo systemctl enable zerotier-one
sudo systemctl start zerotier-one

[CI/CD][Github actions] common template

Reene — Fri, 29 Nov 2024 06:23:32 +0000

Intro

This GitHub Actions template is designed to automate the CI/CD pipeline for a backend project. It has two main stages: Build and Deploy.

Hint:

Replacement instructions:Add the Secrets information provided above (such as DOCKER_USERNAME, NGROK_HOST, etc.) to GitHub's Secrets configuration one by one.
When using, there is no need to modify ${{ secrets.XXXX }} in the YAML file, GitHub will automatically replace them with the corresponding Secrets values.

Applicable scenarios:

Applicable to Docker image building and pushing.
Supports deploying projects to specified servers and executing Kubernetes configuration through Ngrok.

name: CI/CD for Backend

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Set up JDK 17
        uses: actions/setup-java@v3
        with:
          distribution: 'temurin'
          java-version: '17'

      - name: Build with Maven
        run: mvn clean package -DskipTests

      - name: Build Docker image
        run: docker build -t ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKER_REPO }}:latest .

      - name: Push Docker image to DockerHub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - run: docker push ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKER_REPO }}:latest

  deploy:
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      # Load NGROK_PORT and NGROK_HOST from the config file
      - name: Load NGROK configuration
        run: |
          NGROK_PORT=$(yq '.NGROK_PORT' ./.github/workflows/config.yml)
          NGROK_HOST=$(yq '.NGROK_HOST' ./.github/workflows/config.yml)
          echo "NGROK_PORT=$NGROK_PORT" >> $GITHUB_ENV
          echo "NGROK_HOST=$NGROK_HOST" >> $GITHUB_ENV

      # Ensure the target directory exists
      - name: Prepare target directory
        run: |
          sshpass -p "${{ secrets.SSH_PASSWORD }}" ssh -o StrictHostKeyChecking=no -p ${{ env.NGROK_PORT }} ${{ secrets.SSH_USER }}@${{ env.NGROK_HOST }} << 'EOF'
          mkdir -p /home/linlin1/io-multiple-backend/
          EOF

      # Transfer code to the target server
      - name: Transfer code to server
        run: |
          sshpass -p "${{ secrets.SSH_PASSWORD }}" scp -o StrictHostKeyChecking=no -P ${{ env.NGROK_PORT }} -r * ${{ secrets.SSH_USER }}@${{ env.NGROK_HOST }}:/home/linlin1/io-multiple-backend/

      # Deploy Kubernetes configurations
      - name: Deploy on server
        run: |
          sshpass -p "${{ secrets.SSH_PASSWORD }}" ssh -o StrictHostKeyChecking=no -p ${{ env.NGROK_PORT }} ${{ secrets.SSH_USER }}@${{ env.NGROK_HOST }} << 'EOF'
          cd /home/linlin1/io-multiple-backend/k8s
          kubectl apply -f .
          EOF

Placeholder	Description	Example Value	Secret Key in GitHub
`${{ secrets.DOCKER_USERNAME }}`	DockerHub username	your-docker-username	`DOCKER_USERNAME`
`${{ secrets.DOCKER_PASSWORD }}`	DockerHub password	your-docker-password	`DOCKER_PASSWORD`
`${{ secrets.DOCKER_REPO }}`	DockerHub repository name	dockerRepo	`DOCKER_REPO`
`${{ secrets.SSH_USER }}`	SSH username for the target server	ubuntu	`SSH_USER`
`${{ secrets.SSH_PASSWORD }}`	SSH password for the target server	12345678	`SSH_PASSWORD`

configure config.yml for dynamic ip of ngork

if you choose dynamic ip configuration in ngork, then it is better to configure ngork host and port in config.yml file instead of github secrets.

create config.yml under the same directory:

NGROK_PORT: 12345
NGROK_HOST: 0.tcp.eu.ngrok.io

[Intranet penetration][Ngrok]Expose local services to achieve front-end and back-end debugging

Reene — Fri, 29 Nov 2024 03:24:28 +0000

Intro

Achieve front-end and back-end debugging when outside the local network. Besides a)building vpn in aws [aws vpn],b)reverse ssh tunnel, there introduce another method which is more simple to expose local service, to make private cloud have access to local service.

0.Using Ngrok (intranet penetration tool)

Ngrok is a lightweight intranet penetration tool that can quickly expose local services to the public network. It is very suitable for scenarios where the host does not have a public IP.

1. Configure Ngrok in your mechine

1). Check the system architecture

Run the following command in the terminal to confirm system architecture:

uname -m

x86_64: 64-bit architecture.
arm or aarch64: ARM architecture

2).Download the correct Ngrok binary

x86_64:

wget https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-v3-stable-linux-amd64.tgz

ARM64：

wget https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-v3-stable-linux-arm64.tgz

3). Unzip the file

Unzip the file you just downloaded:

There I use the ubuntu(aarch64)

tar -xvzf ngrok-v3-stable-linux-arm64.tgz

Once the unzip is complete, you should see a file called ngrok.

4). Install Ngrok

Move the unzipped file to your system's global path, such as /usr/local/bin:

sudo mv ngrok /usr/local/bin

5). Verify the installation

Check that the installation was successful:

ngrok version

If successful, it will display output similar to the following:

ngrok version 3.x.x

2. Get an authtoken

go to the setting, and configure payment method, and then choose free tier.

After finish setting, go to token.
Authenticate the ngrok agent. only have to do this once. The Authtoken is saved in the default configuration file.

ngrok config add-authtoken <your-token>

3. Run Ngrok again

Now we can use Ngrok normally. For example, to start an SSH tunnel (port 22):

ngrok tcp 22

If successful, Ngrok will output an address similar to the following:

Forwarding tcp://0.tcp.ngrok.io:12345 -> localhost:22

Edit ssh_config

sudo vim /etc/ssh/sshd_config

PermitRootLogin yes
PasswordAuthentication yes
KbdInteractiveAuthentication yes
UsePAM yes
#PubkeyAuthentication yes

now we can access our SSH service from the outside using the following command:

ssh user@0.tcp.ngrok.io -p 12345

user: Replace with your host's SSH username (e.g. ubuntu).
tcp.eu.ngrok.io and 12345: from the address and port provided by Ngrok.

4.Configuring Ngrok to Auto-Start on Ubuntu Virtual Machine

This guide explains how to configure Ngrok to start automatically on boot with persistent settings on an Ubuntu virtual machine.


# Step 1: Create an Ngrok Configuration File
mkdir -p $HOME/.ngrok2
nano $HOME/.ngrok2/ngrok.yml

# Add the following content to ngrok.yml:
 version: "2"
 authtoken: your-authtoken
 tunnels:
   ssh:
     proto: tcp
     addr: 22

# Or use:
mkdir -p $HOME/.ngrok2 && cat <<EOF > $HOME/.ngrok2/ngrok.yml
version: "2"
authtoken: your-authtoken
tunnels:
  ssh:
    proto: tcp
    addr: 22
EOF

# Save the file and test the configuration
ngrok start --config=$HOME/.ngrok2/ngrok.yml --all

# Step 2: Create a Systemd Service File
sudo nano /etc/systemd/system/ngrok.service

# Add the following content to the service file:
 [Unit]
 Description=Ngrok Service
 After=network.target

 [Service]
 ExecStart=/usr/local/bin/ngrok start --config=/home/<username>/.ngrok2/ngrok.yml --all
 Restart=on-failure
 User=<username>
 WorkingDirectory=/home/<username>
 Environment="PATH=/usr/local/bin:/usr/bin:/bin"

 [Install]
 WantedBy=multi-user.target

# Save and exit the file

# Step 3: Enable and Start the Service
sudo systemctl daemon-reload
sudo systemctl stop ngrok
sudo systemctl start ngrok
sudo systemctl status ngrok

# Enable the service to start on boot
sudo systemctl enable ngrok

# Step 4: Verify Ngrok Auto-Start on Boot
sudo reboot

# After rebooting, check the Ngrok service status
sudo systemctl status ngrok

# Confirm Ngrok is running and its tunnels are active
# Ngrok’s web interface is available by default at http://127.0.0.1:4040

go to dashboard:https://dashboard.ngrok.com/agents

[K8s][Commands]

Reene — Sat, 23 Nov 2024 00:48:10 +0000

k8s

use following commands to simulate kubernate clusters

0. configure static ip address

ip route | grep default

Open the Netplan configuration file:

sudo nano /etc/netplan/01-netcfg.yaml

Configure static IP: Add the following to the file:

network:
  version: 2
  ethernets:
    ens33: #Replace with your network card name
      addresses:
        - 192.168.1.10/24 # Set a fixed IP address
      routes:
        - to: default
          via: 192.168.1.1 #Set the gateway address
      nameservers:
        addresses:
          - 8.8.8.8
          - 8.8.4.4

sudo netplan apply

1. ssh

sudo apt update
sudo apt install openssh-server -y

sudo systemctl enable ssh
sudo systemctl start ssh

sudo systemctl status ssh

sudo vim /etc/fstab

#/swapfile none swap sw 0 0

sudo reboot
free -h

2. Master

Disable Swap (if not disabled)

sudo swapoff -a
sudo sed -i '/swap/d' /etc/fstab

Import the GPG public key of the Alibaba Cloud image

curl -fsSL https://mirrors.aliyun.com/kubernetes/apt/doc/apt-key.gpg | sudo gpg --dearmor -o /usr/share/keyrings/kubernetes-archive-keyring.gpg

sudo apt-get update

Check /etc/apt/sources.list.d/kubernetes.list configuration

sudo rm -f /etc/apt/sources.list.d/kubernetes.list
echo "deb [signed-by=/usr/share/keyrings/kubernetes-archive-keyring.gpg] https://mirrors.aliyun.com/kubernetes/apt/ kubernetes-xenial main" | sudo tee /etc/apt/sources.list.d/kubernetes.list

Update and install Kubernetes

sudo apt-get update
sudo apt-get install -y kubelet kubeadm kubectl

Confirm whether the installation is successful

kubelet --version
kubeadm version
kubectl version --client

Install docker before start k8s

sudo apt install -y docker.io
sudo systemctl start docker
sudo systemctl enable docker

Initialize the Kubernetes cluster. Run the following command to initialize the Kubernetes master node:

sudo kubeadm init --pod-network-cidr=192.168.0.0/16 --ignore-preflight-errors=Port-6443,Port-10259,Port-10257,Port-10250

Set up kubectl to access the cluster

mkdir -p $HOME/.kube
sudo cp -i /etc/kubernetes/admin.conf $HOME/.kube/config
sudo chown $(id -u):$(id -g) $HOME/.kube/config
echo "export KUBECONFIG=$HOME/.kube/config" >> ~/.bashrc
source ~/.bashrc

Test whether the connection is successful:

kubectl get nodes

bash
If the master node status is displayed as Ready, it means that the initialization is successful.

Install network plugin (using Flannel)

kubectl apply -f https://raw.githubusercontent.com/coreos/flannel/master/Documentation/kube-flannel.yml

Add a working node

After the master node is initialized, copy the generated command to worker node by using the following command in the master node to join the worker node to the cluster:

sudo kubeadm token create --print-join-command

If need to deploy an application, can use kubectl apply or Helm deployment.

3. worker



sudo apt-get update && sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common


curl -fsSL https://mirrors.aliyun.com/kubernetes/apt/doc/apt-key.gpg | sudo gpg --dearmor -o /usr/share/keyrings/kubernetes-archive-keyring.gpg
echo "deb [signed-by=/usr/share/keyrings/kubernetes-archive-keyring.gpg] https://mirrors.aliyun.com/kubernetes/apt/ kubernetes-xenial main" | sudo tee /etc/apt/sources.list.d/kubernetes.list


sudo apt-get update
sudo apt-get install -y kubelet kubeadm kubectl


sudo apt-get install -y docker.io


sudo systemctl enable docker
sudo systemctl start docker
sudo systemctl enable kubelet

on worker:
mkdir -p $HOME/.kube

go to the master:
sudo scp /etc/kubernetes/admin.conf <worker-username>@<worker-node-ip-address>:/home/<worker-username>/.kube/config

back to the worker:
sudo chown $(id -u):$(id -g) $HOME/.kube/config
check the status:
kubectl get nodes

[WebGL2.0][Basic]scene graph

Reene — Mon, 04 Nov 2024 23:15:28 +0000

Transition Matrix: localMatrix and worldMatrix

In 3D graphics rendering, both localMatrix and worldMatrix are transformation matrices used to describe the position, rotation, and scaling of an object in different spaces. Multiplying these matrices is necessary to progressively apply the transformations of each object in the hierarchy to the overall scene’s world coordinate system. Here’s a deeper explanation of why these matrices are multiplied and their specific roles.

1. `localMatrix` and `worldMatrix`

localMatrix: Represents the transformation of the current node (object) in its local coordinate space. This space is relative to its parent node, meaning the object’s position, rotation, and scaling are all described relative to its parent. Any child nodes will inherit this transformation.
localMatrix describe itself information rather than a single coordinate system, same as worldMatrix.
worldMatrix: Represents the transformation of the current node in the world (or scene) coordinate space. This matrix transforms the node from its local coordinate space all the way up to the root node of the scene graph, effectively placing it in world space.

2. Why Multiply the Matrices?

Matrix multiplication is used to apply transformations from one space to another. For instance:

The parent node’s worldMatrix represents its position and orientation in the world space.
The current node’s localMatrix represents its position and orientation relative to the parent node.

To compute the position and orientation of the current node in world space, we multiply the parent node’s worldMatrix by the current node’s localMatrix. This multiplication effectively applies the parent’s transformation, followed by the current node’s transformation, resulting in the current node’s worldMatrix.

3. Example: Earth and Moon

Consider a scenario where the Earth orbits the Sun, and the Moon orbits the Earth. Using matrices, we can represent these transformations:

Earth’s worldMatrix describes its position and rotation around the Sun in the world (solar system) space.
Moon’s localMatrix describes its position and rotation around the Earth, in Earth’s local space.

To compute the Moon’s position in the world space, we multiply Earth’s worldMatrix by Moon’s localMatrix, resulting in Moon’s worldMatrix. This way, the Moon orbits Earth, which in turn orbits the Sun, capturing the hierarchical transformation relationship.

4. Conclusion

By multiplying matrices, we can apply each level’s transformation within a hierarchy (like a scene graph), obtaining the final position and orientation of each node in world coordinates. This method is fundamental in 3D scenes, especially for complex parent-child transformation relationships.

[WebGL2.0][Basic]skinned model

Reene — Sun, 03 Nov 2024 23:56:16 +0000

1. Relative defination

Mesh

Definition of Triangle Count:

The number of triangles in a mesh is determined by the complexity of the object you want to represent. For example:
- Simple Shapes: A simple cube only requires 12 triangles (6 faces, with each face consisting of 2 triangles).
- Complex Shapes: A detailed character model may require thousands or even millions of triangles, allowing for finer details such as facial features and clothing folds.

Primitive

Examples:

Triangle: This is the most basic primitive. Each triangle is defined by 3 vertices (positions) and associated attributes (like color, normals, etc.). During rendering, each triangle can be drawn individually.
Line Segment: This is another type of primitive. A line segment consists of 2 vertices and is commonly used to draw edges or connect points. For instance, line segments can represent the edges of a mesh.
Point: Points are also a primitive type, representing a single position. They are typically used to represent particles in a particle system or the position of lights.

Example

Suppose we are creating a 3D cube mesh:

Mesh Definition: This cube can be made up of 12 triangles. Each face has two triangles, together forming the shape of a cube.
Primitive Usage: When rendering this cube, we will utilize multiple primitives (triangles), each containing information about 3 vertices, along with their colors, normals, and other data.

This combination of meshes and primitives allows for the construction and rendering of complex objects in a 3D environment efficiently. If you have more questions or need further clarification, feel free to ask!

[React.js][Webpack] webpack setup for react from scratch

Reene — Sun, 03 Nov 2024 23:24:31 +0000

youtube

repository

npm install --save-dev @babel/core@^7.12.13 @babel/preset-env@^7.12.13 @babel/preset-react@^7.12.13 babel-loader@^8.2.2 css-loader@^5.0.1 file-loader@^6.2.0 mini-css-extract-plugin@^1.3.5 sass@^1.32.6 sass-loader@^10.1.1 style-loader@^2.0.0 webpack@^5.20.1 webpack-cli@^4.5.0 webpack-dev-server@^3.11.2

.barbelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index.bundle.js',
    },
    devServer: {
        port: 3010,
        watchContentBase: true,
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            }
        ]
    },
    plugins: [new MiniCssExtractPlugin()],
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React App</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="app"></div>
    <script src="index.bundle.js"></script>
</body>
</html>

index.js

require('file-loader?name=[name].[ext]!./index.html');
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import './App.scss';

const appElement = document.getElementById('app');

ReactDOM.render(<App />, appElement);

[WebGL2.0] [Basic] non-skinned model

Reene — Sun, 03 Nov 2024 18:53:42 +0000

1. **gl_Position = projection * view * model * position;**

from local/model position to the position of final clip space

Three Transformation Maxtrix:

Projection: Projection Transformation Matrix

transform view coordinate system to clip space coodinate system
View: View Transformation Matrix

transform model coordinate system to view coordinnate system(move the position of camera)
Model: Model Transformation Matrix

transform local coordinate into model coordinate system/game world coordinate system(absolute coordinate)
Postition: The local coordinates of the vertices

local coordinate system(relative coordinate system)

Note:
the origin of coordinate system of position and model is defined by developer based on requirment.
the coordinate system of world and model cooresponding to model and postion matrix data respectly:



            Absolute(World) Y+ axis
                 Y (0, 1, 0)
               |
               |                           Local(Model) Y+ axis
               |                             |  /
               |                             | /
               |                             |
               |                  ---------- o (1, 0, 1)  ← Local(Model) Origin ---- Local X+ axis
               |                           / |  
               |                          /  |
               |                         /   |
               |                        /    |
               |                       /     | 
               |______________________/______|__________ X (1, 0, 0)  Absolute(World) X+ axis
              /                     Local(Model) Z+ axis
             /
            /
           /
          Z (0, 0, 1)
   Absolute(World) Z+ axis

2. WebGL uses Column primary order in default where as C++ uses Row primary order in default.

In WebGL, matrices are stored in column-major order, which affects matrix arrangement and calculation order. This storage method influences how matrices are defined and used in WebGL. Here are some common practices when working with column-major matrices in WebGL:

Matrix Definition and Arrangement ## Matrix Definition and Arrangement With column-major storage, the columns of the matrix are stored sequentially. For example, a 4x4 matrix M in column-major order looks like this:

In WebGL, this matrix is represented as a one-dimensional array in column-major order:

   const matrix = [
     m11, m21, m31, m41,  // First column
     m12, m22, m32, m42,  // Second column
     m13, m23, m33, m43,  // Third column
     m14, m24, m34, m44   // Fourth column
   ];

Consistent Matrix and Array Format When passing matrix data to WebGL shaders, it’s essential to use a consistent format. For instance, when passing a 4x4 transformation matrix, WebGL’s uniformMatrix4fv function expects the array in column-major order:

   gl.uniformMatrix4fv(location, false, matrix);

Here, false indicates that the matrix should not be transposed. Since WebGL uses column-major order by default, ensure that the data format matches this requirement, as JavaScript’s standard Math library may use row-major order by default.

Matrix Multiplication Order In practice, column-major order affects the multiplication sequence of matrices. In this system, matrices are multiplied from right to left, meaning the last transformation is applied first. For example:

The resulting matrix M can be expressed as the product of transformation matrices T, R, and S:

M = T ⋅ R ⋅ S

In this equation:

S is a scaling matrix,
R is a rotation matrix,
T is a translation matrix.

In column-major order, this sequence first applies scaling, then rotation, and finally translation.

Using Utility Libraries Using libraries like glMatrix simplifies matrix operations in WebGL. These libraries generally follow column-major order, aligning with WebGL’s requirements and avoiding the need for manual matrix format adjustments. For example:

let modelMatrix = mat4.create();// create a Identity matrix

   let modelMatrix = mat4.create();// create a Identity matrix
//M = T ⋅ R ⋅ S the principle of mutiply of matrix is from right to left <----- caused by colum major order
   mat4.translate(modelMatrix, modelMatrix, [x, y, z]); // Translation
   mat4.rotate(modelMatrix, modelMatrix, angle, [0, 1, 0]); // Rotation
   mat4.scale(modelMatrix, modelMatrix, [sx, sy, sz]); // Scaling

Debugging and Conversion Understanding column-major storage helps when debugging matrix calculations. If a matrix result is unexpected, check that the data arrangement in shaders matches column-major order.

[Event-Driven] understanding

Reene — Fri, 11 Oct 2024 08:49:58 +0000

From the learning, the event-driven is mainly like passive meaning, using message queue to drive other services to do other things.

DEV Community: Reene

[k8s]After restarting the virtual machine, the kube-apiserver of k8s cannot start normally

[Github actions][actions]Core File Organization and Guidelines

Custom GitHub Actions: Core File Organization and Guidelines

0. Installed images in github acitons environment

1. Folder Organization

2. Core File: action.yml

Required Fields

3. Types of Actions

(1) Composite Actions

Example: action.yml

(2) JavaScript/TypeScript Actions

File Structure:

Example: action.yml

(3) Docker Actions

File Structure:

Example: action.yml

Example: Dockerfile

4. Optional Files

README.md

Scripts

5. Referencing Custom Actions

(1) Local Repository

(2) External Repository

6. Best Practices

7. Example Workflow Using a Custom Action

Workflow File: .github/workflows/main.yml

[Subnet][ZeroTier]build local network

Configure ZeroTier for Host machine and Ubuntu Machine

Reference:

1. Install ZeroTier

S Host

Ubuntu Virtual Machine

2. Configure ZeroTier Network

Create a Network

3. Join the ZeroTier Network

Host

Ubuntu Machine

4. Assign and Verify IP Addresses

Host

Ubuntu Machine

5. Test Connectivity

Ping Test

SSH Connection

6. Enable ZeroTier on Startup

Ubuntu Machine

[CI/CD][Github actions] common template

Intro

Hint:

Applicable scenarios:

configure config.yml for dynamic ip of ngork

[Intranet penetration][Ngrok]Expose local services to achieve front-end and back-end debugging

Intro

0.Using Ngrok (intranet penetration tool)

1. Configure Ngrok in your mechine

1). Check the system architecture

2).Download the correct Ngrok binary

3). Unzip the file

4). Install Ngrok

5). Verify the installation

2. Get an authtoken

3. Run Ngrok again

4.Configuring Ngrok to Auto-Start on Ubuntu Virtual Machine

[K8s][Commands]

k8s

0. configure static ip address

1. ssh

2. Master

3. worker

[WebGL2.0][Basic]scene graph

Transition Matrix: localMatrix and worldMatrix

1. localMatrix and worldMatrix

2. Why Multiply the Matrices?

3. Example: Earth and Moon

4. Conclusion

[WebGL2.0][Basic]skinned model

1. Relative defination

Mesh

Primitive

Example

2. Core File: `action.yml`

Example: `action.yml`

Example: `action.yml`

Example: `action.yml`

Example: `Dockerfile`

Workflow File: `.github/workflows/main.yml`

1. `localMatrix` and `worldMatrix`

1. **gl_Position = projection * view * model * position;**