Code Monkey home page Code Monkey logo

zero-graphics's Introduction

Zero Graphics

A very minimal OpenGL ES 2.0 library for Zig. Opens you a window and let's you draw things. Comes with a pixel-perfect 2D renderer and maybe some day even with a bit of a 3D api.

Logo

Features

  • Multi-platform support
    • Desktop (Linux, MacOS, Windows, ...)
    • WebAssembly
    • Android
  • Pixel perfect 2D rendering
    • Primitives (line, rectangle, triangle, ...)
    • Text / TTF fonts
    • Textures
  • Basic 3D rendering
    • Multi-mesh models with flat textures
  • Zig-style immediate-mode user interface
  • Proper DPI scaling support in renderer

Project status

CI

The CI coverage currently looks like this:

· Windows macOS Linux
Desktop
WebAssembly
Android
zero-init
zero-convert

Status: Nightly Build

Previews

Work-in-progress, but works quite well already. There is one big project depending on it and is used as a real-world application driver behind Zero Graphics.

Preview screenshot for SDL2

Preview screenshot in FireFox

Project Goals

Basic Framework

  • Support the following platforms
    • Wasm
      • Create OpenGL ES 2.0 context
      • Input Mouse
      • Input Keyboard
    • Linux Desktop
      • Create OpenGL ES 2.0 context
      • Input Mouse
      • Input Keyboard
    • Windows Desktop (not tested, but should work via SDL2)
    • Android
      • Create OpenGL ES 2.0 context
      • Input Mouse
      • Input Keyboard
  • Create an OpenGL ES 2.0 context
  • Provide input events
    • Single pointer motion (finger or mouse)
    • Single click event (finger, mouse)
    • Text input for keyboard (utf-8 encoded)
  • Provide window events
    • Resize
    • Close
  • Provide access to the underlying backend
  • Allow creation of single-file applications
    • Single executable for easy distribution
    • Embedded resources

2D Rendering library

  • Pixel perfect drawing of
    • Lines
    • Rectangles
    • Images
      • Basic "copy full texture to rectangle"
      • Copy portion of texture ("atlas rendering")
  • TTF font rendering via stb_ttf
  • Image loading via zigimg
  • Stack based/nested scissoring

3D Rendering library

  • Tool based on Assimp to convert models into loadable format
    • static geometry
    • dynamic/animated geometry
  • Blender export script
  • Draw static geometry
  • Draw animated geometry
    • Skinning based on skeletons
  • Axis- and camera aligned billboards
  • Basic particles
  • Tiny built-in pipeline with
    • shadow mapping
    • planar reflections
    • water reflections

Dependencies

Desktop

Web

Android

  • Android SDK
  • Android NDK
  • Android Build Tools
  • OpenJDK
  • some other tools

Building / Running

This project uses submodules, so to get started, clone the repo with submodules recursively:

[user@computer work]$ git clone https://github.com/MasterQ32/zero-graphics --recurse-submodules

or, if you already cloned the repository:

[user@computer work]$ git clone https://github.com/MasterQ32/zero-graphics
[user@computer work]$ cd zero-graphics/
[user@computer zero-graphics]$ git submodule update --init --recursive

Desktop PC

Requires SDL2 to be installed.

[user@computer zero-graphics]$ zig build run

A window should open with the application in fullscreen.

The following environment variables can control how zero-graphics behaves:

  • ZEROG_FULLSCREEN is y for forced fullscreen or n for forced window mode.
  • ZEROG_RESIZEABLE is y for forced resizable window.
  • ZEROG_DPI is a number specifying the pixel density.

Web/Wasm version

Includes a teeny tiny web server for debugging.

[user@computer zero-graphics]$ zig build install run-wasm

Now visit http://127.0.0.1:8000/demo_application.htm to see the demo.

Android

Connect your phone first and install both a JDK as well as the Android SDK with NDK included. The ZeroGraphics build system will tell you if it couldn't auto-detect the SDK paths.

[user@computer zero-graphics]$ zig build -Denable-android run-app

The app should now be installed and started on your phone.

Documentation

Getting started

To create a new project, build this repository with zig build first. Then use the tool zero-init from zig-out/bin to initialize a new project:

