Giter VIP home page Giter VIP logo

shaderdebugger's Introduction

ShaderDebugger: A tool function for shader debugging

Intro

Codea supports the coder to write and run the OpenGL ES shader code on iPad directlly, it is very useful for designing 3D program, but the vars in shader can not be wathched directly, it makes the debug hardly. Because of this I try to make a tool function to show the value of var in shader outpu th screen, a proptype, it is simple, bad performance, but can work. With it we can watch the var in shader easily.

About the functions

In fact, they are a few global vars and functions:

  • Use for display the value of var showFloat()
  • Use for generate the font ledRectChar()
  • Use for judge the rect area inRect()

Usage:

Copy the functions into the code of fragment shader, then run the showFloat() in main(), like below:

Show the int

Positive int

shoufloat(float(2345));

Negative int

shoufloat(float(2345));

Show the float

Float

shoufloat(.2345));
shoufloat(1234.345);
shoufloat(-1234.345);

Show the zero

shoufloat(.0);

Screeshot

  • showFloat(float(-1234));

-1234

  • showFloat(2097152.411);

without fract

  • showFloat(2097152.11);

with fract

Other Info

Articles record the whole development: from an idea to a available propotype

How to watch a var in shader? -A new solution: change the question from 'What is' to 'Is it'
How to watch a var in shader? -A new solution: change the question from 'What is' to 'Is it'


ShaderDebugger: 着色器调试工具函数

介绍

Codea 支持在 iPad 上直接编写 OpenGL ESshader 程序, 对于设计 3D 程序而已非常方便, 但是 shader 内部的变量无法直接观察, 使得调试起来比较困难. 鉴于此, 试着写了一个可以把 shader 内部变量值输出到屏幕的工具, 类似原型的东西, 比较粗糙, 性能很差, 不过刚好能用, 利用它可以轻松地观察 shader 内变量的值.

工具函数说明

实际上就是几个函数, 包括:

  • 用于最终显示变量值的 showFloat()
  • 用于生成所需字型的 ledRectChar()
  • 用于判断矩形区域范围的 inRect()

使用方法

把这几个函数的声明和实现拷贝到 fragment shader 的代码中, 直接在 main 函数中调用即可, 如下所示:

显示整数

正整数

shoufloat(float(2345));

负整数

shoufloat(float(2345));

显示浮点数

浮点数

shoufloat(.2345));
shoufloat(1234.345);
shoufloat(-1234.345);

显示0

shoufloat(.0);

其他

记录完成这个原型工具的整个开发调试过程的思路

OpenGL ES 2.0 Shader 调试新思路(一): 改变提问方式
OpenGL ES 2.0 Shader 调试新思路(二): 做一个可用的原型

shaderdebugger's People

Contributors

freeblues avatar

Watchers

 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.