Wikibooks

Programowanie w systemie UNIX/WebGl

< Programowanie w systemie UNIX
WebGL, an OpenGL-ES dialect for web browsers, which uses GLSL for shaders

WebGl jest to biblioteka JavaScript zapewniająca dostęp ( ang language bindings, glue code) do OpenGL (ES) 2.0

  • WebGL używa języka GLSL (ang shading language)


OpenGL

  • może być uzywany bezpośrednio w elemencie Canvas z HTML [1]
  • zapewnia dostęp do renderowania sprzętowego
  • dzięki dostępie przez przeglądarkę www (WUI = Web UI) jest bardzo przenośna ( wieloplatformowa), nie wymaga instalacji, plug-inów, specjlnej kompilacji dla różnych systemów operacyjnych[2]


Test edytuj

Środowisko edytuj

StackGl


THREE.js edytuj

Warstwy[3]

  • THREE.js ( biblioteka wyższego rzędu ) - wie jak obliczyć Cieniowanie Phonga (ang. Phong lighting)
  • WebGL - wie jak wysłąć dane do GPU
  • GPU - wie jak wykonać obliczenia matematyczne

Programy edytuj

editor edytuj


ShaderToy edytuj

GLSL edytuj

This help only covers the parts of GLSL ES that are relevant for Shadertoy. For the complete specification please have a look at GLSL ES specification

Language:

  • Version: WebGL 2.0
  • Arithmetic: ( ) + - ! * / %
  • Logical/Relatonal: ~ < > <= >= == != && ||
  • Bit Operators: & ^ | << >>
  • Comments: // /* */
  • Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 mat2 mat3 mat4 mat?x? sampler2D, sampler3D, samplerCube
  • Format: float a = 1.0; int b = 1; uint i = 1U; int i = 0x1;
  • Function Parameter Qualifiers: [none], in, out, inout
  • Global Variable Qualifiers: const
  • Vector Components: .xyzw .rgba .stpq
  • Flow Control: if else for return break continue switch/case
  • Output: vec4 fragColor
  • Input: vec2 fragCoord
  • Preprocessor: #define #undef #if #ifdef #ifndef #else #elif #endif #error #pragma #line


vec2 a = vec2(1.0, 2.0);


Built-in Functions:

  • ftype radians (ftype degrees)
  • ftype degrees (ftype radians)
  • ftype sin (ftype angle)
  • ftype cos (ftype angle)
  • ftype tan (ftype angle)
  • ftype asin (ftype x)
  • ftype acos (ftype x)
  • ftype atan (ftype y, ftype x)
  • ftype atan (ftype y_over_x)
  • ftype sinh (ftype x)
  • ftype cosh (ftype x)
  • ftype tanh (ftype x)
  • ftype asinh (ftype x)
  • ftype acosh (ftype x)
  • ftype atanh f(type x)
  • ftype pow (ftype x, ftype y)
  • ftype exp (ftype x)
  • ftype log (ftype x)
  • ftype exp2 (ftype x)
  • ftype log2 (ftype x)
  • ftype sqrt (ftype x)
  • ftype inversesqrt (ftype x)
  • type abs (type x)
  • type sign (type x)
  • ftype floor (ftype x)
  • ftype ceil (ftype x)
  • ftype trunc (type x)
  • ftype fract (ftype x)
  • ftype mod (ftype x, ftype y)
  • ftype modf (ftype x, out ftype i)
  • type min (type x, type y)
  • type max (type x, type y)
  • type clamp (type x, type minV, type maxV)
  • ftype mix (ftype x, ftype y, ftype a) : mix performs a linear interpolation between x and y using a to weight between them. The return value is computed as  .
    • x Specify the start of the range in which to interpolate.
    • y Specify the end of the range in which to interpolate.
    • a Specify the value to use to interpolate between x and y
  • type step (type edge, type x)
  • ftype smoothstep (ftype a, ftype b, ftype x)
  • float length (vec x). returns the length of the vector:  
  • float distance (vec p0, vec p1)
  • float dot (vec x, vec y)
  • vec3 cross (vec3 x, vec3 y)
  • vec normalize (vec x)
  • vec faceforward (vec N, vec I, vec Nref)
  • vec reflect (vec I, vec N)
  • vec refract (vec I, vec N, float eta)
  • float determinant(mat? m)
  • mat?x? outerProduct(vec c, vec r)
  • mat?x? matrixCompMult (mat?x? x, mat?x? y)
  • mat? inverse (mat? inverse)
  • mat?x? transpose (mat?x? inverse)
  • vec4 texture( sampler , vec coord [, float bias])
  • vec4 textureLod( sampler, vec coord, float lod)
  • vec4 textureLodOffset( sampler sampler, vec coord, float lod, ivec offset)
  • vec4 textureGrad( sampler , vec coord, vec2 dPdx, vec2 dPdy)
  • vec4 textureGradOffset sampler , vec coord, vec dPdx, vec dPdy, vec offset)
  • vec4 textureProj( sampler , vec coord [, float bias])
  • vec4 textureProjLod( sampler , vec coord, float lod)
  • vec4 textureProjLodOffset( sampler , vec coord, float lod, vec? offset)
  • vec4 textureProjGrad( sampler , vec coord, vec2 dPdx, vec2 dPdy)
  • vec4 texelFetch( sampler , ivec coord, int lod)
  • vec4 texelFetchOffset( sampler, ivec coord, int lod, ivec offset )