[felix@denkplatte-v2 ~]$ mkdir game
[felix@denkplatte-v2 ~]$ cd game
[felix@denkplatte-v2 game]$ /path/to/zero-graphics/zig-out/bin/zero-init symlink # initialize via symlink, quickest option. use zero-init -h to see all options
[felix@denkplatte-v2 game]$ ls
src  vendor  build.zig
[felix@denkplatte-v2 game]$ zig build
[felix@denkplatte-v2 game]$ zig build run
info(sdl): SDL Video Driver:     x11
info(sdl): Render resolution:  1280×720
info(sdl): Virtual resolution: 1280×720
info(demo): OpenGL Version:       OpenGL ES 3.2 Mesa 21.2.3
info(demo): OpenGL Vendor:        AMD
info(demo): OpenGL Renderer:      AMD Radeon(TM) Vega 10 Graphics (RAVEN, DRM 3.41.0, 5.13.19_1, LLVM 12.0.1)
info(demo): OpenGL GLSL:          OpenGL ES GLSL ES 3.20
info(zero_graphics): [shader compiler] [other] Shader Stats: SGPRS: 16 VGPRS: 8 Code Size: 212 LDS: 0 Scratch: 0 Max Waves: 10 Spilled SGPRs: 0 Spilled VGPRs: 0 PrivMem VGPRs: 0
info(zero_graphics): [shader compiler] [other] Shader Stats: SGPRS: 16 VGPRS: 8 Code Size: 40 LDS: 0 Scratch: 0 Max Waves: 10 Spilled SGPRs: 0 Spilled VGPRs: 0 PrivMem VGPRs: 0
info(zero_graphics): [shader compiler] [other] Shader Stats: SGPRS: 8 VGPRS: 24 Code Size: 52 LDS: 0 Scratch: 0 Max Waves: 10 Spilled SGPRs: 0 Spilled VGPRs: 0 PrivMem VGPRs: 0
info(zero_graphics): [shader compiler] [other] Shader Stats: SGPRS: 8 VGPRS: 24 Code Size: 24 LDS: 0 Scratch: 0 Max Waves: 10 Spilled SGPRs: 0 Spilled VGPRs: 0 PrivMem VGPRs: 0
info(zero_graphics): [shader compiler] [other] Shader Stats: SGPRS: 8 VGPRS: 8 Code Size: 60 LDS: 0 Scratch: 0 Max Waves: 10 Spilled SGPRs: 0 Spilled VGPRs: 0 PrivMem VGPRs: 0
info(zero_graphics): [shader compiler] [other] Shader Stats: SGPRS: 16 VGPRS: 20 Code Size: 392 LDS: 0 Scratch: 0 Max Waves: 10 Spilled SGPRs: 0 Spilled VGPRs: 0 PrivMem VGPRs: 0

Check out the file src/main.zig to see your app skeleton. You can also adjust the build.zig to set your project name.

The functions are roughly called in this order:

Application workflow

The separation between application init and graphics init is relevant for Android apps which will destroy their window when you send it into the background and will recreate it when it is selected again. This means that all GPU content will be lost then and must be restored.

Your application state will not be destroyed, so the rendering can render the same data as before.

Architecture

zero-graphics follows a somewhat unusual architecture for Zig applications. Your applications is a package that will be consumed by a zero-graphics host. This host is implementing the "main loop" and will invoke both update and render periodically. It will also initialize and open the window and pump events.

This design allows zero-graphics to run on several different platforms, including most desktop PCs, Android and even web browsers via WebAssembly.

You can check out the Sdk.zig file to find out how a application is built.

zero-graphics's People

Contributors

fabioarnold avatar iddev5 avatar ikskuh avatar ringtailsoftware avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

zero-graphics's Issues

Wasm instructions

Instructions for wasm do not seem to work.

zig build install run-wasm
Now visit http://127.0.0.1:8000/index.htm to see the demo.

This creates a web server that serves files from top-level www directory, but the build process puts files to zig-out/www directory. Also the file the html file in zig-out/www is demo_application.htm, not index.html.

Git submodule setup missing from the README?

I guess after cloning the repo you'll need also to run these?

