Giter VIP home page Giter VIP logo

grafkom-webgl's Introduction

Grafkom-WebGL

Pada tugas 1 dari mata kuliah IF3260, kami membangun program dengan kakas WebGL untuk membangun program sederhana yang berfungsi menggambar model-model geometri serta mengaplikasikan berbagai modifikasi terhadap model-model tersebut. Program ini tidak menggunakan library eksternal. Kami membangun sendiri semua fungsi-fungsi primitif yang dibutuhkan untuk membangun program yang tidak disediakan oleh WebGL.

Kelompok:

Nama Nim
Reinaldo Antolis 13519015
Vionie Novencia Thanggestyo 13520006
Muhammad Garebaldhie ER Rahman 13520029

Cara Menjalankan Program

  1. Clone Repository
  2. Double click pada index.html
  3. Tekan tombol help yang ada pada bagian kanan atas
  4. Pilih model yang mau digambar
  5. Klik canvas untuk menggambar
  6. Pilih objek yang ingin diedit
  7. Klik tombol edit
  8. Pilih fitur edit yang diinginkan
  9. Lakukan pengeditan sesuai jenis fitur edit
  10. Klik tombol save untuk menyimpan model
  11. Klik tombol load untuk memuat model dari file eksternal

Manual untuk menjalankan program secara selengkapnya terdapat di folder doc, file laporan

Fungsi-Fungsi Non-Primitive WebGL yang Dibuat

  • getMouse Position Mendapatkan posisi mouse pada canvas

  • getRGB Mendapatkan enkoding RGB dari color selector

  • resizeCanvas Mengatur ulang ukuran canvas

  • transformCoordinate Merubah koordinat layar menjadi koordinat clip (web gl)

  • loadShader Fungsi yang digunakan untuk meload shader webgl

  • createShaderProgram Membuat program yang berisi shader yang telah dibuat, nantinya program ini akan digunakan untuk proses rendering

  • render Fungsi ini akan merender object menggunakan program yang telah dibuat.

Implemented Features

  1. Draw Line
  2. Draw Rectangle
  3. Draw Square
  4. Draw Polygon
  5. Polygon by convex hull
  6. Geometric transofrmation
    1. Dilatation
    2. Translation
    3. Rotation
    4. Shear
  7. Save / load models

Folder Structure

│ README.md
│
├───doc
├───src
│ │ feature.js
│ │ index.css
│ │ index.html
│ │ main.js
│ │ model.js
│ │ util.js
│ │
│ └───assets
│ dotted-polygon.png
│ help.png
│ line.png
│ polygon.png
│ rectangle.png
│ save.png
│ square.png
│
└───test
.gitkeep
save.json
save_2.json

grafkom-webgl's People

Contributors

ilovenooodles avatar reinaldo16519320 avatar vionienovencia avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.