ivec textureSize( sampler , int lod) ftype dFdx (ftype x) ftype dFdy (ftype x) ftype fwidth (ftype p) btype isnan (ftype x) btype isinf (ftype x) ftype intBitsToFloat (itype v) ftype uintBitsToFloat (utype v) itype floatBitsToInt (ftype v) utype floatBitsToUint (ftype v) uint packSnorm2x16 (vec2 v) uint packUnorm2x16 (vec2 v) vec2 unpackSnorm2x16 (uint p) vec2 unpackUnorm2x16 (uint p) bvec lessThan (vec x, vec y) bvec lessThanEqual (vec x, vec y) bvec greaterThan (vec x, vec y) bvec greaterThanEqual (vec x, vec y) bvec equal (type x, type y) bvec notEqual (type x, type y) bool any (bvec x) bool all (bvec x) bvec not (bvec x)

The dot2(v) function returns the dot product of a vector with itself (or the square of its length).


How-to

  • Use structs: struct myDataType { float occlusion; vec3 color; }; myDataType myData = myDataType(0.7, vec3(1.0, 2.0, 3.0));
  • Initialize arrays: float[] x = float[] (0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6);
  • Do conversions: int a = 3; float b = float(a);
  • Do component swizzling: vec4 a = vec4(1.0,2.0,3.0,4.0); vec4 b = a.zyyw;
  • Access matrix components: mat4 m; m[1] = vec4(2.0); m[0][0] = 1.0; m[2][3] = 2.0;

Be careful!

  • the f suffix for floating pont numbers: 1.0f is illegal in GLSL. You must use 1.0
  • saturate(): saturate(x) doesn't exist in GLSL. Use clamp(x,0.0,1.0) instead
  • pow/sqrt: please don't feed sqrt() and pow() with negative numbers. Add an abs() or max(0.0,) to the argument
  • mod: please don't do mod(x,0.0). This is undefined in some platforms
  • variables: initialize your variables! Don't assume they'll be set to zero by default
  • functions: don't call your functions the same name as any of your variables

Shadertoy Inputs

  • vec3 iResolution image/buffer The viewport resolution (z is pixel aspect ratio, usually 1.0)
  • float iTime image/sound/buffer Current time in seconds
  • float iTimeDelta image/buffer Time it takes to render a frame, in seconds
  • int iFrame image/buffer Current frame
  • float iFrameRate image/buffer Number of frames rendered per second
  • float iChannelTime[4] image/buffer Time for channel (if video or sound), in seconds
  • vec3 iChannelResolution[4] image/buffer/sound Input texture resolution for each channel
  • vec4 iMouse image/buffer xy = current pixel coords (if LMB is down). zw = click pixel
  • sampler2D iChannel{i} image/buffer/sound Sampler for input textures i
  • vec4 iDate image/buffer/sound Year, month, day, time in seconds in .xyzw
  • float iSampleRate image/buffer/sound The sound sample rate (typically 44100)

Shadertoy Outputs

  • Image shaders: fragColor is used as output channel. It is not, for now, mandatory but recommended to leave the alpha channel to 1.0.
  • Sound shaders: the mainSound() function returns a vec2 containing the left and right (stereo) sound channel wave data.

biblioteki edytuj

  • C++
    • igl = Intermediate Graphics Library (IGL) is a cross-platform library that commands the GPU. It provides a single low-level cross-platform interface on top of various graphics APIs (e.g. OpenGL, Metal and Vulkan)
sudo apt-get install clang xorg-dev libxinerama-dev libxcursor-dev libgles2-mesa-dev libegl1-mesa-dev libglfw3-dev libglew-dev libstdc++-12-dev
git clone git@github.com:facebook/igl.git
cd igl
python3 deploy_content.py
python3 deploy_deps.py
cd build
cmake .. -G "Unix Makefiles"
cmake --build .  # You can run cmake --build . at the top level directory to build everything


front-end libraries:

  • Three.js for 3D rendering
  • Ace for the editors
  • dat.GUI for the GUI panel
  • clipboard.js for copying text to clipboard
  • RequireJS for modules loading

Przykłady edytuj

mandelbrot edytuj

Julia edytuj

biblioteki edytuj

  • piLibs-JS A super simple and minimal set of libraries to do 3D rendering (WebGL 2.0 only), reading files and other related tasks. It's 47 kilobytes minified, but you can probably only include the modules you need and make a much smaller distributable.

Źródła edytuj

  1. ↑ Shader Toy by Mikael Hvidtfeldt Christensen
  2. ↑ WebGL Starter Anton Gerdelan. 18 May 2015.
  3. ↑ computer-graphics Computer Graphics Learning Materials by Raimond Tunnel, Jaanus Jaggo, Margus Luik
  4. ↑ | Newton basiun by Aaron Golden

Zobacz również edytuj


Źródło: „https://pl.wikibooks.org/w/index.php?title=Programowanie_w_systemie_UNIX/WebGl&oldid=478389”