cd zero-graphics
git submodule init
git submodule update

cd vendor/zig-assimp
git submodule init
git submodule update

LLVM ERROR: Unable to expand fixed point multipiication.

I am attempting to build zero-graphics on NixOS, but I'm getting an error from llvm about fixed point multiplication. This is probably an issue with zig or clang.

  • zig version 0.10.0-dev.4474+b41b35f57
LLVM Emit Object... LLVM ERROR: Unable to expand fixed point multiplication.
error: demo_application...
error: The following command terminated unexpectedly:
/nix/store/nfhlbgdsi2d5abl22pgllcfl12mq7hb8-zig-0.10.0-dev.4474+b41b35f57/bin/zig build-lib /home/desttinghim/Code/random/zero-graphics/src/main/wasm.zig -cflags -std=c99 -- /home/desttinghim/Code/random/zero-graphics/src/rendering/stb_truetype.c --cache-dir /home/desttinghim/Code/random/zero-graphics/zig-cache --global-cache-dir /home/desttinghim/.cache/zig --name demo_application -dynamic -fsingle-threaded -target wasm32-freestanding-musl -mcpu generic --pkg-begin application /home/desttinghim/Code/random/zero-graphics/examples/demo-application.zig --pkg-begin zero-graphics /home/desttinghim/Code/random/zero-graphics/src/zero-graphics.zig --pkg-begin zigimg /home/desttinghim/Code/random/zero-graphics/vendor/zigimg/zigimg.zig --pkg-end --pkg-begin ziglyph /home/desttinghim/Code/random/zero-graphics/vendor/ziglyph/src/ziglyph.zig --pkg-end --pkg-begin zigstr /home/desttinghim/Code/random/zero-graphics/vendor/zigstr/src/Zigstr.zig --pkg-begin ziglyph /home/desttinghim/Code/random/zero-graphics/vendor/ziglyph/src/ziglyph.zig --pkg-end --pkg-end --pkg-begin TextEditor /home/desttinghim/Code/random/zero-graphics/vendor/text-editor/src/TextEditor.zig --pkg-begin ziglyph /home/desttinghim/Code/random/zero-graphics/vendor/ziglyph/src/ziglyph.zig --pkg-end --pkg-end --pkg-end --pkg-begin zlm /home/desttinghim/Code/random/zero-graphics/vendor/zlm/zlm.zig --pkg-end --pkg-end --pkg-begin application-meta /home/desttinghim/Code/random/zero-graphics/zig-cache/zero-graphics/o/37a97a273e465a12dc388ba9b37251725c277b2e/app-meta.zig --pkg-end --pkg-begin zigimg /home/desttinghim/Code/random/zero-graphics/vendor/zigimg/zigimg.zig --pkg-end --pkg-begin ziglyph /home/desttinghim/Code/random/zero-graphics/vendor/ziglyph/src/ziglyph.zig --pkg-end --pkg-begin zigstr /home/desttinghim/Code/random/zero-graphics/vendor/zigstr/src/Zigstr.zig --pkg-begin ziglyph /home/desttinghim/Code/random/zero-graphics/vendor/ziglyph/src/ziglyph.zig --pkg-end --pkg-end --pkg-begin TextEditor /home/desttinghim/Code/random/zero-graphics/vendor/text-editor/src/TextEditor.zig --pkg-begin ziglyph /home/desttinghim/Code/random/zero-graphics/vendor/ziglyph/src/ziglyph.zig --pkg-end --pkg-end -I /home/desttinghim/Code/random/zero-graphics/vendor/stb -I /home/desttinghim/Code/random/zero-graphics/src/scintilla --main-pkg-path /home/desttinghim/Code/random/zero-graphics/src --enable-cache
error: the following build command failed with exit code 6:
/home/desttinghim/Code/random/zero-graphics/zig-cache/o/115dffe9a2cc3ef97671e9e0d4dd066b/build /nix/store/nfhlbgdsi2d5abl22pgllcfl12mq7hb8-zig-0.10.0-dev.4474+b41b35f57/bin/zig /home/desttinghim/Code/random/zero-graphics /home/desttinghim/Code/random/zero-graphics/zig-cache /home/desttinghim/.cache/zig

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.