graphics-resources - :memo: a list of graphic programming resources

•    Javascript

---

A few of my bookmarks related to game development and realtime graphics programming.This will download all PDFs and power-point slides into a folder called resources.

graphic blogs list link awesome resources resource tutorial tutorials guide guides opengl webgl glsl hlsl dx10 game programming graphics gfx

gl-react - [gl-react v3 alpha] – a React library to write and compose WebGL shaders

•    Javascript

---

This repository hosts gl-react v3. For gl-react v2, please see ProjectSeptemberInc/gl-react. gre/gl-react repository is a complete rewrite of ProjectSeptemberInc/gl-react library (gl-react v2). It plans to be the gl-react v3. We keep both repository at same time because (1) this work is not yet finished and (2) this repository is now a "multi libraries" repository (it's just easier to maintain that way).

react webgl universal react-native glsl

glsl-optimizer - GLSL optimizer based on Mesa's GLSL compiler

•    C++

---

A C++ library that takes GLSL shaders, does some GPU-independent optimizations on them and outputs GLSL or Metal source back. Optimizations are function inlining, dead code removal, copy propagation, constant folding, constant propagation, arithmetic optimizations and so on. Apparently quite a few mobile platforms are pretty bad at optimizing shaders; and unfortunately they also lack offline shader compilers. So using a GLSL optimizer offline before can make the shader run much faster on a platform like that. See performance numbers in this blog post.

shaders glsl metal cross-compiler optimizer webgl shader optimize opengl essl es opengles

HTML-GL - Get as many FPS as you need and amazing effects by rendering HTML/CSS in WebGL

•    Javascript

---

HTML GL solves "the slow DOM problem" by creating WebGL representations of DOM elements and hiding actual DOM after. This speeds up HTML/CSS animations and transformations by using 3D hardware acceleration and allows to apply OpenGL effects as modern 3D games have. Using HTML GL you still work with HTML/CSS as you are common to, but DOM elements are just facades to their WebGL representations. These GPU accelerated textures are very effective from resources consuming perspective and are very cheap to transform or animate.

webgl html css glsl js performance nodom 60fps animations

pixi

•    Javascript

---

The aim of this project is to provide a fast lightweight 2D library that works across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. PixiJS is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.

canvas2d pixijs webgl glsl canvas rendering pixi game renderer rendering-engine rendering-2d-graphics

atom-beautify - :lipstick: Universal beautification package for Atom editor (:warning: Currently migrating to https://github

•    CoffeeScript

---

Atom-Beautify respects the core.telemetryConsent configuration option from Atom editor. If you do not wish to have usage data sent to Google Analytics then please set core.telemetryConsent to no or undecided option before using Atom-Beautify. See Anonymous Analytics section of docs for details. Thank you. Atom-Beautify is going to be completely rewritten with Unibeautify at its core! See unibeautify branch for work in progress and Issue #1174.

atom beautifier formatter coffeescript beautify prettifier prettify js-beautify format pretty html handlebars mustache xml css json sass scss less sql markdown typescript cpp c-sharp coldfusion uncrustify apex pawn vala erb editorconfig yaml front-matter jekyll marko svg elm arduino crystal csv ejs gherkin haskell hindent brittany jade jsx latex ocaml puppet riot.js spacebars swig tss twig visualforce xtemplate autopep8 coffee-formatter coffee-fmt clang-format dfmt elm-format html-beautifier csscomb gherkin-formatter gofmt latex-beautify fortran-beautifier jscs-fixer eslint eslint-fixer lua-beautifier ocp-indent perltidy php-cs-fixer phpcbf pretty-diff pug-beautify puppet-lint r remark rubocop ruby-beautify rustfmt sqlformat stylish-haskell tidy-markdown typescript-formatter yapf erl_tidy marko-beautifier vue vue-beautifier sassconvert formatr clojure-beautifier nunjucks ux-markup pybeautifier cljfmt bash beautysh glsl hh_format nginx nginx-beautify golang-template align-yaml goimports terraform terraformfmt tsx prettier verilog emacs-verilog-mode vhdl vhdl-beautifier gn blade

Blotter - A JavaScript API for drawing unconventional text effects on the web.

•    Javascript

---

A JavaScript API for drawing unconventional text effects on the web. When applying effects to text on the web, designers have traditionally been constrained to those provided by CSS. In the majority of cases this is entirely suitable – text is text right? Yet still, there exist numerous examples of designers combining CSS properties or gifs and images to create effects that evoke something more playful. Precisely here, Blotter exists to provide an alternative.

webgl glsl glsl-shaders typography text css animation design creative-coding lsd

StarWars.Android - This component implements transition animation to crumble view into tiny pieces.

•    Java

---

This component implements transition animation to crumble view into tiny pieces.

animation android opengl opengl-es glsl transition

js - turbo.js - perform massive parallel computations in your browser with GPGPU.

•    Javascript

---

turbo.js is a small library that makes it easier to perform complex calculations that can be done in parallel. The actual calculation performed (the kernel executed) uses the GPU for execution. This enables you to work on an array of values all at once. turbo.js is compatible with all browsers (even IE when not using ES6 template strings) and most desktop and mobile GPUs.

glsl gpu vector simd calculations shaders gpgpu parallel webgl

regl - 👑 Functional WebGL

•    Javascript

---

Check out the gallery. The source code of all the gallery examples can be found here. To try out regl right away, you can use the live editor in the gallery.

webgl regl stackgl gl graphics computer-graphics opengl glsl data flow reactive functional

glslify - :sparkles: A node.js-style module system for GLSL!

•    Javascript

---

It forms one of the core components of the stack.gl ecosystem, allowing you to install GLSL modules from npm and use them in your shaders. This makes it trivial to piece together different effects and techniques from the community, including but certainly not limited to fog, noise, film grain, raymarching helpers, easing functions and lighting models. A full list can be found on the stack.gl packages list under the "Shader Components" category.

ecosystem:stackgl browserify-transform glslify glsl module system cli shader webgl

yasea - RTMP live streaming client for Android

•    C

---

Yasea is an Android streaming client. It encodes YUV and PCM data from camera and microphone to H.264/AAC, encapsulates in FLV and transmits over RTMP. non-gpuimage for demo without GPUImage module.

rtmp android rtmp-stream camera media live-streaming android-sdk android-library gles shader opengles glsl android-development

glslViewer - Live GLSL coding render for MacOS and Linux

•    C++

---

Live-coding console tool that renders GLSL Shaders. Every file you use (frag/vert shader, images and geometries) are watched for modification, so they can be updated on the fly. This was tested with Ubuntu 16.04.

shaders fragment-shader c-plus-plus opengl-es glsl vertex-shaders glslviewer raspberrypi osx

THREE.MeshLine - Mesh replacement for THREE.Line

•    Javascript

---

First, create the list of vertices that will define the line. MeshLine accepts THREE.Geometry (looking up the .vertices in it) and Array/Float32Array. THREE.BufferGeometry coming soon, and may be others like Array of THREE.Vector3. Once you have that, you can create a new MeshLine, and call .setGeometry() passing the vertices.

line webgl threejs glsl shader lines mesh

Wagner - Effects composer for three.js

•    Javascript

---

Please use it only for review and test purposes. Don't hesitate to add issues or open a conversation about design decisions. Most of the shaders are from https://github.com/evanw/glfx.js. Others are from different sources and forums, papers, or my own.

postprocessing threejs glsl webgl shaders effects-composer

fieldplay - A vector field explorer

•    Javascript

---

Vector fields explorer. Made with WebGL, love and passion. more examples...

webgl vector-field particles glsl gpu

Olive - Non-linear video editor aiming to provide a fully-featured alternative to high-end professional video editing software

•    C++

---

Olive is a non-linear video editor aiming to provide a fully-featured alternative to high-end professional video editing software.

glsl opengl qt video-editor vst hardware-acceleration video editor

shaderc - A collection of tools, libraries and tests for shader compilation.

•    C++

---

Shaderc has maintained backward compatibility for quite some time, and we don't anticipate any breaking changes. Ongoing enhancements are described in the CHANGES file.For licensing terms, please see the LICENSE file. If interested in contributing to this project, please see CONTRIBUTING.md.

shaderc spirv glsl hlsl compiler graphics vulkan glslang

ShaderParticleEngine - A GLSL-heavy particle engine for THREE

•    Javascript

---

The purpose of this library is to make creating particle effects using THREE.js and WebGL as simple as possible. The heavy-lifting is done by the GPU, freeing up CPU cycles. Emitters are created by first creating an instance of SPE.Group. It is in the group where ShaderMaterial settings are applied, and the texture for all emitters added to that group is set. Multiple groups can be created, but if efficiency is a high-priority then as few groups as possible should be created. The group takes care of uploading emitter data to the GPU for simulation and rendering, so the fewer chunks of data that get sent the better.

three.js webgl particle particles glsl shader spe

glslEditor - Simple WebGL Fragment Shader Editor

•    Javascript

---

Friendly GLSL Shader editor based on Codemirror compatible with glslViewer (C++/OpenGL ES) and glslCanvas (JS/WebGL). Was originaly develop to work as a embebed editor for The Book of Shaders. But now have grown as a stand alone Web app. Thanks to their compatibility with other apps of this ecosystems like glslViewer that runs in the RaspberryPi directly from console, GlslEditor interact with other projects like OpenFrame.io allowing the user to export the shaders to frames with only one button.

glsl shader editor