{"id":13658116,"url":"https://github.com/learosema/hello-webgl","last_synced_at":"2025-04-14T17:35:52.205Z","repository":{"id":35064448,"uuid":"39204543","full_name":"learosema/hello-webgl","owner":"learosema","description":"First steps with WebGL","archived":false,"fork":false,"pushed_at":"2022-12-11T00:31:09.000Z","size":3208,"stargazers_count":29,"open_issues_count":2,"forks_count":4,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-11-10T11:39:20.443Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"kriswallsmith/assetic","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/learosema.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-16T15:18:54.000Z","updated_at":"2024-01-24T00:34:05.000Z","dependencies_parsed_at":"2023-01-15T13:03:55.072Z","dependency_job_id":null,"html_url":"https://github.com/learosema/hello-webgl","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learosema%2Fhello-webgl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learosema%2Fhello-webgl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learosema%2Fhello-webgl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learosema%2Fhello-webgl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learosema","download_url":"https://codeload.github.com/learosema/hello-webgl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235082228,"owners_count":18932920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T05:00:56.461Z","updated_at":"2025-01-22T07:52:21.907Z","avatar_url":"https://github.com/learosema.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Hello WebGL World!\n\n[![Build Status](https://travis-ci.org/terabaud/hello-webgl.svg?branch=master)](https://travis-ci.org/terabaud/hello-webgl)\n\nThis [repository](https://github.com/terabaud/hello-webgl/) features my experiments with WebGL. \nMost demos are using [GLea](lib/glea/), a minimalistic WebGL library written by myself.\n\n * [Live Demos](https://terabaud.github.io/hello-webgl/)\n * [Slides of my talk about WebGL](https://terabaud.github.io/hello-webgl/talk-webgl/)\n\n# Demos\n\n * [Triangle](triangle/)\n * [Patterns using modulo](patterns/) \n * [Morphing Stars](morphing-stars/)\n * [Fractal](fractal/), using [Phenomenon](https://github.com/vaneenige/phenomenon/)\n * [Cube](cube/)\n * [Texture mapping](texture-mapping/)\n * [Access the webcam via webgl and apply distortions](webcam/)\n * [Webcam Triangle Grid](webcam-triangle-grid/)\n * [Webcam Triangle Grid variation with additional vertex motion](webcam-triangle-grid-2/)\n * [Webcam Sobel edge detection](sobel-edge-detection/) ([check out the wikipedia article](https://en.wikipedia.org/wiki/Sobel_operator))\n * [Webcam ordered dithering](dither-cam/) ([wikipedia](https://en.wikipedia.org/wiki/Ordered_dithering))\n * [Raymarching](raymarching/)\n * [Infinite rocks (raymarching with shadows)](raymarching-shadows/)\n * [Shape morphing 3D geometries via glsl mix](shape-morph-3d/)\n * [Rainbow fractal with complex numbers and the series of greatest prime factors](exponential/)\n * [Image Slider component](image-slider/)\n\n# Running it locally\n\nType `npm install` and `npm start` to start a local development server. \n\nCurrently, there is no transpiling/bundling toolchain like Webpack and Babel/TypeScript.\n\nIt's just node [express](https://expressjs.com) serving static files. As other out-of-the-box web servers require some additional configuration, I made a simple server.js on my own. \n\n# Older Demos\n\nThe older demos use an esoteric coding style library I wrote in the 2015s. It provides helper functions for compiling shaders and matrix/vector maths. The code itself of the library is hard to read, but the examples may be useful. Most of the examples just draw a square to the fullscreen and let the fragment shader do its work.\n\n* [Glitchy Mandelbrot](fractal.html)\n* [Black Line Weekend](blacklineweekend.html)\n* [Pastel Flower Weekend](pastelflowerweekend.html)\n* [Moire](moire.html)\n* [Moire 2](moire2.html)\n* [3D Cube](hello-3d.html)\n* [Shapes](shapes.html)\n* [Multiple Shaders](multiple-shaders.html)\n* [Relaxing Cubes](relaxing-cubes.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearosema%2Fhello-webgl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearosema%2Fhello-webgl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearosema%2Fhello-webgl/lists"}