├── .eslintrc.js ├── .gitattributes ├── .github └── workflows │ └── deploy-to-gh-pages.yml ├── .gitignore ├── .npmrc ├── .vscode ├── launch.json └── settings.json ├── 3rdparty ├── atom-one-dark-reasonable.css ├── hand-1.3.7.js ├── highlight.pack.js ├── jquery-1.11.2.min.js ├── monokai-sublime.css ├── prism-material-dark.css ├── prism.js ├── showdown.min.js ├── tomorrow-night-bright.css └── twgl-full.module.js ├── CNAME ├── Gruntfile.js ├── LICENSE ├── README.md ├── build ├── conf │ └── jsdoc.conf.json ├── jsdoc-template │ ├── LICENSE.md │ └── template │ │ ├── jsdoc.conf.json │ │ ├── moment.js │ │ ├── publish.js │ │ ├── static │ │ ├── img │ │ │ ├── glyphicons-halflings-white.png │ │ │ └── glyphicons-halflings.png │ │ ├── scripts │ │ │ ├── URI.js │ │ │ ├── bootstrap-dropdown.js │ │ │ ├── bootstrap-tab.js │ │ │ ├── docstrap.lib.js │ │ │ ├── prettify │ │ │ │ ├── Apache-License-2.0.txt │ │ │ │ ├── jquery.min.js │ │ │ │ ├── lang-css.js │ │ │ │ └── prettify.js │ │ │ ├── sunlight.js │ │ │ └── toc.js │ │ └── styles │ │ │ ├── darkstrap.css │ │ │ ├── prettify-tomorrow.css │ │ │ └── site.cerulean.css │ │ └── tmpl │ │ ├── container.tmpl │ │ ├── details.tmpl │ │ ├── example.tmpl │ │ ├── examples.tmpl │ │ ├── exceptions.tmpl │ │ ├── fires.tmpl │ │ ├── layout.tmpl │ │ ├── mainpage.tmpl │ │ ├── members.tmpl │ │ ├── method.tmpl │ │ ├── params.tmpl │ │ ├── properties.tmpl │ │ ├── returns.tmpl │ │ ├── sections.tmpl │ │ ├── source.tmpl │ │ ├── tutorial.tmpl │ │ └── type.tmpl └── templates │ ├── analytics.template │ ├── diagram.template │ ├── example.template │ ├── header.template │ ├── image.template │ ├── index.template │ ├── lang-select.template │ ├── langs-meta.template │ ├── languages.template │ ├── lesson.template │ ├── missing.template │ ├── octocat-icon.svg │ └── repobanner.template ├── contributors.md ├── docs.md ├── icon.png ├── package.json ├── robots.txt ├── source_assets ├── 3df.afdesign ├── matrixstack.afdesign └── vertex-shader-anim.psd ├── toc.hanson ├── todo.md └── webgl ├── .eslintrc.js ├── background.html ├── embed-test.html ├── frustum-diagram.html ├── glyph-texture-atlas-maker.html ├── lessons ├── fr │ ├── index.md │ ├── langinfo.hanson │ ├── toc.html │ ├── webgl-2d-matrices.md │ ├── webgl-2d-rotation.md │ ├── webgl-2d-scale.md │ ├── webgl-2d-translation.md │ ├── webgl-3d-camera.md │ ├── webgl-3d-lighting-directional.md │ ├── webgl-3d-lighting-point.md │ ├── webgl-3d-orthographic.md │ ├── webgl-3d-perspective.md │ ├── webgl-3d-textures.md │ ├── webgl-drawing-multiple-things.md │ ├── webgl-fundamentals.md │ ├── webgl-how-it-works.md │ ├── webgl-scene-graph.md │ └── webgl-shaders-and-glsl.md ├── index.md ├── ja │ ├── index.md │ ├── langinfo.hanson │ ├── toc.html │ ├── webgl-2-textures.md │ ├── webgl-2d-matrices.md │ ├── webgl-2d-rotation.md │ ├── webgl-2d-scale.md │ ├── webgl-2d-translation.md │ ├── webgl-3d-camera.md │ ├── webgl-3d-lighting-directional.md │ ├── webgl-3d-lighting-point.md │ ├── webgl-3d-orthographic.md │ ├── webgl-3d-perspective.md │ ├── webgl-3d-textures.md │ ├── webgl-animation.md │ ├── webgl-boilerplate.md │ ├── webgl-data-textures.md │ ├── webgl-fundamentals.md │ ├── webgl-how-it-works.md │ ├── webgl-image-processing-continued.md │ ├── webgl-image-processing.md │ ├── webgl-points-lines-triangles.md │ ├── webgl-qna-how-to-achieve-moving-line-with-trail-effects.md │ ├── webgl-resizing-the-canvas.md │ ├── webgl-setup-and-installation.md │ └── webgl-shaders-and-glsl.md ├── ko │ ├── index.md │ ├── lang.css │ ├── langinfo.hanson │ ├── toc.html │ ├── webgl-2-textures.md │ ├── webgl-2d-drawimage.md │ ├── webgl-2d-matrices.md │ ├── webgl-2d-matrix-stack.md │ ├── webgl-2d-rotation.md │ ├── webgl-2d-scale.md │ ├── webgl-2d-translation.md │ ├── webgl-2d-vs-3d-library.md │ ├── webgl-3d-camera.md │ ├── webgl-3d-geometry-lathe.md │ ├── webgl-3d-lighting-directional.md │ ├── webgl-3d-lighting-point.md │ ├── webgl-3d-lighting-spot.md │ ├── webgl-3d-orthographic.md │ ├── webgl-3d-perspective-correct-texturemapping.md │ ├── webgl-3d-perspective.md │ ├── webgl-3d-textures.md │ ├── webgl-and-alpha.md │ ├── webgl-animation.md │ ├── webgl-anti-patterns.md │ ├── webgl-attributes.md │ ├── webgl-boilerplate.md │ ├── webgl-cors-permission.md │ ├── webgl-cross-platform-issues.md │ ├── webgl-cube-maps.md │ ├── webgl-data-textures.md │ ├── webgl-drawing-multiple-things.md │ ├── webgl-drawing-without-data.md │ ├── webgl-environment-maps.md │ ├── webgl-fog.md │ ├── webgl-framebuffers.md │ ├── webgl-fundamentals.md │ ├── webgl-how-it-works.md │ ├── webgl-image-processing-continued.md │ ├── webgl-image-processing.md │ ├── webgl-indexed-vertices.md │ ├── webgl-instanced-drawing.md │ ├── webgl-less-code-more-fun.md │ ├── webgl-load-obj-w-mtl.md │ ├── webgl-load-obj.md │ ├── webgl-matrix-vs-math.md │ ├── webgl-multiple-views.md │ ├── webgl-picking.md │ ├── webgl-planar-projection-mapping.md │ ├── webgl-points-lines-triangles.md │ ├── webgl-precision-issues.md │ ├── webgl-pulling-vertices.md │ ├── webgl-qna.md │ ├── webgl-ramp-textures.md │ ├── webgl-readpixels.md │ ├── webgl-references.md │ ├── webgl-render-to-texture.md │ ├── webgl-resizing-the-canvas.md │ ├── webgl-scene-graph.md │ ├── webgl-setup-and-installation.md │ ├── webgl-shaders-and-glsl.md │ ├── webgl-shadertoy.md │ ├── webgl-shadows.md │ ├── webgl-skinning.md │ ├── webgl-skybox.md │ ├── webgl-smallest-programs.md │ ├── webgl-sprites.md │ ├── webgl-state-diagram.md │ ├── webgl-text-canvas2d.md │ ├── webgl-text-glyphs.md │ ├── webgl-text-html.md │ ├── webgl-text-texture.md │ ├── webgl-texture-units.md │ ├── webgl-tips.md │ └── webgl-visualizing-the-camera.md ├── lang.css ├── langinfo.hanson ├── pl │ ├── index.md │ ├── langinfo.hanson │ ├── toc.html │ ├── webgl-2d-rotation.md │ ├── webgl-2d-translation.md │ ├── webgl-2d-vs-3d-library.md │ └── webgl-fundamentals.md ├── pt-br │ ├── index.md │ ├── langinfo.hanson │ ├── toc.html │ ├── webgl-2-textures.md │ ├── webgl-2d-scale.md │ ├── webgl-and-alpha.md │ ├── webgl-animation.md │ ├── webgl-setup-and-installation.md │ └── webgl-text-canvas2d.md ├── resources │ ├── 2d-scene-graph-diagram.js │ ├── 3d-in-canvas.html │ ├── 3d-in-webgl.html │ ├── 3d-math.js │ ├── 3df.svg │ ├── 3x3-math-translation-matrix.svg │ ├── 4-lines-4-points.svg │ ├── 4x4-math-translation-matrix.svg │ ├── avatar-icon.png │ ├── axis-diagram.html │ ├── banner-00.jpg │ ├── banner-00.png │ ├── bezier-curve-diagram.html │ ├── bezier-curve-edit.html │ ├── blender-killer-whale.png │ ├── bone-display.png │ ├── bone-head-problem.svg │ ├── bone-head-setup.svg │ ├── bone-head.svg │ ├── bonsai-0.4.1.min.js │ ├── bowling-pin-silhouette.svg │ ├── camera-move-camera.html │ ├── candle-holder.svg │ ├── canvas-wrapper.js │ ├── chrome-devtools.png │ ├── chrome-webserver.png │ ├── circle-points.svg │ ├── clipspace.svg │ ├── cross-product-diagram.html │ ├── cube-normals.html │ ├── cube-vertices-uv.svg │ ├── cubes-with-depth-buffer.jpg │ ├── cubes-without-depth-buffer.jpg │ ├── depth-map-generation.svg │ ├── desktop-4-4-4-4-texture-no-dither.png │ ├── devtools-source.gif │ ├── diagram.js │ ├── different-colored-mips.png │ ├── directional-lighting.html │ ├── dot-product-2d.html │ ├── dot-product.html │ ├── download-webglfundamentals.gif │ ├── editor-lines-and-columns.gif │ ├── environment-mapping.html │ ├── f-big-and-wrong-side.svg │ ├── f-right-side.svg │ ├── f-texture-coordinates-diagram.svg │ ├── fog-background-color-mismatch.png │ ├── fog-depth.svg │ ├── fog-distance.svg │ ├── fragment-shader-anim.html │ ├── gl-line-loop.svg │ ├── gl-line-strip.svg │ ├── gl-lines.svg │ ├── gl-triangle-fan.svg │ ├── gl-triangle-strip.svg │ ├── gl-triangles.svg │ ├── index.css │ ├── javascript-console.gif │ ├── lathe-normal-seam.png │ ├── lesson-utils.js │ ├── lesson.css │ ├── lesson.js │ ├── line-segments-points.svg │ ├── linear-texture-interpolation.svg │ ├── linear-vs-hermite.png │ ├── logo.png │ ├── matrix-space-change.html │ ├── matrixstack-after.svg │ ├── matrixstack-before.svg │ ├── mip-low-res-enlarged.png │ ├── mipmap-low-res-enlarged.png │ ├── mobile-4-4-4-4-texture-dither.png │ ├── mobile-4-4-4-4-texture-no-dither.png │ ├── moon-orbit.html │ ├── multi-view-fixed.gif │ ├── multi-view-skew.gif │ ├── my-awesme-text.png │ ├── noodles-01.jpg │ ├── noodles-02.jpg │ ├── noodles-03.jpg │ ├── noodles-04.jpg │ ├── noodles-05.jpg │ ├── noodles-06.jpg │ ├── normals-scaled.html │ ├── normals.html │ ├── orthographic-projection.svg │ ├── orthographic-vs-perspective.png │ ├── person-diagram.html │ ├── perspective-example.svg │ ├── perspective-projection.svg │ ├── planet-diagram.html │ ├── point-lighting.html │ ├── point-outside-canvas.svg │ ├── polygon-drawing-order.gif │ ├── power-graph.html │ ├── prettify.js │ ├── projected-depth-texture.svg │ ├── ramp-vs-light.png │ ├── reflect-180-01.svg │ ├── reflect-180-02.svg │ ├── reflect-180-03.svg │ ├── reflect-180-04.svg │ ├── reflect-180-05.svg │ ├── reflect-180-06.svg │ ├── reflect-45-01.svg │ ├── reflect-45-02.svg │ ├── reflect-45-03.svg │ ├── reflect-45-04.svg │ ├── reflect-45-05.svg │ ├── reflect-45-06.svg │ ├── reflect-part-01.svg │ ├── ridge-racer-01.png │ ├── ridge-racer-02.png │ ├── rotation-arrow-counterclockwise.png │ ├── rotation-arrow.png │ ├── rss-icon.svg │ ├── screencapture-398x298.png │ ├── servez-response.png │ ├── servez.gif │ ├── shadertoy-dolphin.png │ ├── shadow-map-projection.svg │ ├── skinned-mesh.svg │ ├── skinning-debug-01.png │ ├── skinning-debug-02.png │ ├── skinning-debug-03.png │ ├── skinning-debug-04.png │ ├── skybox-issues.svg │ ├── specular-highlights.jpg │ ├── specular-lighting.html │ ├── spot-lighting.html │ ├── spot-sphere.html │ ├── spreadsheet-column.png │ ├── spreadsheet-row.png │ ├── surface-reflection.html │ ├── tangent-to-curve.png │ ├── texel-coords-middle.svg │ ├── texel-coords.svg │ ├── text-gray-outline.png │ ├── text-zbuffer-issue.png │ ├── texture-coordinates-diagram.svg │ ├── three-js-cube-with-lights.html │ ├── three.min.js │ ├── transform.js │ ├── triangle-winding.svg │ ├── vertex-shader-anim.gif │ ├── view-source.gif │ ├── webgl-2d-matrices.css │ ├── webgl-lessons.css │ ├── webgl-perspective-negative-156.png │ ├── webgl-pixels.svg │ ├── webgl-preservedrawingbuffer-true.html │ ├── webgl-readpixels.js │ ├── webgl-resizing-the-canvas.module.js │ ├── webgl-state-diagram.html │ ├── webgl-state-diagram │ │ ├── .eslintrc.js │ │ ├── arrows.js │ │ ├── buffer-ui.js │ │ ├── code-highlight.js │ │ ├── context-wrapper.js │ │ ├── eval-helper.js │ │ ├── global-ui.js │ │ ├── globals.js │ │ ├── program-ui.js │ │ ├── state-diagram.css │ │ ├── state-diagram.js │ │ ├── state-table.js │ │ ├── state-tables.js │ │ ├── stepper.js │ │ ├── texture-ui.js │ │ ├── transform-feedback-ui.js │ │ ├── ui.js │ │ ├── utils.js │ │ ├── vertex-array-ui.js │ │ └── webgl.js │ ├── webglfundamentals-icon-256.png │ ├── webglfundamentals-icon.png │ ├── webglfundamentals-webgl-state-diagram.jpg │ ├── webglfundamentals.jpg │ └── z-clipping.gif ├── ru │ ├── index.md │ ├── langinfo.hanson │ ├── toc.html │ ├── webgl-2-textures.md │ ├── webgl-2d-drawimage.md │ ├── webgl-2d-matrices.md │ ├── webgl-2d-matrix-stack.md │ ├── webgl-2d-rotation.md │ ├── webgl-2d-scale.md │ ├── webgl-2d-translation.md │ ├── webgl-2d-vs-3d-library.md │ ├── webgl-3d-camera.md │ ├── webgl-3d-geometry-lathe.md │ ├── webgl-3d-lighting-directional.md │ ├── webgl-3d-lighting-point.md │ ├── webgl-3d-lighting-spot.md │ ├── webgl-3d-orthographic.md │ ├── webgl-3d-perspective-correct-texturemapping.md │ ├── webgl-3d-perspective.md │ ├── webgl-3d-textures.md │ ├── webgl-and-alpha.md │ ├── webgl-animation.md │ ├── webgl-anti-patterns.md │ ├── webgl-boilerplate.md │ ├── webgl-cors-permission.md │ ├── webgl-data-textures.md │ ├── webgl-drawing-multiple-things.md │ ├── webgl-fundamentals.md │ ├── webgl-how-it-works.md │ ├── webgl-image-processing-continued.md │ ├── webgl-image-processing.md │ ├── webgl-less-code-more-fun.md │ ├── webgl-ramp-textures.md │ ├── webgl-render-to-texture.md │ ├── webgl-resizing-the-canvas.md │ ├── webgl-scene-graph.md │ ├── webgl-setup-and-installation.md │ ├── webgl-shaders-and-glsl.md │ ├── webgl-smallest-programs.md │ ├── webgl-text-canvas2d.md │ ├── webgl-text-glyphs.md │ ├── webgl-text-html.md │ └── webgl-text-texture.md ├── screenshots │ └── placeholder.txt ├── toc.html ├── uk │ ├── index.md │ ├── langinfo.hanson │ ├── toc.html │ └── webgl-fundamentals.md ├── webgl-2-textures.md ├── webgl-2d-drawimage.md ├── webgl-2d-matrices.md ├── webgl-2d-matrix-stack.md ├── webgl-2d-rotation.md ├── webgl-2d-scale.md ├── webgl-2d-translation.md ├── webgl-2d-vs-3d-library.md ├── webgl-3d-camera.md ├── webgl-3d-geometry-lathe.md ├── webgl-3d-lighting-directional.md ├── webgl-3d-lighting-normal-mapping.md ├── webgl-3d-lighting-point.md ├── webgl-3d-lighting-spot.md ├── webgl-3d-orthographic.md ├── webgl-3d-perspective-correct-texturemapping.md ├── webgl-3d-perspective.md ├── webgl-3d-textures.md ├── webgl-and-alpha.md ├── webgl-animation.md ├── webgl-anti-patterns.md ├── webgl-attributes.md ├── webgl-boilerplate.md ├── webgl-cors-permission.md ├── webgl-cross-platform-issues.md ├── webgl-cube-maps.md ├── webgl-data-textures.md ├── webgl-drawing-multiple-things.md ├── webgl-drawing-without-data.md ├── webgl-environment-maps.md ├── webgl-fog.md ├── webgl-framebuffers.md ├── webgl-fundamentals.md ├── webgl-gpgpu.md ├── webgl-how-it-works.md ├── webgl-image-processing-continued.md ├── webgl-image-processing.md ├── webgl-indexed-vertices.md ├── webgl-instanced-drawing.md ├── webgl-less-code-more-fun.md ├── webgl-load-obj-w-mtl.md ├── webgl-load-obj.md ├── webgl-matrix-vs-math.md ├── webgl-multiple-views.md ├── webgl-picking.md ├── webgl-planar-projection-mapping.md ├── webgl-points-lines-triangles.md ├── webgl-post-processing.md ├── webgl-precision-issues.md ├── webgl-pulling-vertices.md ├── webgl-qna-a-simple-way-to-show-the-load-on-the-gpu-s-vertex-and-fragment-processing-.md ├── webgl-qna-accessing-textures-by-pixel-coordinate-in-webgl2.md ├── webgl-qna-apply-a-displacement-map-and-specular-map.md ├── webgl-qna-can-anyone-explain-what-this-glsl-fragment-shader-is-doing-.md ├── webgl-qna-can-i-mute-the-warning-about-vertex-attrib-0-being-disabled-.md ├── webgl-qna-create-image-warping-effect-in-webgl.md ├── webgl-qna-creating-a-smudge-liquify-effect.md ├── webgl-qna-depth-sprites.md ├── webgl-qna-determine-min-max-values-for-the-entire-image.md ├── webgl-qna-don-t-blend-a-polygon-that-crosses-itself.md ├── webgl-qna-drawing-2d-image-with-depth-map-to-achieve-pseudo-3d-effect.md ├── webgl-qna-drawing-a-heightmap.md ├── webgl-qna-drawing-layers-with-different-points.md ├── webgl-qna-drawing-many-different-models-in-a-single-draw-call.md ├── webgl-qna-drawing-textured-sprites-with-instanced-drawing.md ├── webgl-qna-efficient-particle-system-in-javascript---webgl-.md ├── webgl-qna-emulating-palette-based-graphics-in-webgl.md ├── webgl-qna-fps-like-camera-movement-with-basic-matrix-transformations.md ├── webgl-qna-get-the-size-of-a-point-for-collision-checking.md ├── webgl-qna-glsl-shader-to-support-coloring-and-texturing.md ├── webgl-qna-how-can-i-compute-for-500-points-which-of-1000-line-segments-is-nearest-to-each-point-.md ├── webgl-qna-how-can-i-create-a-16bit-historgram-of-16bit-data.md ├── webgl-qna-how-can-i-get-all-the-uniforms-and-uniformblocks.md ├── webgl-qna-how-can-i-move-the-perspective-vanishing-point-from-the-center-of-the-canvas-.md ├── webgl-qna-how-to-achieve-moving-line-with-trail-effects.md ├── webgl-qna-how-to-bind-an-array-of-textures-to-a-webgl-shader-uniform-.md ├── webgl-qna-how-to-blend-colors-across-2-triangles.md ├── webgl-qna-how-to-combine-more-text-drawing-into-fewer-draw-calls.md ├── webgl-qna-how-to-control-the-color-between-vertices.md ├── webgl-qna-how-to-create-a-torus.md ├── webgl-qna-how-to-detect-clipped-triangles-in-the-framgment-shader.md ├── webgl-qna-how-to-determine-the-average-brightness-in-a-scene-.md ├── webgl-qna-how-to-draw-correctly-textured-trapezoid-polygons.md ├── webgl-qna-how-to-fade-the-drawing-buffer.md ├── webgl-qna-how-to-figure-out-how-much-gpu-work-to-do-without-crashing-webgl.md ├── webgl-qna-how-to-get-audio-data-into-a-shader.md ├── webgl-qna-how-to-get-code-completion-for-webgl-in-visual-studio-code.md ├── webgl-qna-how-to-get-pixelize-effect-in-webgl-.md ├── webgl-qna-how-to-get-the-3d-coordinates-of-a-mouse-click.md ├── webgl-qna-how-to-implement-zoom-from-mouse-in-2d-webgl.md ├── webgl-qna-how-to-import-a-heightmap-in-webgl.md ├── webgl-qna-how-to-load-images-in-the-background-with-no-jank.md ├── webgl-qna-how-to-make-a-smudge-brush-tool.md ├── webgl-qna-how-to-make-webgl-canvas-transparent.md ├── webgl-qna-how-to-optimize-rendering-a-ui.md ├── webgl-qna-how-to-prevent-texture-bleeding-with-a-texture-atlas.md ├── webgl-qna-how-to-process-particle-positions.md ├── webgl-qna-how-to-read-a-single-component-with-readpixels.md ├── webgl-qna-how-to-render-large-scale-images-like-32000x32000.md ├── webgl-qna-how-to-simulate-a-3d-texture-in-webgl.md ├── webgl-qna-how-to-support-both-webgl-and-webgl2.md ├── webgl-qna-how-to-tell-if-an-image-has-an-alpha-channel.md ├── webgl-qna-how-to-use-a-2d-sprite-s-transparency-as-a-mask.md ├── webgl-qna-how-to-use-texture--and-color-also-in-webgl-.md ├── webgl-qna-how-to-use-textures-as-data.md ├── webgl-qna-how-to-use-the-stencil-buffer.md ├── webgl-qna-how-to-write-a-web-based-music-visualizer.md ├── webgl-qna-i-get-invalid-type-error-when-calling-readpixels.md ├── webgl-qna-is-it-possible-to-measure-rendering-time-in-webgl-using-gl-finish---.md ├── webgl-qna-is-there-the-notion-of-a-generalized-vertex-and-fragment-shader-.md ├── webgl-qna-optimize-drawing-lots-of-large-images.md ├── webgl-qna-passing-in-per-sprite-alpha-values-when-batching.md ├── webgl-qna-pure-webgl-dashed-line.md ├── webgl-qna-recording-fps-in-webgl.md ├── webgl-qna-rendering-slowly-over-time.md ├── webgl-qna-setting-the-values-of-a-struct-array-from-js-to-glsl.md ├── webgl-qna-show-a-night-view-vs-a-day-view-on-a-3d-earth-sphere.md ├── webgl-qna-sorting-and-optimizing-instanced-rendering.md ├── webgl-qna-tex-image-texture_2d-level-0-is-incurring-lazy-initialization.md ├── webgl-qna-the-fastest-way-to-draw-many-circles.md ├── webgl-qna-webgl-2d-tilemaps.md ├── webgl-qna-webgl-droste-effect.md ├── webgl-qna-what-is-the-local-origin-of-a-3d-model-.md ├── webgl-qna-when-to-choose-highp--mediump--lowp-in-shaders.md ├── webgl-qna-why-does-webgl-take-more-memory-than-canvas-2d.md ├── webgl-qna-working-around-gl_pointsize-limitations-webgl.md ├── webgl-qna-zooming-to-and-stopping-at-object-in-a-scene-in-webgl.md ├── webgl-qna.md ├── webgl-ramp-textures.md ├── webgl-readpixels.md ├── webgl-references.md ├── webgl-render-to-texture.md ├── webgl-resizing-the-canvas.md ├── webgl-scene-graph.md ├── webgl-setup-and-installation.md ├── webgl-shaders-and-glsl.md ├── webgl-shadertoy.md ├── webgl-shadows-continued.md ├── webgl-shadows.md ├── webgl-skinning.md ├── webgl-skybox.md ├── webgl-smallest-programs.md ├── webgl-sprites.md ├── webgl-state-diagram.md ├── webgl-text-canvas2d.md ├── webgl-text-glyphs.md ├── webgl-text-html.md ├── webgl-text-texture.md ├── webgl-texture-units.md ├── webgl-tips.md ├── webgl-visualizing-the-camera.md └── zh_cn │ ├── index.md │ ├── langinfo.hanson │ ├── toc.html │ ├── webgl-2-textures.md │ ├── webgl-2d-drawimage.md │ ├── webgl-2d-matrices.md │ ├── webgl-2d-matrix-stack.md │ ├── webgl-2d-rotation.md │ ├── webgl-2d-scale.md │ ├── webgl-2d-translation.md │ ├── webgl-2d-vs-3d-library.md │ ├── webgl-3d-camera.md │ ├── webgl-3d-geometry-lathe.md │ ├── webgl-3d-lighting-directional.md │ ├── webgl-3d-lighting-point.md │ ├── webgl-3d-lighting-spot.md │ ├── webgl-3d-orthographic.md │ ├── webgl-3d-perspective-correct-texturemapping.md │ ├── webgl-3d-perspective.md │ ├── webgl-3d-textures.md │ ├── webgl-and-alpha.md │ ├── webgl-animation.md │ ├── webgl-anti-patterns.md │ ├── webgl-attributes.md │ ├── webgl-boilerplate.md │ ├── webgl-cors-permission.md │ ├── webgl-cross-platform-issues.md │ ├── webgl-cube-maps.md │ ├── webgl-data-textures.md │ ├── webgl-drawing-multiple-things.md │ ├── webgl-drawing-without-data.md │ ├── webgl-environment-maps.md │ ├── webgl-fog.md │ ├── webgl-framebuffers.md │ ├── webgl-fundamentals.md │ ├── webgl-how-it-works.md │ ├── webgl-image-processing-continued.md │ ├── webgl-image-processing.md │ ├── webgl-indexed-vertices.md │ ├── webgl-instanced-drawing.md │ ├── webgl-less-code-more-fun.md │ ├── webgl-load-obj-w-mtl.md │ ├── webgl-load-obj.md │ ├── webgl-matrix-vs-math.md │ ├── webgl-picking.md │ ├── webgl-planar-projection-mapping.md │ ├── webgl-points-lines-triangles.md │ ├── webgl-ramp-textures.md │ ├── webgl-readpixels.md │ ├── webgl-references.md │ ├── webgl-render-to-texture.md │ ├── webgl-resizing-the-canvas.md │ ├── webgl-scene-graph.md │ ├── webgl-setup-and-installation.md │ ├── webgl-shaders-and-glsl.md │ ├── webgl-shadows.md │ ├── webgl-skinning.md │ ├── webgl-skybox.md │ ├── webgl-smallest-programs.md │ ├── webgl-sprites.md │ ├── webgl-text-canvas2d.md │ ├── webgl-text-glyphs.md │ ├── webgl-text-html.md │ ├── webgl-text-texture.md │ ├── webgl-texture-units.md │ ├── webgl-tips.md │ └── webgl-visualizing-the-camera.md ├── license.html ├── resources ├── 2d-math.js ├── 3d-math.js ├── 8x8-font.png ├── chroma.min.js ├── colResizable-1.3.min.js ├── css │ └── ui-lightness │ │ ├── images │ │ ├── ui-bg_diagonals-thick_18_b81900_40x40.png │ │ ├── ui-bg_diagonals-thick_20_666666_40x40.png │ │ ├── ui-bg_flat_10_000000_40x100.png │ │ ├── ui-bg_glass_100_f6f6f6_1x400.png │ │ ├── ui-bg_glass_100_fdf5ce_1x400.png │ │ ├── ui-bg_glass_65_ffffff_1x400.png │ │ ├── ui-bg_gloss-wave_35_f6a828_500x100.png │ │ ├── ui-bg_highlight-soft_100_eeeeee_1x100.png │ │ ├── ui-bg_highlight-soft_75_ffe45c_1x100.png │ │ ├── ui-icons_222222_256x240.png │ │ ├── ui-icons_228ef1_256x240.png │ │ ├── ui-icons_ef8c08_256x240.png │ │ ├── ui-icons_ffd27a_256x240.png │ │ └── ui-icons_ffffff_256x240.png │ │ └── jquery-ui-1.8.16.custom.css ├── drag-and-drop.js ├── editor-settings.js ├── eye-icon.png ├── f-orientation.svg ├── f-scale-rotation-translation.svg ├── f-texture-pixel-coords.png ├── f-texture.png ├── f-translation-rotation-scale-base.svg ├── f-translation-rotation-scale.svg ├── headdata.js ├── images │ ├── computer-history-museum │ │ ├── neg-x.jpg │ │ ├── neg-y.jpg │ │ ├── neg-z.jpg │ │ ├── pos-x.jpg │ │ ├── pos-y.jpg │ │ └── pos-z.jpg │ └── frame.png ├── jquery-1.7.1.min.js ├── jquery-gman-circle.js ├── jquery-ui-1.8.16.custom.min.js ├── jquery.gman.ui.js ├── jquery.mousecapture.js ├── jquery.tablednd_0_5.js ├── keyboard.jpg ├── leaves.jpg ├── lesson-helper.css ├── lessons-helper.js ├── m3.js ├── m4.js ├── mip-example.png ├── mip-low-res-example.png ├── models │ ├── book-vertex-chameleon-study │ │ ├── LICENSE.md │ │ ├── book.obj │ │ └── book.png │ ├── chair │ │ ├── chair.jpg │ │ ├── chair.mtl │ │ ├── chair.obj │ │ └── license.md │ ├── cube │ │ ├── cube.mtl │ │ ├── cube.obj │ │ └── offset-cube.obj │ ├── killer_whale │ │ ├── BLENDSWAP_LICENSE.txt │ │ ├── thumbnail.jpg │ │ ├── whale.CYCLES.bin │ │ ├── whale.CYCLES.gltf │ │ └── whale.png │ └── windmill │ │ ├── license.md │ │ ├── windmill-obj.jpg │ │ ├── windmill.mtl │ │ ├── windmill.obj │ │ ├── windmill_001_base_COL.jpg │ │ ├── windmill_001_base_NOR.jpg │ │ ├── windmill_001_base_SPEC.jpg │ │ ├── windmill_001_lopatky_COL.jpg │ │ └── windmill_001_lopatky_NOR.jpg ├── noodles.jpg ├── polygon-f.svg ├── primitives.js ├── require.js ├── rotate-30.png ├── rotate-60.png ├── rotate-90.png ├── rotation-drawing.svg ├── same-code-02.js ├── same-code.js ├── star.jpg ├── stats.min.js ├── tdl │ ├── base.js │ ├── buffers.js │ ├── clock.js │ ├── error.jpg │ ├── fast.js │ ├── fps.js │ ├── framebuffers.js │ ├── fullscreen.js │ ├── io.js │ ├── loader.js │ ├── log.js │ ├── math.js │ ├── misc.js │ ├── models.js │ ├── particles.js │ ├── primitives.js │ ├── programs.js │ ├── quaternions.js │ ├── screenshot.js │ ├── shader.js │ ├── string.js │ ├── sync.js │ ├── textures.js │ └── webgl.js ├── texture-utils.js ├── twgl-full.min.js ├── uv-grid.png ├── webgl-2d-math.js ├── webgl-3d-math.js ├── webgl-debug-helper.js ├── webgl-lessons-helper.js ├── webgl-lessons-ui.js ├── webgl-tutorials.css └── webgl-utils.js ├── svg-test.html ├── unit-circle.html ├── webgl-10x15-canvas-400x300-css.html ├── webgl-2-textures.html ├── webgl-2d-drawimage-01.html ├── webgl-2d-drawimage-02.html ├── webgl-2d-drawimage-03.html ├── webgl-2d-drawimage-04.html ├── webgl-2d-drawimage-05.html ├── webgl-2d-drawimage-06.html ├── webgl-2d-drawimage-07.html ├── webgl-2d-drawimage-08.html ├── webgl-2d-geometry-matrix-transform-center-f.html ├── webgl-2d-geometry-matrix-transform-hierarchical.html ├── webgl-2d-geometry-matrix-transform-simpler-functions.html ├── webgl-2d-geometry-matrix-transform-trs.html ├── webgl-2d-geometry-matrix-transform-with-projection.html ├── webgl-2d-geometry-matrix-transform.html ├── webgl-2d-geometry-rotation-angle.html ├── webgl-2d-geometry-rotation.html ├── webgl-2d-geometry-scale.html ├── webgl-2d-geometry-translate-better.html ├── webgl-2d-geometry-translate.html ├── webgl-2d-image-3x3-convolution.html ├── webgl-2d-image-blend.html ├── webgl-2d-image-processing.html ├── webgl-2d-image-red2blue.html ├── webgl-2d-image.html ├── webgl-2d-matrixstack-01.html ├── webgl-2d-matrixstack-02.html ├── webgl-2d-matrixstack-03.html ├── webgl-2d-rectangle-top-left.html ├── webgl-2d-rectangle-translate.html ├── webgl-2d-rectangle-with-2-byte-colors.html ├── webgl-2d-rectangle-with-2-colors.html ├── webgl-2d-rectangle-with-random-colors.html ├── webgl-2d-rectangle.html ├── webgl-2d-rectangles-indexed.html ├── webgl-2d-rectangles.html ├── webgl-2d-triangle-with-position-for-color.html ├── webgl-3d-camera-look-at-heads.html ├── webgl-3d-camera-look-at.html ├── webgl-3d-camera.html ├── webgl-3d-fog-depth-based-gl_FragCoord.html ├── webgl-3d-fog-depth-based-issue.html ├── webgl-3d-fog-depth-based.html ├── webgl-3d-fog-distance-based.html ├── webgl-3d-fog-distance-exp2.html ├── webgl-3d-fog-just-mix.html ├── webgl-3d-lathe-step-01.html ├── webgl-3d-lathe-step-02.html ├── webgl-3d-lathe-step-03.html ├── webgl-3d-lighting-directional-world.html ├── webgl-3d-lighting-directional-worldinversetranspose.html ├── webgl-3d-lighting-directional.html ├── webgl-3d-lighting-point-color.html ├── webgl-3d-lighting-point-specular-power.html ├── webgl-3d-lighting-point-specular.html ├── webgl-3d-lighting-point.html ├── webgl-3d-lighting-spot-falloff-using-smoothstep.html ├── webgl-3d-lighting-spot-falloff.html ├── webgl-3d-lighting-spot-using-step.html ├── webgl-3d-lighting-spot.html ├── webgl-3d-perspective-matrix.html ├── webgl-3d-perspective-w-matrix.html ├── webgl-3d-perspective-w.html ├── webgl-3d-perspective.html ├── webgl-3d-step1.html ├── webgl-3d-step2.html ├── webgl-3d-step3.html ├── webgl-3d-step4.html ├── webgl-3d-step5.html ├── webgl-3d-step6.html ├── webgl-3d-textures-bad-npot.html ├── webgl-3d-textures-good-npot.html ├── webgl-3d-textures-mips-tri-linear.html ├── webgl-3d-textures-mips.html ├── webgl-3d-textures-repeat-clamp.html ├── webgl-3d-textures-texture-atlas.html ├── webgl-3d-textures-texture-coords-mapped.html ├── webgl-3d-textures.html ├── webgl-animation-frame-rate-issues.html ├── webgl-animation-not-frame-rate-independent.html ├── webgl-animation.html ├── webgl-attributes-2-shaders-same-data.html ├── webgl-canvas-clientwidth-clientheight.html ├── webgl-canvas-width-height.html ├── webgl-clipspace-rectangles-with-varying-non-1-w-repeat.html ├── webgl-clipspace-rectangles-with-varying-non-1-w.html ├── webgl-clipspace-rectangles-with-varying.html ├── webgl-clipspace-rectangles.html ├── webgl-cors-permission-bad.html ├── webgl-cors-permission-good.html ├── webgl-cubemap-environment-map.html ├── webgl-cubemap-faces.html ├── webgl-cubemap.html ├── webgl-data-texture-3x2-bad.html ├── webgl-data-texture-3x2.html ├── webgl-environment-map-sphere.html ├── webgl-environment-map.html ├── webgl-fundamentals.html ├── webgl-gpgpu-add-2-elements.html ├── webgl-gpgpu-closest-line-dynamic.html ├── webgl-gpgpu-closest-line-results.html ├── webgl-gpgpu-closest-line.html ├── webgl-gpgpu-mult-by-2.html ├── webgl-gpgpu-particles.html ├── webgl-instanced-drawing-not-instanced.html ├── webgl-instanced-drawing-projection-view.html ├── webgl-instanced-drawing.html ├── webgl-less-code-more-fun-quad-guess.html ├── webgl-less-code-more-fun-quad-programinfo.html ├── webgl-less-code-more-fun-quad.html ├── webgl-less-code-more-fun-triangle.html ├── webgl-less-code-more-fun.html ├── webgl-load-obj-cube.html ├── webgl-load-obj-w-extents.html ├── webgl-load-obj-w-loader.html ├── webgl-load-obj-w-mtl-no-textures.html ├── webgl-load-obj-w-mtl-w-normal-maps.html ├── webgl-load-obj-w-mtl-w-specular-map.html ├── webgl-load-obj-w-mtl-w-textures.html ├── webgl-load-obj-w-vertex-colors.html ├── webgl-load-obj.html ├── webgl-multiple-objects-list-optimized-sorted.html ├── webgl-multiple-objects-list-optimized.html ├── webgl-multiple-objects-list.html ├── webgl-multiple-objects-manual.html ├── webgl-multiple-objects.html ├── webgl-multiple-views-clear-fixed.html ├── webgl-multiple-views-clear-issue.html ├── webgl-multiple-views-items-horizontal-scrolling.html ├── webgl-multiple-views-items.html ├── webgl-multiple-views-one-view.html ├── webgl-multiple-views.html ├── webgl-no-data-point-circle.html ├── webgl-no-data-point-rain-less-repeat.html ├── webgl-no-data-point-rain-linear.html ├── webgl-no-data-point-rain.html ├── webgl-no-data-triangles-circle.html ├── webgl-no-data-triangles-circles.html ├── webgl-non-perspective-correct-cube.html ├── webgl-perspective-correct-cube.html ├── webgl-picking-w-gpu-1pixel-w-texture.html ├── webgl-picking-w-gpu-1pixel.html ├── webgl-picking-w-gpu.html ├── webgl-planar-projection-setup.html ├── webgl-planar-projection-with-lines.html ├── webgl-planar-projection-with-projection-matrix-0-to-1.html ├── webgl-planar-projection-with-projection-matrix.html ├── webgl-planar-projection.html ├── webgl-precision-check-canvas-bits.html ├── webgl-precision-check-fragment-shader.html ├── webgl-precision-check-vertex-shader.html ├── webgl-precision-lowp-mediump-highp.html ├── webgl-precision-textures.html ├── webgl-pulling-vertices.html ├── webgl-qna-accessing-textures-by-pixel-coordinate-in-webgl2-example-1.html ├── webgl-qna-accessing-textures-by-pixel-coordinate-in-webgl2-example-2.html ├── webgl-qna-accessing-textures-by-pixel-coordinate-in-webgl2-example-3.html ├── webgl-qna-apply-a-displacement-map-and-specular-map-example-1.html ├── webgl-qna-apply-a-displacement-map-and-specular-map-example-2.html ├── webgl-qna-apply-a-displacement-map-and-specular-map-example-3.html ├── webgl-qna-create-image-warping-effect-in-webgl-example-1.html ├── webgl-qna-create-image-warping-effect-in-webgl-example-2.html ├── webgl-qna-creating-a-smudge-liquify-effect-example-1.html ├── webgl-qna-creating-a-smudge-liquify-effect-example-2.html ├── webgl-qna-creating-a-smudge-liquify-effect-example-3.html ├── webgl-qna-depth-sprites.html ├── webgl-qna-determine-min-max-values-for-the-entire-image-example-1.html ├── webgl-qna-determine-min-max-values-for-the-entire-image-example-2.html ├── webgl-qna-determine-min-max-values-for-the-entire-image-example-3.html ├── webgl-qna-don-t-blend-a-polygon-that-crosses-itself-example-1.html ├── webgl-qna-don-t-blend-a-polygon-that-crosses-itself-example-2.html ├── webgl-qna-don-t-blend-a-polygon-that-crosses-itself-example-3.html ├── webgl-qna-drawing-2d-image-with-depth-map-to-achieve-pseudo-3d-effect-example-1.html ├── webgl-qna-drawing-2d-image-with-depth-map-to-achieve-pseudo-3d-effect-example-2.html ├── webgl-qna-drawing-2d-image-with-depth-map-to-achieve-pseudo-3d-effect-example-3.html ├── webgl-qna-drawing-2d-image-with-depth-map-to-achieve-pseudo-3d-effect-example-4.html ├── webgl-qna-drawing-a-heightmap-example-1.html ├── webgl-qna-drawing-a-heightmap-example-2.html ├── webgl-qna-drawing-a-heightmap-example-3.html ├── webgl-qna-drawing-many-different-models-in-a-single-draw-call-example-1.html ├── webgl-qna-drawing-textured-sprites-with-instanced-drawing-example-1.html ├── webgl-qna-emulating-palette-based-graphics-in-webgl-example-1.html ├── webgl-qna-emulating-palette-based-graphics-in-webgl-example-2.html ├── webgl-qna-emulating-palette-based-graphics-in-webgl-example-3.html ├── webgl-qna-fps-like-camera-movement-with-basic-matrix-transformations-example-1.html ├── webgl-qna-get-the-size-of-a-point-for-collision-checking-example-1.html ├── webgl-qna-glsl-shader-to-support-coloring-and-texturing-example-1.html ├── webgl-qna-how-can-i-compute-for-500-points-which-of-1000-line-segments-is-nearest-to-each-point--example-1.html ├── webgl-qna-how-can-i-compute-for-500-points-which-of-1000-line-segments-is-nearest-to-each-point--example-2.html ├── webgl-qna-how-can-i-get-all-the-uniforms-and-uniformblocks-example-1.html ├── webgl-qna-how-can-i-move-the-perspective-vanishing-point-from-the-center-of-the-canvas--example-1.html ├── webgl-qna-how-can-i-move-the-perspective-vanishing-point-from-the-center-of-the-canvas--example-2.html ├── webgl-qna-how-to-achieve-moving-line-with-trail-effects-example-1.html ├── webgl-qna-how-to-achieve-moving-line-with-trail-effects-example-2.html ├── webgl-qna-how-to-bind-an-array-of-textures-to-a-webgl-shader-uniform--example-1.html ├── webgl-qna-how-to-blend-colors-across-2-triangles-example-1.html ├── webgl-qna-how-to-blend-colors-across-2-triangles-example-2.html ├── webgl-qna-how-to-blend-colors-across-2-triangles-example-3.html ├── webgl-qna-how-to-blend-colors-across-2-triangles-example-4.html ├── webgl-qna-how-to-combine-more-text-drawing-into-fewer-draw-calls-example-1.html ├── webgl-qna-how-to-combine-more-text-drawing-into-fewer-draw-calls-example-2.html ├── webgl-qna-how-to-control-the-color-between-vertices-example-1.html ├── webgl-qna-how-to-create-a-torus-example-1.html ├── webgl-qna-how-to-detect-clipped-triangles-in-the-framgment-shader-example-1.html ├── webgl-qna-how-to-detect-clipped-triangles-in-the-framgment-shader-example-2.html ├── webgl-qna-how-to-determine-the-average-brightness-in-a-scene--example-1.html ├── webgl-qna-how-to-determine-the-average-brightness-in-a-scene--example-2.html ├── webgl-qna-how-to-draw-correctly-textured-trapezoid-polygons-example-1.html ├── webgl-qna-how-to-fade-the-drawing-buffer-example-1.html ├── webgl-qna-how-to-figure-out-how-much-gpu-work-to-do-without-crashing-webgl-example-1.html ├── webgl-qna-how-to-get-audio-data-into-a-shader-example-1.html ├── webgl-qna-how-to-get-pixelize-effect-in-webgl--example-1.html ├── webgl-qna-how-to-get-pixelize-effect-in-webgl--example-2.html ├── webgl-qna-how-to-get-pixelize-effect-in-webgl--example-3.html ├── webgl-qna-how-to-get-the-3d-coordinates-of-a-mouse-click-example-1.html ├── webgl-qna-how-to-implement-zoom-from-mouse-in-2d-webgl-example-1.html ├── webgl-qna-how-to-import-a-heightmap-in-webgl-example-1.html ├── webgl-qna-how-to-import-a-heightmap-in-webgl-example-2.html ├── webgl-qna-how-to-import-a-heightmap-in-webgl-example-3.html ├── webgl-qna-how-to-load-images-in-the-background-with-no-jank-example-1.html ├── webgl-qna-how-to-load-images-in-the-background-with-no-jank-example-2.html ├── webgl-qna-how-to-load-images-in-the-background-with-no-jank-example-3.html ├── webgl-qna-how-to-make-a-smudge-brush-tool-example-1.html ├── webgl-qna-how-to-make-webgl-canvas-transparent-example-1.html ├── webgl-qna-how-to-make-webgl-canvas-transparent-example-2.html ├── webgl-qna-how-to-make-webgl-canvas-transparent-example-3.html ├── webgl-qna-how-to-prevent-texture-bleeding-with-a-texture-atlas-example-1.html ├── webgl-qna-how-to-process-particle-positions-example-1.html ├── webgl-qna-how-to-process-particle-positions-example-2.html ├── webgl-qna-how-to-process-particle-positions-example-3.html ├── webgl-qna-how-to-render-large-scale-images-like-32000x32000-example-1.html ├── webgl-qna-how-to-render-large-scale-images-like-32000x32000-example-2.html ├── webgl-qna-how-to-render-large-scale-images-like-32000x32000-example-3.html ├── webgl-qna-how-to-use-a-2d-sprite-s-transparency-as-a-mask-example-1.html ├── webgl-qna-how-to-use-a-2d-sprite-s-transparency-as-a-mask-example-2.html ├── webgl-qna-how-to-use-the-stencil-buffer-example-1.html ├── webgl-qna-how-to-write-a-web-based-music-visualizer-example-1.html ├── webgl-qna-i-get-invalid-type-error-when-calling-readpixels-example-1.html ├── webgl-qna-pure-webgl-dashed-line-example-1.html ├── webgl-qna-recording-fps-in-webgl-example-1.html ├── webgl-qna-recording-fps-in-webgl-example-2.html ├── webgl-qna-rendering-slowly-over-time-example-1.html ├── webgl-qna-rendering-slowly-over-time-example-2.html ├── webgl-qna-show-a-night-view-vs-a-day-view-on-a-3d-earth-sphere-example-1.html ├── webgl-qna-sorting-and-optimizing-instanced-rendering-example-1.html ├── webgl-qna-the-fastest-way-to-draw-many-circles-example-1.html ├── webgl-qna-the-fastest-way-to-draw-many-circles-example-2.html ├── webgl-qna-the-fastest-way-to-draw-many-circles-example-3.html ├── webgl-qna-the-fastest-way-to-draw-many-circles-example-4.html ├── webgl-qna-the-fastest-way-to-draw-many-circles-example-5.html ├── webgl-qna-webgl-2d-tilemaps-example-1.html ├── webgl-qna-webgl-droste-effect-example-1.html ├── webgl-qna-why-does-webgl-take-more-memory-than-canvas-2d-example-1.html ├── webgl-qna-why-does-webgl-take-more-memory-than-canvas-2d-example-2.html ├── webgl-qna-zooming-to-and-stopping-at-object-in-a-scene-in-webgl-example-1.html ├── webgl-ramp-texture-issue-confirm.html ├── webgl-ramp-texture-linear.html ├── webgl-ramp-texture.html ├── webgl-ramp-textures.html ├── webgl-render-to-texture-3-cubes-no-depth-buffer.html ├── webgl-render-to-texture-3-cubes-with-depth-buffer.html ├── webgl-render-to-texture.html ├── webgl-resize-canvas-hd-dpi.html ├── webgl-resize-canvas-viewport.html ├── webgl-resize-canvas.html ├── webgl-resize-the-canvas-comparison-fullwindow.html ├── webgl-resize-the-canvas-comparison.html ├── webgl-same-code-body-only-fullscreen.html ├── webgl-same-code-canvas-embedded-border-box.html ├── webgl-same-code-canvas-embedded.html ├── webgl-same-code-canvas-fullscreen.html ├── webgl-same-code-canvas-partscreen.html ├── webgl-same-code-container-embedded-border-box.html ├── webgl-same-code-container-embedded.html ├── webgl-same-code-container-fullscreen.html ├── webgl-same-code-container-partscreen.html ├── webgl-same-code-resize.html ├── webgl-scene-graph-block-guy.html ├── webgl-scene-graph-solar-system-adjusted.html ├── webgl-scene-graph-solar-system-larger-earth-fixed.html ├── webgl-scene-graph-solar-system-larger-earth.html ├── webgl-scene-graph-solar-system.html ├── webgl-shadertoy-gl-fragcoord.html ├── webgl-shadertoy-solid.html ├── webgl-shadertoy-w-mouse.html ├── webgl-shadertoy-w-resolution.html ├── webgl-shadertoy-w-time.html ├── webgl-shadertoy.html ├── webgl-shadows-basic-w-bias.html ├── webgl-shadows-basic.html ├── webgl-shadows-depth-texture.html ├── webgl-shadows-w-directional-light.html ├── webgl-shadows-w-spot-light.html ├── webgl-simple-point-w-texture.html ├── webgl-simple-point.html ├── webgl-simple-points.html ├── webgl-simple-scissor.html ├── webgl-skinning-3d-gltf-skinned.html ├── webgl-skinning-3d-gltf.html ├── webgl-skinning-bone-matrices-in-texture.html ├── webgl-skinning.html ├── webgl-skybox-plus-environment-map.html ├── webgl-skybox.html ├── webgl-text-glyphs-texture-atlas.html ├── webgl-text-glyphs.html ├── webgl-text-html-bouncing-div.html ├── webgl-text-html-canvas2d-arrows.html ├── webgl-text-html-canvas2d.html ├── webgl-text-html-div.html ├── webgl-text-html-divs.html ├── webgl-text-html-overlay-styled.html ├── webgl-text-html-overlay.html ├── webgl-text-html.html ├── webgl-text-texture-consistent-scale.html ├── webgl-text-texture-different-colors.html ├── webgl-text-texture-different-text.html ├── webgl-text-texture-enable-blend.html ├── webgl-text-texture-moved-toward-view.html ├── webgl-text-texture-premultiplied-alpha.html ├── webgl-text-texture-separate-opaque-from-transparent.html ├── webgl-text-texture.html ├── webgl-tips-html-background.html ├── webgl-tips-preservedrawingbuffer.html ├── webgl-tips-screenshot-bad.html ├── webgl-tips-screenshot-good.html ├── webgl-tips-tabindex.html ├── webgl-visualize-camera-with-frustum.html ├── webgl-visualize-camera-with-orthographic.html └── webgl-visualize-camera.html /.gitattributes: -------------------------------------------------------------------------------- 1 | * text eol=lf 2 | 3 | *.md text 4 | *.css text 5 | *.js text 6 | *.html text 7 | 8 | *.jpeg binary 9 | *.dds binary 10 | *.wasm binary 11 | *.tga binary 12 | *.glb binary 13 | *.bin binary 14 | *.psd binary 15 | *.afdesign binary 16 | *.png binary 17 | *.jpg binary 18 | *.gif binary 19 | *.eot binary 20 | *.ttf binary 21 | *.woff binary 22 | 23 | -------------------------------------------------------------------------------- /.github/workflows/deploy-to-gh-pages.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: 3 | push: 4 | branches: 5 | - master 6 | pull_request: 7 | jobs: 8 | build-and-deploy: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Checkout 🍔🍟🥤 12 | uses: actions/checkout@v2.3.1 13 | with: 14 | persist-credentials: false 15 | 16 | - name: Use Node.js 😂 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: '16.x' 20 | 21 | - name: Install and Build 🏭 22 | run: | 23 | npm i 24 | npm run pre-build 25 | npm run build-ci 26 | env: 27 | LESSON_BUILDER_ENV: production 28 | 29 | - name: Deploy 📦 30 | if: ${{ github.event_name == 'push' }} 31 | uses: JamesIves/github-pages-deploy-action@3.6.2 32 | with: 33 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 34 | BRANCH: gh-pages 35 | FOLDER: out 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.pyc 2 | .DS_Store 3 | node_modules 4 | out 5 | package-lock.json 6 | webglfundamentals.check.json 7 | 8 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | save-prefix = "" 2 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "pwa-node", 9 | "request": "launch", 10 | "name": "Launch Program", 11 | "program": "${workspaceFolder}/node_modules/grunt/bin/grunt", 12 | "env": { 13 | "ARTICLE_FILTER": "orthographic" 14 | }, 15 | "args": [ 16 | "buildlessons" 17 | ] 18 | }, 19 | { 20 | "type": "pwa-node", 21 | "request": "launch", 22 | "name": "Debug Production", 23 | "program": "${workspaceFolder}/node_modules/grunt/bin/grunt", 24 | "env": { 25 | "ARTICLE_FILTER": "qna", 26 | "LESSON_BUILDER_ENV": "production", 27 | }, 28 | "args": [ 29 | "buildlessons" 30 | ] 31 | }, 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.validate": [ 3 | "javascript", 4 | "html" 5 | ], 6 | "cSpell.words": [ 7 | "ATTRIBS", 8 | "GPUs", 9 | "Mipmap", 10 | "Parameteri", 11 | "Phong", 12 | "RGBA", 13 | "Shadertoy", 14 | "Uint", 15 | "allowfullscreen", 16 | "backbuffer", 17 | "backbuffer's", 18 | "bezier", 19 | "bitangent", 20 | "bottombar", 21 | "bvec", 22 | "captcha", 23 | "cubemaps", 24 | "divs", 25 | "draggable", 26 | "drawables", 27 | "drawimage", 28 | "drawingbuffer", 29 | "flickr", 30 | "fract", 31 | "fragcoord", 32 | "fragmentshader", 33 | "framebuffer", 34 | "framebuffers", 35 | "fullscreen", 36 | "glocal", 37 | "highp", 38 | "hljs", 39 | "illum", 40 | "imgur", 41 | "inversesqrt", 42 | "invertdark", 43 | "ivec", 44 | "lowp", 45 | "mediump", 46 | "mousemove", 47 | "mtllib", 48 | "newmtl", 49 | "nobg", 50 | "noborder", 51 | "noinvertdark", 52 | "notjs", 53 | "npot", 54 | "pixelated", 55 | "rasterization", 56 | "rasterize", 57 | "rasterized", 58 | "rasterizer", 59 | "rasterizes", 60 | "rasterizing", 61 | "rdparty", 62 | "renderable", 63 | "renderables", 64 | "renderbuffer", 65 | "renderbuffers", 66 | "shader's", 67 | "showlinemods", 68 | "skybox", 69 | "smoothstep", 70 | "texcoords", 71 | "texels", 72 | "touchmove", 73 | "touchstart", 74 | "usemtl", 75 | "varyings", 76 | "vertexshader", 77 | "webgl", 78 | "webglfundamentals" 79 | ] 80 | } -------------------------------------------------------------------------------- /3rdparty/atom-one-dark-reasonable.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Atom One Dark With support for ReasonML by Gidi Morris, based off work by Daniel Gamage 4 | 5 | Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax 6 | 7 | */ 8 | .hljs { 9 | display: block; 10 | overflow-x: auto; 11 | padding: 0.5em; 12 | color: #abb2bf; 13 | background: #282c34; 14 | } 15 | .hljs-keyword, .hljs-operator { 16 | color: #F92672; 17 | } 18 | .hljs-pattern-match { 19 | color: #F92672; 20 | } 21 | .hljs-pattern-match .hljs-constructor { 22 | color: #61aeee; 23 | } 24 | .hljs-function { 25 | color: #61aeee; 26 | } 27 | .hljs-function .hljs-params { 28 | color: #A6E22E; 29 | } 30 | .hljs-function .hljs-params .hljs-typing { 31 | color: #FD971F; 32 | } 33 | .hljs-module-access .hljs-module { 34 | color: #7e57c2; 35 | } 36 | .hljs-constructor { 37 | color: #e2b93d; 38 | } 39 | .hljs-constructor .hljs-string { 40 | color: #9CCC65; 41 | } 42 | .hljs-comment, .hljs-quote { 43 | color: #b18eb1; 44 | font-style: italic; 45 | } 46 | .hljs-doctag, .hljs-formula { 47 | color: #c678dd; 48 | } 49 | .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst { 50 | color: #e06c75; 51 | } 52 | .hljs-literal { 53 | color: #56b6c2; 54 | } 55 | .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string { 56 | color: #98c379; 57 | } 58 | .hljs-built_in, .hljs-class .hljs-title { 59 | color: #e6c07b; 60 | } 61 | .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number { 62 | color: #d19a66; 63 | } 64 | .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title { 65 | color: #61aeee; 66 | } 67 | .hljs-emphasis { 68 | font-style: italic; 69 | } 70 | .hljs-strong { 71 | font-weight: bold; 72 | } 73 | .hljs-link { 74 | text-decoration: underline; 75 | } 76 | -------------------------------------------------------------------------------- /3rdparty/monokai-sublime.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/ 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | background: #23241f; 12 | } 13 | 14 | .hljs, 15 | .hljs-tag, 16 | .hljs-subst { 17 | color: #f8f8f2; 18 | } 19 | 20 | .hljs-strong, 21 | .hljs-emphasis { 22 | color: #a8a8a2; 23 | } 24 | 25 | .hljs-bullet, 26 | .hljs-quote, 27 | .hljs-number, 28 | .hljs-regexp, 29 | .hljs-literal, 30 | .hljs-link { 31 | color: #ae81ff; 32 | } 33 | 34 | .hljs-code, 35 | .hljs-title, 36 | .hljs-section, 37 | .hljs-selector-class { 38 | color: #a6e22e; 39 | } 40 | 41 | .hljs-strong { 42 | font-weight: bold; 43 | } 44 | 45 | .hljs-emphasis { 46 | font-style: italic; 47 | } 48 | 49 | .hljs-keyword, 50 | .hljs-selector-tag, 51 | .hljs-name, 52 | .hljs-attr { 53 | color: #f92672; 54 | } 55 | 56 | .hljs-symbol, 57 | .hljs-attribute { 58 | color: #66d9ef; 59 | } 60 | 61 | .hljs-params, 62 | .hljs-class .hljs-title { 63 | color: #f8f8f2; 64 | } 65 | 66 | .hljs-string, 67 | .hljs-type, 68 | .hljs-built_in, 69 | .hljs-builtin-name, 70 | .hljs-selector-id, 71 | .hljs-selector-attr, 72 | .hljs-selector-pseudo, 73 | .hljs-addition, 74 | .hljs-variable, 75 | .hljs-template-variable { 76 | color: #e6db74; 77 | } 78 | 79 | .hljs-comment, 80 | .hljs-deletion, 81 | .hljs-meta { 82 | color: #75715e; 83 | } 84 | -------------------------------------------------------------------------------- /3rdparty/tomorrow-night-bright.css: -------------------------------------------------------------------------------- 1 | /* Tomorrow Night Bright Theme */ 2 | /* Original theme - https://github.com/chriskempson/tomorrow-theme */ 3 | /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */ 4 | 5 | /* Tomorrow Comment */ 6 | .hljs-comment, 7 | .hljs-quote { 8 | color: #969896; 9 | } 10 | 11 | /* Tomorrow Red */ 12 | .hljs-variable, 13 | .hljs-template-variable, 14 | .hljs-tag, 15 | .hljs-name, 16 | .hljs-selector-id, 17 | .hljs-selector-class, 18 | .hljs-regexp, 19 | .hljs-deletion { 20 | color: #d54e53; 21 | } 22 | 23 | /* Tomorrow Orange */ 24 | .hljs-number, 25 | .hljs-built_in, 26 | .hljs-builtin-name, 27 | .hljs-literal, 28 | .hljs-type, 29 | .hljs-params, 30 | .hljs-meta, 31 | .hljs-link { 32 | color: #e78c45; 33 | } 34 | 35 | /* Tomorrow Yellow */ 36 | .hljs-attribute { 37 | color: #e7c547; 38 | } 39 | 40 | /* Tomorrow Green */ 41 | .hljs-string, 42 | .hljs-symbol, 43 | .hljs-bullet, 44 | .hljs-addition { 45 | color: #b9ca4a; 46 | } 47 | 48 | /* Tomorrow Blue */ 49 | .hljs-title, 50 | .hljs-section { 51 | color: #7aa6da; 52 | } 53 | 54 | /* Tomorrow Purple */ 55 | .hljs-keyword, 56 | .hljs-selector-tag { 57 | color: #c397d8; 58 | } 59 | 60 | .hljs { 61 | display: block; 62 | overflow-x: auto; 63 | background: black; 64 | color: #eaeaea; 65 | padding: 0.5em; 66 | } 67 | 68 | .hljs-emphasis { 69 | font-style: italic; 70 | } 71 | 72 | .hljs-strong { 73 | font-weight: bold; 74 | } 75 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | webglfundamentals.org 2 | 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | # Copyright 2021 GFXFundamentals. 2 | # All rights reserved. 3 | # 4 | # Redistribution and use in source and binary forms, with or without 5 | # modification, are permitted provided that the following conditions are 6 | # met: 7 | # 8 | # * Redistributions of source code must retain the above copyright 9 | # notice, this list of conditions and the following disclaimer. 10 | # * Redistributions in binary form must reproduce the above 11 | # copyright notice, this list of conditions and the following disclaimer 12 | # in the documentation and/or other materials provided with the 13 | # distribution. 14 | # * Neither the name of GFXFundamentals. nor the names of his 15 | # contributors may be used to endorse or promote products derived from 16 | # this software without specific prior written permission. 17 | # 18 | # THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 19 | # "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 20 | # LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 21 | # A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 22 | # OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 23 | # SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 24 | # LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 25 | # DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 26 | # THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 | # (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 28 | # OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 | 30 | -------------------------------------------------------------------------------- /build/conf/jsdoc.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "tags" : { 3 | "allowUnknownTags" : true 4 | }, 5 | "plugins" : ["plugins/markdown"], 6 | "private" : false, 7 | "templates" : { 8 | "cleverLinks" : false, 9 | "monospaceLinks" : true, 10 | "dateFormat" : "ddd MMM Do YYYY", 11 | "outputSourceFiles" : false, 12 | "outputSourcePath" : false, 13 | "systemName" : "WebGL Fundamentals", 14 | "footer" : "", 15 | "copyright" : "copyright GFXFundamentals", 16 | "linenums" : true, 17 | "collapseSymbols" : false, 18 | "inverseNav" : true, 19 | "highlightTutorialCode" : true, 20 | "default" : { 21 | "outputSourceFiles" : false, 22 | "includeDate" : false 23 | }, 24 | "analytics": { 25 | "ua": "UA-59804936-1", 26 | "domain": "auto" 27 | } 28 | }, 29 | "markdown" : { 30 | "parser" : "gfm", 31 | "hardwrap" : true 32 | }, 33 | "opts" : { 34 | "readme" : "docs.md", 35 | "encoding" : "utf8" 36 | } 37 | } 38 | 39 | -------------------------------------------------------------------------------- /build/jsdoc-template/LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012-13 Terry Weiss. All rights reserved. 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /build/jsdoc-template/template/jsdoc.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "tags" : { 3 | "allowUnknownTags" : true 4 | }, 5 | "plugins" : ["plugins/markdown"], 6 | 7 | "templates" : { 8 | "cleverLinks" : false, 9 | "monospaceLinks" : false, 10 | "dateFormat" : "ddd MMM Do YYYY", 11 | "outputSourceFiles" : true, 12 | "outputSourcePath" : true, 13 | "systemName" : "DocStrap", 14 | "footer" : "", 15 | "copyright" : "DocStrap Copyright © 2012-2014 The contributors to the JSDoc3 and DocStrap projects.", 16 | "navType" : "vertical", 17 | "theme" : "cosmo", 18 | "linenums" : true, 19 | "collapseSymbols" : false, 20 | "inverseNav" : true, 21 | "highlightTutorialCode" : true, 22 | "protocol": "fred://" 23 | }, 24 | "markdown" : { 25 | "parser" : "gfm", 26 | "hardwrap" : true 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /build/jsdoc-template/template/static/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/build/jsdoc-template/template/static/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /build/jsdoc-template/template/static/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/build/jsdoc-template/template/static/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /build/jsdoc-template/template/static/scripts/prettify/lang-css.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.createSimpleLexer([ 2 | ["pln", /^[\t\n\f\r ]+/, null, " \t\r\n "] 3 | ], [ 4 | ["str", /^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/, null], 5 | ["str", /^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/, null], 6 | ["lang-css-str", /^url\(([^"')]*)\)/i], 7 | ["kwd", /^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i, null], 8 | ["lang-css-kw", /^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i], 9 | ["com", /^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//], 10 | ["com", /^(?:<\!--|--\>)/], 11 | ["lit", /^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i], 12 | ["lit", /^#[\da-f]{3,6}/i], 13 | ["pln", /^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i], 14 | ["pun", /^[^\s\w"']+/] 15 | ]), ["css"]); 16 | PR.registerLangHandler(PR.createSimpleLexer([], [ 17 | ["kwd", /^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i] 18 | ]), ["css-kw"]); 19 | PR.registerLangHandler(PR.createSimpleLexer([], [ 20 | ["str", /^[^"')]+/] 21 | ]), ["css-str"]); -------------------------------------------------------------------------------- /build/jsdoc-template/template/tmpl/example.tmpl: -------------------------------------------------------------------------------- 1 | 2 |
3 | -------------------------------------------------------------------------------- /build/jsdoc-template/template/tmpl/examples.tmpl: -------------------------------------------------------------------------------- 1 | 6 |

7 | 8 |
9 | 12 | -------------------------------------------------------------------------------- /build/jsdoc-template/template/tmpl/exceptions.tmpl: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |
14 | Type 15 |
16 |
17 | 18 |
19 |
20 |
21 |
22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /build/jsdoc-template/template/tmpl/fires.tmpl: -------------------------------------------------------------------------------- 1 | 2 |
  • 3 | 4 |
    • -------------------------------------------------------------------------------- /build/jsdoc-template/template/tmpl/mainpage.tmpl: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |

    9 | 10 | 11 | 12 |
    13 |
    14 |
    15 | 16 | -------------------------------------------------------------------------------- /build/jsdoc-template/template/tmpl/members.tmpl: -------------------------------------------------------------------------------- 1 | 5 |
    6 |

    7 | 8 | 9 |

    10 | 11 |
    12 |
    13 | 14 |
    15 | 16 |
    17 | 18 | 19 | 20 |
    Type:
    21 | 26 | 27 | 28 | 29 | 30 | 31 |
    Example 1? 's':'' ?>
    32 | 33 | 34 |
    35 | -------------------------------------------------------------------------------- /build/jsdoc-template/template/tmpl/returns.tmpl: -------------------------------------------------------------------------------- 1 | 5 |
    6 | 7 |
    8 | 9 | 10 | 11 |
    12 |
    13 | Type 14 |
    15 |
    16 | 17 |
    18 |
    19 | 20 | -------------------------------------------------------------------------------- /build/jsdoc-template/template/tmpl/sections.tmpl: -------------------------------------------------------------------------------- 1 | 2 |
    3 | 6 |
    7 | -------------------------------------------------------------------------------- /build/jsdoc-template/template/tmpl/source.tmpl: -------------------------------------------------------------------------------- 1 | 4 |
    5 |
    6 |
    8 |
    9 |
    10 | -------------------------------------------------------------------------------- /build/jsdoc-template/template/tmpl/tutorial.tmpl: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | 0) { ?> 5 | 10 | 11 | 12 |

    13 |
    14 | 15 |
    16 | 17 |
    18 | 19 |
    20 | -------------------------------------------------------------------------------- /build/jsdoc-template/template/tmpl/type.tmpl: -------------------------------------------------------------------------------- 1 | 5 | | 6 | -------------------------------------------------------------------------------- /build/templates/analytics.template: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /build/templates/diagram.template: -------------------------------------------------------------------------------- 1 |
    2 | 3 | {{#caption}} 4 |
    {{{../caption}}}
    5 | {{/caption}} 6 | {{^caption}} 7 | {{/caption}} 8 |
    9 | 10 | -------------------------------------------------------------------------------- /build/templates/example.template: -------------------------------------------------------------------------------- 1 |
    2 | 3 | {{{caption}}} 4 |
    5 | 6 | -------------------------------------------------------------------------------- /build/templates/header.template: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | {{{include "build/templates/languages.template"}}} 4 | {{langInfo.toc}} 5 |
    6 |
    7 |
    8 |

    WebGLFundamentals.org

    9 | {{{include "build/templates/repobanner.template"}}} 10 |
    11 | 12 | -------------------------------------------------------------------------------- /build/templates/image.template: -------------------------------------------------------------------------------- 1 |
    2 | 3 | {{#caption}} 4 |
    {{{../caption}}}
    5 | {{/caption}} 6 | {{^caption}} 7 | {{/caption}} 8 |
    9 | 10 | -------------------------------------------------------------------------------- /build/templates/lang-select.template: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /build/templates/langs-meta.template: -------------------------------------------------------------------------------- 1 | {{#each langs}} 2 | 3 | {{/each}} 4 | 5 | 6 | -------------------------------------------------------------------------------- /build/templates/languages.template: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /build/templates/octocat-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /build/templates/repobanner.template: -------------------------------------------------------------------------------- 1 | 92 |
    Fix, Fork, Contribute {{{include "build/templates/octocat-icon.svg"}}}
    93 | -------------------------------------------------------------------------------- /contributors.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs.md: -------------------------------------------------------------------------------- 1 | WebGLFundamentals API Docs 2 | ========================== 3 | 4 | These docs are an attempt to help explain some of the helper functions 5 | used in the articles on [webglfundamentals.org](https://webglfundamentals.org). 6 | 7 | WebGL is a very low-level API and so using it is very verbose. To draw a simple 8 | lighted cube can easily require 50-100 WebGL calls. Calls to create buffers 9 | and put data in them. Calls to create that data in the first place. Calls to 10 | create GLSL shader programs. Calls to read attribute and uniform locations. Calls 11 | to create textures, bind textures to texture units, bind buffers to attributes, 12 | and set uniforms. 13 | 14 | At some point this complexity makes it hard to concentrate on the topic at hand 15 | and so helper functions can [reduce the number of lines needed to focus on the 16 | task at hand](/webgl/lessons/webgl-less-code-more-fun.html). 17 | 18 | [Functions for reducing the amount of code can be found here](/docs/module-webgl-utils.html). 19 | 20 | If you're using WebGL to do 2D or 3D you'll likely need many math helper functions 21 | in JavaScript as well. 22 | 23 | [Functions for 2D math are here](/docs/module-webgl-2d-math.html). 24 | 25 | [Functions for 3D math are here](/docs/module-webgl-3d-math.html). 26 | 27 | Finally WebGL requires vertices to operate on. [Functions to generate vertices 28 | for common shapes like spheres, cubes, planes, cones, etc can be found here](/docs/module-primitives.html). 29 | 30 | # JSDoc3 Plea 31 | 32 | These docs are generated with [JSDoc3](https://usejsdoc.org/). I find them very confusing to look at 33 | and in some places frustratingly verbose. If you have any experience with JSDoc3 and know how to 34 | make the docs more approachable and useful please [submit a pull request](https://github.com/gfxfundamentals/webgl-fundamentals) 35 | or [file an issue with details](https://github.com/gfxfundamentals/webgl-fundamentals/issues). 36 | 37 | -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webgl-fundamentals", 3 | "version": "0.0.0", 4 | "description": "Some WebGL Tutorials designed for real WebGL and not 20yr old OpenGL", 5 | "main": "index.js", 6 | "devDependencies": { 7 | "@gfxfundamentals/lesson-builder": "github:gfxfundamentals/lesson-builder#v1.17.6", 8 | "@gfxfundamentals/live-editor": "github:gfxfundamentals/live-editor#v1.3.1", 9 | "eslint-plugin-google-camelcase": "0.0.2", 10 | "eslint-plugin-html": "6.1.1", 11 | "eslint-plugin-one-variable-per-var": "0.0.3", 12 | "eslint-plugin-optional-comma-spacing": "0.0.4", 13 | "eslint-plugin-require-trailing-comma": "0.0.1", 14 | "grunt": "1.3.0", 15 | "grunt-cli": "1.3.2", 16 | "grunt-contrib-clean": "2.0.0", 17 | "grunt-contrib-copy": "1.0.0", 18 | "grunt-contrib-watch": "1.1.0", 19 | "grunt-eslint": "23.0.0", 20 | "grunt-jsdoc": "2.4.1", 21 | "ld-check-dependencies": "1.2.1", 22 | "load-grunt-tasks": "5.1.0", 23 | "minami": "1.2.3", 24 | "servez": "1.11.0" 25 | }, 26 | "scripts": { 27 | "build": "ld-check-dependencies && grunt", 28 | "build-ci": "grunt", 29 | "buildlessons": "grunt buildlessons", 30 | "watch": "ld-check-dependencies && grunt buildwatch", 31 | "watch-no-check": "grunt buildwatch", 32 | "pre-push": "ld-check-dependencies && grunt pre-push", 33 | "pre-build": "grunt pre-push", 34 | "start": "servez out", 35 | "test": "check-all-the-errors --follow-links=both --output=webglfundamentals.check.json out \"*.html\"" 36 | }, 37 | "repository": { 38 | "type": "git", 39 | "url": "git://github.com/gfxfundamentals/webgl-fundamentals.git" 40 | }, 41 | "keywords": [ 42 | "WebGL" 43 | ], 44 | "author": "GFXFundamentals", 45 | "license": "MIT", 46 | "bugs": { 47 | "url": "https://github.com/gfxfundamentals/webgl-fundamentals/issues" 48 | }, 49 | "homepage": "https://github.com/gfxfundamentals/webgl-fundamentals" 50 | } 51 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | Sitemap: https://webglfundamentals.org/sitemap.xml 2 | 3 | 4 | -------------------------------------------------------------------------------- /source_assets/3df.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/source_assets/3df.afdesign -------------------------------------------------------------------------------- /source_assets/matrixstack.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/source_assets/matrixstack.afdesign -------------------------------------------------------------------------------- /source_assets/vertex-shader-anim.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/source_assets/vertex-shader-anim.psd -------------------------------------------------------------------------------- /todo.md: -------------------------------------------------------------------------------- 1 | TO DO 2 | ===== 3 | 4 | * Make build not dependent on Node 8.4 5 | 6 | The JSDOC template is broken on Node 8.5 7 | Maybe switch to the same template as twgl. 8 | A quick try and that broke too though. 9 | Not clear why. 10 | 11 | * Use TWGL 12 | 13 | There's no plans to maintain the non-twgl lib 14 | 15 | * Consider switching everything to using VAOs 16 | 17 | VAOs are just better period but to really use them 18 | correctly requires more organization. You really 19 | need to specify attribute locations so the 20 | same VAO can be used with muliple shaders. 21 | 22 | * Consider switching everything to use template strings 23 | 24 | Plus: Template strings are less confusing 25 | 26 | Minus: Template strings can not as easily be formatted? 27 | 28 | A good editor could look at the type of script and 29 | switch modes. I suppose a good editor could also 30 | look for a comment or #version as well though 31 | 32 | 33 | -------------------------------------------------------------------------------- /webgl/background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL Fundamentals 8 | 19 | 20 | 21 |
    22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /webgl/embed-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Embed Test 8 | 9 | 10 |

    Embed Test

    11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /webgl/lessons/fr/index.md: -------------------------------------------------------------------------------- 1 | Title: Les fondamentaux en WebGL 2 | 3 | WebGL de zéro. Sans magie. 4 | 5 | Ce site présente des articles pour apprendre les principes de bases en WebGL. 6 | Ils ne sont PAS un mix de vieux articles pour OpenGL, contrairement à d'autres sur le web. 7 | Ils sont neufs, n'évoquent pas de principes qui ne sont plus utilisés mais apportent une pleine 8 | compréhension de ce que WebGL est vraiment et de comment il fonctionne vraiment. 9 | 10 | {{{include "webgl/lessons/fr/toc.html"}}} 11 | 12 | 13 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /webgl/lessons/fr/langinfo.hanson: -------------------------------------------------------------------------------- 1 | { 2 | language: 'Français', 3 | langCode: 'fr', 4 | defaultExampleCaption: "Cliquer ici pour ouvrir dans une nouvelle fenêtre", 5 | title: 'WebGL - Les bases', 6 | description: 'Les bases de WebGL. Sans magie.', 7 | link: 'https://webglfundamentals.org/webgl/lessons/fr', 8 | commentSectionHeader: '
    Une question ? Demander sur stackoverflow.
    \n
    Un problème ? Signaler sur github.
    ', 9 | missing: "Sorry this article has not been translated yet. [Translations Welcome](https://github.com/gfxfundamentals/webgl-fundamentals)! 😄\n\n[Here's the original English article for now]({{{origLink}}}).", 10 | toc: 'Table des Matières', 11 | categoryMapping: { 12 | 'fundamentals': "Les bases", 13 | 'image-processing': "Traitement d'image", 14 | 'matrices': "2D : translation, rotation, échelle, matrices", 15 | '3d': "3D", 16 | 'lighting': "Lumières", 17 | 'organization': "Structure et Organisation", 18 | 'techniques': "Techniques", 19 | '2d': "2D", 20 | 'text': "Texte", 21 | 'misc': "Divers", 22 | 'textures': "Divers", 23 | }, 24 | } -------------------------------------------------------------------------------- /webgl/lessons/fr/toc.html: -------------------------------------------------------------------------------- 1 | {{{tocHtml}}} 2 | -------------------------------------------------------------------------------- /webgl/lessons/index.md: -------------------------------------------------------------------------------- 1 | Title: WebGL Fundamentals 2 | 3 | WebGL from the ground up. No magic. 4 | 5 | These are a set of articles that teach WebGL from basic principles. 6 | They are NOT old rehashed out of date OpenGL articles like many others on the net. 7 | They are entirely new, discarding the old out of date ideas and bringing you 8 | to a full understanding of what WebGL really is and how it really works. 9 | 10 | If you are interested in WebGL2 please see [webgl2fundamentals.org](https://webgl2fundamentals.org) 11 | 12 | {{{include "webgl/lessons/toc.html"}}} 13 | 14 | 15 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /webgl/lessons/ja/index.md: -------------------------------------------------------------------------------- 1 | Title: WebGLの基本 2 | 3 | WebGLを基本から学ぶ授業. 4 | 5 | この記事はWebGLを基本から教える記事である。 6 | 他のサイトに載せてあるような昔のOpenGLが更新された記事__ではなく__、 7 | 時代遅れのアイデアを捨てて、 8 | WebGLとは何か、WebGLがどうやって動くかについて、理解へと導く、完全に新たな記事である。 9 | 10 | WebGL2に興味があればこれを参照して下さい[webgl2fundamentals.org](https://webgl2fundamentals.org) 11 | 12 | {{{include "webgl/lessons/ja/toc.html"}}} 13 | 14 | 15 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /webgl/lessons/ja/langinfo.hanson: -------------------------------------------------------------------------------- 1 | { 2 | language: '日本語', 3 | langCode: 'ja', 4 | defaultExampleCaption: "クリックして別のウインドウを開く", 5 | title: 'WebGLを基本から学ぶ', 6 | description: 'この記事はWebGLの基本から教える記事である。', 7 | link: 'https://webglfundamentals.org/', 8 | commentSectionHeader: '
    問題点/バグ? githubでissueを作成.
    ', 9 | missing: "ごめん！この記事はまだ翻訳されていない。[翻訳してくれますか？](https://github.com/gfxfundamentals/webgl-fundamentals)! 😄\n\n[ここに英語版がある]({{{origLink}}}).", 10 | toc: '目次', 11 | categoryMapping: { 12 | 'fundamentals': "基本", 13 | 'image-processing': "画像処理", 14 | 'matrices': "2Dでの移動、回転、拡大縮小、行列計算", 15 | '3d': "3D", 16 | 'lighting': "Lighting", 17 | 'organization': "Structure and Organization", 18 | 'geometry': "Geometry", 19 | 'textures': "テクスチャ", 20 | 'rendertargets': "Rendering To A Texture", 21 | 'techniques': "Techniques", 22 | '2d': "2D", 23 | 'text': "Text", 24 | 'misc': "その他のトピック", 25 | }, 26 | } -------------------------------------------------------------------------------- /webgl/lessons/ja/toc.html: -------------------------------------------------------------------------------- 1 | {{{tocHtml}}} 2 | -------------------------------------------------------------------------------- /webgl/lessons/ja/webgl-qna-how-to-achieve-moving-line-with-trail-effects.md: -------------------------------------------------------------------------------- 1 | Title: トレイル効果を使った動く線を書く方法 2 | Description: トレイル効果を使った動く線を書く方法 3 | TOC: トレイル効果を使った動く線を書く方法 4 | 5 | ## 質問 6 | 7 | どのように下記デモにあるような線を描くのか？トレイル効果(trailing effects)でシンプルな線を描くことは簡単に思えるかもしれません。しかし、これらの線は屈折しています。 8 | 9 | http://uber.github.io/deck.gl/#/examples/custom-layers/trip-routes 10 | 11 | ## 回答 12 | 13 | 線のUV座標を渡すか、UV座標を生成し、それらを使用して線に色をつけることができます。時間を渡すと次のようなスクロールができます。 14 | 15 | {{{example url="../webgl-qna-how-to-achieve-moving-line-with-trail-effects-example-1.html"}}} 16 | 17 | もちろん、色のコードの代わりにテクスチャを使うこともできます。 18 | 19 | {{{example url="../webgl-qna-how-to-achieve-moving-line-with-trail-effects-example-2.html"}}} 20 | 21 |
    22 |
    質問とその引用箇所は 23 | K.MiaoによるCC BY-SA 3.0 24 | こちら 25 | です。 26 |
    27 |
    28 | -------------------------------------------------------------------------------- /webgl/lessons/ko/index.md: -------------------------------------------------------------------------------- 1 | Title: WebGL 기초 2 | 3 | 4 | 기초부터 배우는 WebGL 5 | 6 | WebGL의 기초 원리부터 알려주는 글 모음입니다. 7 | 하지만 인터넷에 있는 오래된 OpenGL 글을 다시 정리한 건 아닙니다. 8 | 완전히 새롭게, 오래된 지식들은 버리고, WebGL이 실제로 무엇이며 어떻게 작동하는지 완전히 이해할 수 있을 겁니다. 9 | 10 | WebGL2에 관심이 있다면 [webgl2fundamentals.org](https://webgl2fundamentals.org)를 봐주세요. 11 | 12 | {{{include "webgl/lessons/ko/toc.html"}}} 13 | 14 | 19 | 20 | -------------------------------------------------------------------------------- /webgl/lessons/ko/lang.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --article-font-family: Apple SD Gothic Neo, Malgun Gothic, sans-serif; 3 | --headline-font-family: Apple SD Gothic Neo, Malgun Gothic, sans-serif; 4 | } 5 | -------------------------------------------------------------------------------- /webgl/lessons/ko/langinfo.hanson: -------------------------------------------------------------------------------- 1 | { 2 | language: '한국어', 3 | langCode: 'ko', 4 | defaultExampleCaption: "새 창을 열려면 여기를 클릭", 5 | title: 'WebGL 기초', 6 | description: '처음부터 배우는 WebGL', 7 | link: 'https://webglfundamentals.org/webgl/lessons/ko/', 8 | commentSectionHeader: ` 9 |
    이슈/버그는? Github에 이슈를 만들어주세요.
    10 |
    11 | 코드 블록은 <pre><code>여기에 코드 입력</code></pre>를 사용해주세요 12 |
    13 | `, 14 | missing: "죄송하지만 이 글은 아직 번역 전입니다.\n\n[번역](https://github.com/gfxfundamentals/webgl-fundamentals) 환영합니다! 😄\n\n영어 원문은 [여기]({{{origLink}}})에 있습니다.", 15 | toc: '목차', 16 | categoryMapping: { 17 | 'fundamentals': "기초", 18 | 'image-processing': "이미지 처리", 19 | 'matrices': "2D 평행 이동, 회전, 스케일, 행렬 수학", 20 | 'lighting': "조명", 21 | 'organization': "구조와 구성", 22 | 'geometry': "지오메트리", 23 | 'textures': "텍스처", 24 | 'shadows': "그림자", 25 | 'rendertargets': "텍스처 렌더링", 26 | 'techniques': "기법", 27 | 'text': "텍스트", 28 | 'tips': "팁", 29 | 'reference': "참고", 30 | 'optimization': "최적화", 31 | }, 32 | } 33 | -------------------------------------------------------------------------------- /webgl/lessons/ko/toc.html: -------------------------------------------------------------------------------- 1 | {{{tocHtml}}} 2 | 7 | -------------------------------------------------------------------------------- /webgl/lessons/ko/webgl-readpixels.md: -------------------------------------------------------------------------------- 1 | Title: WebGL readPixels 2 | Description: readPixels의 세부 사항 3 | TOC: readPixels 4 | 5 | 6 | WebGL에서는 포맷/타입 쌍을 `readPixels`에 전달합니다. 7 | 주어진 텍스처 내부 포맷(프레임 버퍼에 첨부된)의 경우, 단 2개의 포맷/타입 조합만 유효합니다 8 | 9 | 명세서을 보면: 10 | 11 | > 정규화된 고정 소수점 렌더링 표면의 경우, 포맷 `RGBA`와 타입 `UNSIGNED_BYTE` 조합이 유효합니다. 12 | 부호있는 정수형 렌더링 표면의 경우, 포맷 `RGBA_INTEGER`와 타입 `INT` 조합이 유효합니다. 13 | 부호없는 정수형 렌더링 표면의 경우, 포맷 `RGBA_INTEGER`와 타입 `UNSIGNED_INT`가 유효합니다. 14 | 15 | 두 번째 조합은 구현이 정의되어 있으므로 코드를 이식 가능하게 하려면 사용하지 않아야 합니다. 16 | 포맷/타입 조합이 뭔지 물어볼 수 있는데 17 | 18 | ```js 19 | // 첨부된 읽기 텍스처와 함께 프레임 버퍼가 바인딩되어 있다고 가정 20 | const format = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT); 21 | const type = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE); 22 | ``` 23 | 24 | 또한 프레임 버퍼에 첨부하고 렌더링할 수 있음을 의미하는, 렌더링 가능한 텍스처 포맷도, 어느정도 구현이 정의되어 있는지 확인하세요. 25 | WebGL1은 렌더링할 수 있는 `RGBA`/`UNSIGNED_BYTE` 조합, 하나만을 필요로 합니다. 26 | 나머지는 모두 선택 사항(예를 들어 `LUMINANCE`)이며, 일부(예를 들어 `RGBA`/`FLOAT`)는 확장으로 렌더링할 수 있습니다. 27 | 28 | **아래 표는 라이브입니다.** 29 | 아마 기기, OS, GPU, 브라우저에 따라 다른 결과를 준다는 걸 눈치채셨을 겁니다. 30 | 제 컴퓨터에선 Chrome과 Firefox가 일부 구현 정의 값에 대해 다른 결과를 제공하고 있습니다. 31 | 32 |
    33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /webgl/lessons/ko/webgl-references.md: -------------------------------------------------------------------------------- 1 | Title: 참고 자료 2 | Description: 기타 참고 자료 3 | TOC: 참고 자료 4 | 5 | 6 | 유용하다고 생각되는 다른 링크들 7 | 8 | ## 튜토리얼 및 강의 9 | 10 | * [초심자를 위한 3D 게임 셰이더](https://lettier.github.io/3d-game-shaders-for-beginners/)에는 많은 그래픽 기술에 대한 훌륭한 설명이 있습니다. 11 | OpenGL 기반이지만 설명은 일러스트로 잘 되어 있어서 WebGL에 적용할 수 있습니다. 12 | 13 | * [Learn OpenGL](https://learnopengl.com/): 최신 OpenGL 강의 14 | 이건 유용할 수도 있고 아닐 수도 있는데요. 15 | API가 비슷하긴 하지만 OpenGL은 WebGL이 아닙니다. 16 | 한 가지 OpenGL은 C 기반의 라이브러리입니다. 17 | 또 다른 문제로 OpenGL은 WebGL보다 더 많은 기능들을 가지고 있고 셰이더 언어는 많은 차이점이 있습니다. 18 | 그럼에도 불구하고, 많은 아이디어와 보여주는 기술들은 OpenGL과 마찬가지로 WebGL에서 유용합니다. 19 | 20 | ## Helper / Extension 21 | 22 | * [Spector](https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk?hl=en): 모든 WebGL 호출을 보여주는 extension 23 | 24 | * [Shader Editor](https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob?hl=en): 실시간 웹 페이지에서 shader를 보고 편집할 수 있는 extension 25 | 26 | * [WebGL Insight](https://chrome.google.com/webstore/detail/webgl-insight/djdcbmfacaaocoomokenoalbomllhnko?hl=en): WebGL 사용량을 볼 수 있는 extension 27 | 28 | * [webgl-helpers](https://greggman.github.io/webgl-helpers/): WebGL에 도움이 되는 스크립트 29 | 30 | ## 라이브러리 31 | 32 | * [twgl](https://twgljs.org): WebGL을 덜 장황하게 만들도록 도와주는 라이브러리 33 | 34 | * [three.js](https://threejs.org): 가장 인기있는 자바스크립트 3D 라이브러리 35 | 36 | * [PlayCanvas](https://playcanvas.com/) 게임 에디터가 있는 WebGL 게임 엔진 37 | 38 | * [regl](https://regl.party/): stateless functional WebGL 라이브러리 39 | 40 | ## 명세서 41 | 42 | * [WebGL](https://www.khronos.org/registry/webgl/specs/latest/1.0/): WebGL 명세서 43 | 44 | * [OpenGL ES 2.0](https://www.khronos.org/registry/OpenGL/specs/es/2.0/es_full_spec_2.0.pdf): WebGL의 기반이 되는 명세서 45 | 46 | * [GLSL ES 1.0](https://www.khronos.org/files/opengles_shading_language.pdf): WebGL용 셰이더 언어 명세서 47 | 48 | ## Fun 49 | 50 | * [Shadertoy.com](https://shadertoy.com): 극한의 제약 조건에서 생성되는 놀라운 프래그먼트 셰이더 51 | 52 | 주의: shadertoy.com에 있는 셰이더는 일반적으로 프로덕션 WebGL 앱에서 사용되는 셰이더 유형이 아닙니다. 53 | 그럼에도 불구하고 예제에서 배울 수 있는 많은 기술들이 있습니다. 54 | 55 | * [glslsandbox.com](https://glslsandbox.com): 원조 프래그먼트 셰이더 플레이그라운드 56 | 57 | * [vertexshaerart.com](https://vertexshaderart.com): GLSL 샌드박스의 정점 셰이더 버전 58 | 59 | --- 60 | 61 | 추가할만한 다른 좋은 참고 자료를 알고 있다면 자유롭게 [이슈](https://github.com/gfxfundamentals/webgl-fundamentals/issues)를 열어주세요. 62 | 63 | -------------------------------------------------------------------------------- /webgl/lessons/ko/webgl-sprites.md: -------------------------------------------------------------------------------- 1 | Title: WebGL 스프라이트 2 | Description: WebGL에서 스프라이트를 수행하는 방법 3 | TOC: 스프라이트 4 | 5 | 6 | 현재 이 글은 그냥 플레이스홀더입니다. 7 | 8 | 스프라이트는 이미 다뤘지만, "스프라이트"라고 부르지 않았는데요. 9 | 10 | [텍스처로 텍스트를 그리는 방법](webgl-text-texture.html)이 스프라이트에 대한 글입니다. 11 | 텍스트 이미지를 스프라이트 이미지로 바꾸면 스프라이트가 됩니다. 12 | 13 | 관련된 글은 [WebGL에서 Canvas 2D의 `drawImage` 함수를 재현하는 글](webgl-2d-drawimage.html)과 [행렬 스택에 대한 글](webgl-2d-matrix-stack.html)입니다. 14 | 15 | 여기 있는 대부분 글에서 WebGL 스프라이트를 다룹니다. 16 | 다뤘으면 하는 다른 내용이 있다면 [이슈](https://github.com/gfxfundamentals/webgl-fundamentals/issues/new?assignees=&labels=suggested+topic&template=suggest-topic.md&title=%5BSUGGESTION%5D)를 남겨주세요. 17 | 18 | -------------------------------------------------------------------------------- /webgl/lessons/ko/webgl-state-diagram.md: -------------------------------------------------------------------------------- 1 | Title: WebGL 상태 다이어그램 2 | Description: WebGL 상태 다이어그램 3 | TOC: WebGL 상태 다이어그램 4 | Link: webgl/lessons/resources/webgl-state-diagram.html 5 | 6 | 7 | [WebGL 상태 다이어그램](/webgl/lessons/resources/webgl-state-diagram.html) 8 | 9 | -------------------------------------------------------------------------------- /webgl/lessons/lang.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --article-font-family: Georgia, serif; 3 | --headline-font-family: sans-serif; 4 | /* a block of code */ 5 | --code-block-font-family: "Lucida Console", Monaco, monospace; 6 | /* a word in a sentence */ 7 | --code-font-family: monospace; 8 | } -------------------------------------------------------------------------------- /webgl/lessons/langinfo.hanson: -------------------------------------------------------------------------------- 1 | { 2 | language: 'English', 3 | langCode: 'en', // if not specified will use folder 4 | defaultExampleCaption: "click here to open in a separate window", 5 | title: 'WebGL Fundamentals', 6 | description: 'Learn WebGL from the ground up. No magic', 7 | link: 'https://webglfundamentals.org/', 8 | commentSectionHeader: ` 9 |
    Questions? Ask on stackoverflow.
    10 |
    Issue/Bug? Create an issue on github.
    11 |
    12 | Use <pre><code>code goes here</code></pre> for code blocks 13 |
    14 | `, 15 | missing: ` 16 | Sorry this article has not been translated yet. 17 | 18 | [Translations Welcome](https://github.com/gfxfundamentals/webgl-fundamentals)! 😄 19 | 20 | [Here's the original English article for now]({{{origLink}}}). 21 | `, 22 | contribTemplate: 'Thank you ${login}
    for ${contributions} contributions', 23 | toc: 'Table of Contents', 24 | categoryMapping: { 25 | 'fundamentals': "Fundamentals", 26 | 'image-processing': "Image Processing", 27 | 'matrices': "2D translation, rotation, scale, matrix math", 28 | '3d': "3D", 29 | 'lighting': "Lighting", 30 | 'organization': "Structure and Organization", 31 | 'geometry': "Geometry", 32 | 'textures': "Textures", 33 | 'shadows': "Shadows", 34 | 'rendertargets': "Rendering To A Texture", 35 | 'techniques': "Techniques", 36 | '2d': "2D", 37 | 'text': "Text", 38 | 'tips': "Tips", 39 | 'misc': "Misc", 40 | 'gpgpu': "GPGPU", 41 | 'reference': "Reference", 42 | 'optimization': "Optimization", 43 | }, 44 | } -------------------------------------------------------------------------------- /webgl/lessons/pl/index.md: -------------------------------------------------------------------------------- 1 | Title: WebGL Fundamentals 2 | 3 | 基本的のWebGL 4 | 5 | These are a set of articles that teach WebGL from basic principles. 6 | They are NOT old rehashed out of date OpenGL articles like many others on the net. 7 | They are entirely new, discarding the old out of date ideas and bringing you 8 | to a full understanding of what WebGL really is and how it really works. 9 | 10 | {{{include "webgl/lessons/pl/toc.html"}}} 11 | 12 | 13 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /webgl/lessons/pl/langinfo.hanson: -------------------------------------------------------------------------------- 1 | { 2 | language: 'Polski', 3 | langCode: 'pl', 4 | defaultExampleCaption: "Kliknij tutaj by otworzyć w nowym oknie", 5 | title: 'Podstawy WebGL', 6 | description: 'Naucz się WebGL od podstaw. Bez magii.', 7 | link: 'https://webglfundamentals.org/webgl/lessons/pl', 8 | commentSectionHeader: ` 9 |
    Błędy w tłumaczeniu? Stwórz zgłoszenie na platformie github.
    `, 10 | missing: "Sorry this article has not been translated yet. [Translations Welcome](https://github.com/gfxfundamentals/webgl-fundamentals)! 😄\n\n[Here's the original English article for now]({{{origLink}}}).", 11 | toc: 'Spis Treści', 12 | categoryMapping: { 13 | 'fundamentals': "Podstawy", 14 | 'matrices': "2D translation, rotation, scale, matrix math", 15 | 'misc': "Różności", 16 | }, 17 | } -------------------------------------------------------------------------------- /webgl/lessons/pl/toc.html: -------------------------------------------------------------------------------- 1 | {{{tocHtml}}} 2 | -------------------------------------------------------------------------------- /webgl/lessons/pt-br/index.md: -------------------------------------------------------------------------------- 1 | Title: Fundamentos do WebGL 2 | 3 | WebGL desde o início. Sem mágica. 4 | 5 | Estes são um conjunto de artigos que ensinam WebGL a partir de princípios básicos. 6 | Eles não são antigos reanalisando artigos OpenGL abertos, como muitos outros na internet. 7 | Eles são totalmente novos, descartando as antigas idéias desatualizadas e trazendo você 8 | para uma compreensão completa do que o WebGL realmente é e como ele realmente funciona. 9 | 10 | Se você está interessado no WebGL2, por favor acesse: [webgl2fundamentals.org](https://webgl2fundamentals.org) 11 | 12 | {{{include "webgl/lessons/pt-br/toc.html"}}} 13 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /webgl/lessons/pt-br/langinfo.hanson: -------------------------------------------------------------------------------- 1 | { 2 | language: 'Portuguese', 3 | langCode: 'pt-br', 4 | defaultExampleCaption: "clique aqui para abrir uma janela separada", 5 | title: 'Fundamentos do WebGL', 6 | description: 'Aprenda WebGL desde o início. Sem mágica.', 7 | link: 'https://webglfundamentals.org/lessons/pt-br', 8 | commentSectionHeader: `
    Issue/Bug? Create an issue on github.
    `, 9 | missing: "Sorry this article has not been translated yet. [Translations Welcome](https://github.com/greggman/webgl2-fundamentals)! 😄\n\n[Here's the original English article for now]({{{origLink}}}).", 10 | toc: 'Table of Contents', 11 | categoryMapping: { 12 | 'fundamentals': "Fundamentos", 13 | 'image-processing': "Tratamento de imagens", 14 | 'matrices': "2D: translação, rotação, escala, matriz matemática", 15 | '3d': "3D", 16 | 'lighting': "Iluminação", 17 | 'organization': "Estrutura e Organização", 18 | 'geometry': "Geometria", 19 | 'textures': "Texturas", 20 | 'rendertargets': "Renderizando texturas", 21 | 'techniques': "Técnicas", 22 | '2d': "2D", 23 | 'text': "Texto", 24 | 'misc': "Diversos", 25 | }, 26 | } -------------------------------------------------------------------------------- /webgl/lessons/pt-br/toc.html: -------------------------------------------------------------------------------- 1 | {{{tocHtml}}} 2 | -------------------------------------------------------------------------------- /webgl/lessons/resources/avatar-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/avatar-icon.png -------------------------------------------------------------------------------- /webgl/lessons/resources/banner-00.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/banner-00.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/banner-00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/banner-00.png -------------------------------------------------------------------------------- /webgl/lessons/resources/blender-killer-whale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/blender-killer-whale.png -------------------------------------------------------------------------------- /webgl/lessons/resources/bone-display.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/bone-display.png -------------------------------------------------------------------------------- /webgl/lessons/resources/bowling-pin-silhouette.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Layer 1 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /webgl/lessons/resources/candle-holder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /webgl/lessons/resources/chrome-devtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/chrome-devtools.png -------------------------------------------------------------------------------- /webgl/lessons/resources/chrome-webserver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/chrome-webserver.png -------------------------------------------------------------------------------- /webgl/lessons/resources/cubes-with-depth-buffer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/cubes-with-depth-buffer.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/cubes-without-depth-buffer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/cubes-without-depth-buffer.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/desktop-4-4-4-4-texture-no-dither.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/desktop-4-4-4-4-texture-no-dither.png -------------------------------------------------------------------------------- /webgl/lessons/resources/devtools-source.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/devtools-source.gif -------------------------------------------------------------------------------- /webgl/lessons/resources/different-colored-mips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/different-colored-mips.png -------------------------------------------------------------------------------- /webgl/lessons/resources/download-webglfundamentals.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/download-webglfundamentals.gif -------------------------------------------------------------------------------- /webgl/lessons/resources/editor-lines-and-columns.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/editor-lines-and-columns.gif -------------------------------------------------------------------------------- /webgl/lessons/resources/fog-background-color-mismatch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/fog-background-color-mismatch.png -------------------------------------------------------------------------------- /webgl/lessons/resources/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | .lesson-main>* { 5 | margin: 1em 0; 6 | } 7 | iframe.background { 8 | position: fixed; 9 | width: 100%; 10 | max-width: 100% !important; 11 | height: 100vh; 12 | border: none; 13 | top: 0; 14 | z-index: -1000; 15 | } 16 | .container { 17 | margin: 2em auto; 18 | padding: 15px 50px; 19 | border-radius: 25px; 20 | background-color: rgba(255, 255, 255, 0.9); 21 | max-width: 700px; 22 | width: 80%; 23 | } 24 | #language { 25 | margin-top: -2em; 26 | width: auto; 27 | font-size: large; 28 | } 29 | .rss { 30 | float:right; 31 | width:46px; 32 | height:46px; 33 | } 34 | .rss img { 35 | width: 46px; 36 | height: 46px; 37 | } 38 | 39 | 40 | @media (max-width: 600px) { 41 | .container { 42 | padding: 15px 20px; 43 | } 44 | } 45 | 46 | @media (prefers-color-scheme: dark) { 47 | .container { 48 | background-color: rgba(0, 0, 0, 0.9); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /webgl/lessons/resources/javascript-console.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/javascript-console.gif -------------------------------------------------------------------------------- /webgl/lessons/resources/lathe-normal-seam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/lathe-normal-seam.png -------------------------------------------------------------------------------- /webgl/lessons/resources/linear-vs-hermite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/linear-vs-hermite.png -------------------------------------------------------------------------------- /webgl/lessons/resources/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/logo.png -------------------------------------------------------------------------------- /webgl/lessons/resources/mip-low-res-enlarged.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/mip-low-res-enlarged.png -------------------------------------------------------------------------------- /webgl/lessons/resources/mipmap-low-res-enlarged.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/mipmap-low-res-enlarged.png -------------------------------------------------------------------------------- /webgl/lessons/resources/mobile-4-4-4-4-texture-dither.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/mobile-4-4-4-4-texture-dither.png -------------------------------------------------------------------------------- /webgl/lessons/resources/mobile-4-4-4-4-texture-no-dither.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/mobile-4-4-4-4-texture-no-dither.png -------------------------------------------------------------------------------- /webgl/lessons/resources/multi-view-fixed.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/multi-view-fixed.gif -------------------------------------------------------------------------------- /webgl/lessons/resources/multi-view-skew.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/multi-view-skew.gif -------------------------------------------------------------------------------- /webgl/lessons/resources/my-awesme-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/my-awesme-text.png -------------------------------------------------------------------------------- /webgl/lessons/resources/noodles-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/noodles-01.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/noodles-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/noodles-02.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/noodles-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/noodles-03.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/noodles-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/noodles-04.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/noodles-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/noodles-05.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/noodles-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/noodles-06.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/orthographic-vs-perspective.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/orthographic-vs-perspective.png -------------------------------------------------------------------------------- /webgl/lessons/resources/point-outside-canvas.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | canvas 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 32x32 point 21 | 22 | 23 | 24 | 25 | 26 | center outside canvas 27 | 28 | 29 | -------------------------------------------------------------------------------- /webgl/lessons/resources/polygon-drawing-order.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/polygon-drawing-order.gif -------------------------------------------------------------------------------- /webgl/lessons/resources/ramp-vs-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/ramp-vs-light.png -------------------------------------------------------------------------------- /webgl/lessons/resources/reflect-180-02.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | dot 22 | 23 | 24 | = -1 25 | 26 | 27 | -------------------------------------------------------------------------------- /webgl/lessons/resources/reflect-180-03.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | - 22 | 23 | 24 | 2(-1) 25 | 26 | 27 | -------------------------------------------------------------------------------- /webgl/lessons/resources/reflect-180-04.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | +2 22 | 23 | 24 | -------------------------------------------------------------------------------- /webgl/lessons/resources/reflect-45-02.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | dot 22 | 23 | 24 | = -0.707 25 | 26 | 27 | -------------------------------------------------------------------------------- /webgl/lessons/resources/reflect-45-03.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | - 22 | 23 | 24 | 2(-0.707) 25 | 26 | 27 | -------------------------------------------------------------------------------- /webgl/lessons/resources/reflect-45-04.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | +2 22 | 23 | 24 | -------------------------------------------------------------------------------- /webgl/lessons/resources/reflect-part-01.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /webgl/lessons/resources/ridge-racer-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/ridge-racer-01.png -------------------------------------------------------------------------------- /webgl/lessons/resources/ridge-racer-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/ridge-racer-02.png -------------------------------------------------------------------------------- /webgl/lessons/resources/rotation-arrow-counterclockwise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/rotation-arrow-counterclockwise.png -------------------------------------------------------------------------------- /webgl/lessons/resources/rotation-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/rotation-arrow.png -------------------------------------------------------------------------------- /webgl/lessons/resources/rss-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | RSS feed icon 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /webgl/lessons/resources/screencapture-398x298.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/screencapture-398x298.png -------------------------------------------------------------------------------- /webgl/lessons/resources/servez-response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/servez-response.png -------------------------------------------------------------------------------- /webgl/lessons/resources/servez.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/servez.gif -------------------------------------------------------------------------------- /webgl/lessons/resources/shadertoy-dolphin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/shadertoy-dolphin.png -------------------------------------------------------------------------------- /webgl/lessons/resources/skinning-debug-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/skinning-debug-01.png -------------------------------------------------------------------------------- /webgl/lessons/resources/skinning-debug-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/skinning-debug-02.png -------------------------------------------------------------------------------- /webgl/lessons/resources/skinning-debug-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/skinning-debug-03.png -------------------------------------------------------------------------------- /webgl/lessons/resources/skinning-debug-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/skinning-debug-04.png -------------------------------------------------------------------------------- /webgl/lessons/resources/specular-highlights.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/specular-highlights.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/spreadsheet-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/spreadsheet-column.png -------------------------------------------------------------------------------- /webgl/lessons/resources/spreadsheet-row.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/spreadsheet-row.png -------------------------------------------------------------------------------- /webgl/lessons/resources/tangent-to-curve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/tangent-to-curve.png -------------------------------------------------------------------------------- /webgl/lessons/resources/texel-coords.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 0.0 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 1.0 30 | 31 | 32 | -------------------------------------------------------------------------------- /webgl/lessons/resources/text-gray-outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/text-gray-outline.png -------------------------------------------------------------------------------- /webgl/lessons/resources/text-zbuffer-issue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/text-zbuffer-issue.png -------------------------------------------------------------------------------- /webgl/lessons/resources/vertex-shader-anim.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/vertex-shader-anim.gif -------------------------------------------------------------------------------- /webgl/lessons/resources/view-source.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/view-source.gif -------------------------------------------------------------------------------- /webgl/lessons/resources/webgl-2d-matrices.css: -------------------------------------------------------------------------------- 1 | .glocal-center { 2 | text-align: center; 3 | } 4 | 5 | .glocal-center-content { 6 | margin-left: auto; 7 | margin-right: auto; 8 | } 9 | 10 | .glocal-mat td, .glocal-b { 11 | border: 1px solid black; 12 | text-align: left; 13 | } 14 | 15 | .glocal-mat td { 16 | text-align: center; 17 | } 18 | 19 | .glocal-border { 20 | border: 1px solid black; 21 | } 22 | 23 | .glocal-sp { 24 | text-align: right !important; 25 | width: 8em; 26 | } 27 | 28 | .glocal-blk { 29 | color: black; 30 | background-color: black; 31 | } 32 | 33 | .glocal-left { 34 | text-align: left; 35 | } 36 | 37 | .glocal-right { 38 | text-align: right; 39 | } 40 | 41 | @media (max-width: 720px) { 42 | .wide { 43 | font-size: small; 44 | } 45 | .glocal-center-content { 46 | font-size: x-small; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /webgl/lessons/resources/webgl-lessons.css: -------------------------------------------------------------------------------- 1 | /* Licensed under a BSD license. See ../license.html for license */ 2 | 3 | html, body { 4 | background-color: #aaa; 5 | font-family: Sans-Serif; 6 | } 7 | 8 | canvas { 9 | background-color: #fff; 10 | border: 1px solid black; 11 | } 12 | 13 | #uiContainer { 14 | position: absolute; 15 | top: 10px; 16 | right: 10px; 17 | z-index: 3; 18 | } 19 | 20 | .gman-slider-label { 21 | float: left; 22 | gbackground-color: green; 23 | } 24 | .gman-slider-value { 25 | float: right; 26 | gbackground-color: blue; 27 | } 28 | .gman-slider-upper { 29 | gbackground-color: yellow; 30 | height: 1.5em; 31 | } 32 | .gman-slider-outer { 33 | gbackground-color: purple; 34 | height: 2.5em; 35 | } 36 | .gman-slider-slider { 37 | font-size: x-small; 38 | gbackground-color: red; 39 | } 40 | 41 | /* styles to apply if in an iframe */ 42 | 43 | body.iframe { 44 | width: 100%; 45 | height: 100%; 46 | margin: 0px; 47 | padding: 0px; 48 | overflow: hidden; 49 | } 50 | 51 | .iframe>.description { 52 | display: none; 53 | } 54 | 55 | .iframe>canvas { 56 | width: 100%; 57 | height: 100%; 58 | } 59 | 60 | .iframe canvas { 61 | border: none; 62 | } 63 | 64 | .iframe>#example { 65 | width: 100%; 66 | height: 100%; 67 | } 68 | 69 | 70 | -------------------------------------------------------------------------------- /webgl/lessons/resources/webgl-perspective-negative-156.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/webgl-perspective-negative-156.png -------------------------------------------------------------------------------- /webgl/lessons/resources/webgl-resizing-the-canvas.module.js: -------------------------------------------------------------------------------- 1 | function e(tag, attrs = {}, children = []) { 2 | const elem = document.createElement(tag); 3 | for (const [key, value] of Object.entries(attrs)) { 4 | if (typeof value === 'object') { 5 | for (const [k, v] of Object.entries(value)) { 6 | elem[key][k] = v; 7 | } 8 | } else if (elem[key] === undefined) { 9 | elem.setAttribute(key, value); 10 | } else { 11 | elem[key] = value; 12 | } 13 | } 14 | for (const child of children) { 15 | elem.appendChild(child); 16 | } 17 | return elem; 18 | } 19 | 20 | const diagrams = { 21 | 'dpr': (elem) => { 22 | const update = () => { 23 | elem.textContent = window.devicePixelRatio; 24 | }; 25 | update(); 26 | window.addEventListener('resize', update); 27 | }, 28 | 'getBoundingClientRect': (elem) => { 29 | const canvas = e('canvas', { 30 | style: { 31 | width: '100%', 32 | height: '200px', 33 | background: '#404', 34 | display: 'block', 35 | }, 36 | }); 37 | const infoElem = e('pre', { 38 | style: { 39 | position: 'absolute', 40 | left: '0', 41 | top: '0', 42 | background: 'none', 43 | }, 44 | }); 45 | elem.appendChild(e('div', { 46 | style: { 47 | position: 'relative', 48 | }, 49 | }, [canvas, infoElem])); 50 | const update = () => { 51 | infoElem.textContent = `clientWidth: ${canvas.clientWidth} 52 | getBoundClientRect().width = ${canvas.getBoundingClientRect().width}`; 53 | }; 54 | update(); 55 | window.addEventListener('resize', update); 56 | }, 57 | }; 58 | 59 | document.querySelectorAll('[data-diagram]').forEach(elem => { 60 | const name = elem.dataset.diagram; 61 | const fn = diagrams[name]; 62 | if (!fn) { 63 | throw new Error(`missing function for ${name}`); 64 | } 65 | fn(elem); 66 | }); 67 | 68 | -------------------------------------------------------------------------------- /webgl/lessons/resources/webgl-state-diagram/code-highlight.js: -------------------------------------------------------------------------------- 1 | /* global Prism */ 2 | 3 | import { addElem } from './utils.js'; 4 | 5 | export function highlightDocument() { 6 | // hljs.initHighlightingOnLoad(); 7 | Prism.highlightAll(); 8 | } 9 | 10 | export function highlightBlock(elem) { 11 | //hljs.highlightBlock(elem); 12 | const html = Prism.highlight(elem.textContent, Prism.languages.javascript, 'javascript'); 13 | elem.innerHTML = ''; 14 | addElem('pre', elem, {className: 'language-js', innerHTML: html}); 15 | //elem.innerHTML = html; 16 | } -------------------------------------------------------------------------------- /webgl/lessons/resources/webgl-state-diagram/context-wrapper.js: -------------------------------------------------------------------------------- 1 | // TODO: move all the wrapper stuff in here? 2 | // There is direct integration with the UI at the moment. 3 | // Need to decide if/how to separate 4 | 5 | 6 | const webglObjects = new Map(); 7 | 8 | let defaultVAOInfo; 9 | export function setDefaultVAOInfo(vaoInfo) { 10 | defaultVAOInfo = vaoInfo; 11 | } 12 | 13 | let defaultTFOInfo; 14 | export function setDefaultTFOInfo(vaoInfo) { 15 | defaultTFOInfo = vaoInfo; 16 | } 17 | 18 | let canvasInfo; 19 | export function setCanvasInfo(_canvasInfo) { 20 | canvasInfo = _canvasInfo; 21 | } 22 | 23 | export const getWebGLObjectInfoOrCanvas = v => v ? webglObjects.get(v) : canvasInfo; 24 | export const getWebGLObjectInfoOrDefaultVAO = v => v ? webglObjects.get(v) : defaultVAOInfo; 25 | export const getWebGLObjectInfoOrDefaultTFO = v => v ? webglObjects.get(v) : defaultTFOInfo; 26 | 27 | export const formatWebGLObject = v => v ? webglObjects.get(v).name : 'null'; 28 | export const formatWebGLObjectOrCanvas = v => v ? webglObjects.get(v).name : 'null (canvas)'; 29 | export const formatWebGLObjectOrDefaultVAO = v => v ? webglObjects.get(v).name : 'null (default VAO)'; 30 | export const formatWebGLObjectOrDefaultTFO = v => v ? webglObjects.get(v).name : 'null (default TFO)'; 31 | export function getWebGLObjectInfo(webglObject) { 32 | return webglObjects.get(webglObject); 33 | } 34 | export function addWebGLObjectInfo(webglObject, info) { 35 | webglObjects.set(webglObject, info); 36 | } 37 | 38 | -------------------------------------------------------------------------------- /webgl/lessons/resources/webgl-state-diagram/eval-helper.js: -------------------------------------------------------------------------------- 1 | 2 | var gl; // eslint-disable-line no-unused-vars 3 | 4 | function evalHelper(code) { // eslint-disable-line no-unused-vars 5 | eval(code); // eslint-disable-line no-eval 6 | } 7 | -------------------------------------------------------------------------------- /webgl/lessons/resources/webgl-state-diagram/globals.js: -------------------------------------------------------------------------------- 1 | 2 | export const globals = {}; 3 | -------------------------------------------------------------------------------- /webgl/lessons/resources/webglfundamentals-icon-256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/webglfundamentals-icon-256.png -------------------------------------------------------------------------------- /webgl/lessons/resources/webglfundamentals-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/webglfundamentals-icon.png -------------------------------------------------------------------------------- /webgl/lessons/resources/webglfundamentals-webgl-state-diagram.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/webglfundamentals-webgl-state-diagram.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/webglfundamentals.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/webglfundamentals.jpg -------------------------------------------------------------------------------- /webgl/lessons/resources/z-clipping.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/lessons/resources/z-clipping.gif -------------------------------------------------------------------------------- /webgl/lessons/ru/index.md: -------------------------------------------------------------------------------- 1 | Title: Основы WebGL 2 | 3 | Изучение WebGL с нуля. Не прибегая к магии. 4 | 5 | Здесь представлены статьи, которые помогут освоить WebGL, начиная с базовых понятий. 6 | Это НЕ изложение устаревшего материала OpenGL другими словами, что часто можно встретить в сети. 7 | Здесь собраны абсолютно новые статьи, без устаревших идей, и они помогут вам 8 | полностью разобраться, чем на самом деле является WebGL и как он работает. 9 | 10 | Если вам интересен WebGL2, посмотрите на [webgl2fundamentals.org](https://webgl2fundamentals.org) 11 | 12 | {{{include "webgl/lessons/ru/toc.html"}}} 13 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /webgl/lessons/ru/langinfo.hanson: -------------------------------------------------------------------------------- 1 | { 2 | language: 'Русский', 3 | langCode: 'ru', 4 | defaultExampleCaption: "нажмите здесь, чтобы открыть в отдельном окне", 5 | title: 'Основы WebGL', 6 | description: 'Изучение WebGL с нуля. Не прибегая к магии.', 7 | link: 'https://webglfundamentals.org/', 8 | commentSectionHeader: '
    Нашли ошибку? Создайте задачу на github.
    ', 9 | missing: "К сожалению, страница ещё не переведена. [Я всегда рад переводчикам](https://github.com/gfxfundamentals/webgl-fundamentals)! 😄\n\n[А пока можете почитать статью на английском языке]({{{origLink}}}).", 10 | toc: 'оглавление', 11 | categoryMapping: { 12 | 'fundamentals': "Основы", 13 | 'image-processing': "Обработка изображений", 14 | 'matrices': "Математика переноса, поворота и масштабирования в 2D", 15 | '3d': "3D", 16 | 'lighting': "Освещение", 17 | 'organization': "Структура и устройство", 18 | 'geometry': "Геометрия", 19 | 'textures': "Текстуры", 20 | 'rendertargets': "Рендеринг в текстуру", 21 | 'techniques': "Приёмы", 22 | '2d': "2D", 23 | 'text': "Текст", 24 | 'misc': "Разное", 25 | }, 26 | } -------------------------------------------------------------------------------- /webgl/lessons/ru/toc.html: -------------------------------------------------------------------------------- 1 | {{{tocHtml}}} 2 | -------------------------------------------------------------------------------- /webgl/lessons/screenshots/placeholder.txt: -------------------------------------------------------------------------------- 1 | here to make sure this directory is created (lame) 2 | -------------------------------------------------------------------------------- /webgl/lessons/toc.html: -------------------------------------------------------------------------------- 1 | {{{tocHtml}}} 2 | -------------------------------------------------------------------------------- /webgl/lessons/uk/index.md: -------------------------------------------------------------------------------- 1 | Title: Основи WebGL 2 | 3 | Вивчаємо WebGL з нуля. Жодної магії. 4 | 5 | 6 | Перед вами набір статей, що навчають WebGL починаючи з базових принципів. Це НЕ застарілі перероблені статті про OpenGL, як багато інших у мережі. Це абсолютно нові матеріали, які відкидають застарілі ідеї та допомагають вам 7 | повноцінно зрозуміти чим насправді є WebGL і як він насправді працює. 8 | 9 | Якщо вам цікаво дізнатись про WebGL2 зверніть увагу на цей ресурс [webgl2fundamentals.org](https://webgl2fundamentals.org) 10 | 11 | {{{include "webgl/lessons/toc.html"}}} 12 | 13 | 14 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /webgl/lessons/uk/langinfo.hanson: -------------------------------------------------------------------------------- 1 | { 2 | language: 'Українська', 3 | langCode: 'uk', // if not specified will use folder 4 | defaultExampleCaption: "натисніть сюди, щоб відкрити в окремому вікні", 5 | title: 'Основи WebGL', 6 | description: 'Вивчаємо WebGL з нуля. Жодної магії.', 7 | link: 'https://webglfundamentals.org/', 8 | commentSectionHeader: ` 9 |
    Запитання? Запитати на stackoverflow.
    10 |
    Помітили проблему чи баг? Створити опис проблеми на github.
    11 |
    12 | Use <pre><code>code goes here</code></pre> for code blocks 13 |
    14 | `, 15 | missing: ` 16 | Вибачте, ця стаття ще не була перекладена. 17 | 18 | [Допомога в перекладі вітається](https://github.com/gfxfundamentals/webgl-fundamentals)! 😄 19 | 20 | [Тут ви знайдете оригінальну англійську версію статті на цю тему]({{{origLink}}}). 21 | `, 22 | contribTemplate: 'Thank you ${login}
    for ${contributions} contributions', 23 | toc: 'Зміст', 24 | categoryMapping: { 25 | 'fundamentals': "Основи", 26 | 'image-processing': "Обробка зображень", 27 | 'matrices': "Переміщення, обертання та масштабування в 2D просторі", 28 | '3d': "3D", 29 | 'lighting': "Освітлення", 30 | 'organization': "Структура та організація", 31 | 'geometry': "Геометрія", 32 | 'textures': "Текстури", 33 | 'shadows': "Тіні", 34 | 'rendertargets': "Рендеринг в текстуру", 35 | 'techniques': "Прийоми", 36 | '2d': "2D", 37 | 'text': "Текст", 38 | 'tips': "Поради", 39 | 'misc': "Різне", 40 | 'gpgpu': "GPGPU", 41 | 'reference': "Довідка", 42 | 'optimization': "Оптимізація", 43 | }, 44 | } -------------------------------------------------------------------------------- /webgl/lessons/uk/toc.html: -------------------------------------------------------------------------------- 1 | {{{tocHtml}}} 2 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-3d-lighting-normal-mapping.md: -------------------------------------------------------------------------------- 1 | Title: WebGL 3D - Normal Mapping 2 | Description: How to implement normal maps 3 | TOC: Normal Mapping 4 | 5 | TBD 6 | 7 | 11 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-post-processing.md: -------------------------------------------------------------------------------- 1 | Title: WebGL Post Processing 2 | Description: Post Processing 3 | TOC: Post Processing 4 | 5 | TBD -------------------------------------------------------------------------------- /webgl/lessons/webgl-qna-a-simple-way-to-show-the-load-on-the-gpu-s-vertex-and-fragment-processing-.md: -------------------------------------------------------------------------------- 1 | Title: A simple way to show the load on the GPU's vertex and fragment processing? 2 | Description: A simple way to show the load on the GPU's vertex and fragment processing? 3 | TOC: A simple way to show the load on the GPU's vertex and fragment processing? 4 | 5 | ## Question: 6 | 7 | I would like to be able to tell if I am CPU bound vs GPU vertex bound or GPU fragment bound. I was hoping I could find a profiler that provides this information but I can't seem to find anything. Does anyone know of a profiler that can do this? 8 | 9 | ## Answer: 10 | 11 | Even without a profiler you can tell some of this very easily. Shrink your canvas (or FBO you're rendering into) to 1x1 pixels. If your app speeds up tremendously you were probably GPU fragment bound. If it barely speeds up you were probably CPU or GPU Vertex bound. 12 | 13 | As for CPU, vs GPU Vertex Bound change the count in your calls to drawArrays and drawElements to 0. If it still runs slow you were CPU bound. If it runs fast you were GPU Vertex bound. 14 | 15 | Otherwise, On Chrome I think if you pass in '--in-process-gpu' I believe you can run PIX on Windows and or the OpenGL Profiler on OSX and profile the entire browser though I haven't done it in a while. 16 | 17 | 18 | 19 |
    20 |
    The question and quoted portions thereof are 21 | CC BY-SA 3.0 by 22 | Xavier 23 | from 24 | here 25 |
    26 |
    27 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-qna-fps-like-camera-movement-with-basic-matrix-transformations.md: -------------------------------------------------------------------------------- 1 | Title: FPS-like camera movement with basic matrix transformations 2 | Description: FPS-like camera movement with basic matrix transformations 3 | TOC: FPS-like camera movement with basic matrix transformations 4 | 5 | ## Question: 6 | 7 | I have a simple scene in WebGL where i store every transformation (for the camera and the models) in a single model/view matrix and i set them by rotating and moving said matrix. 8 | 9 | What i want is, to being able to rotate the camera around and when i "move forward" to move towards where the camera is pointing. 10 | 11 | So far, i have modified [this][1] code to this: 12 | 13 | mat4.identity(mvMatrix); 14 | mat4.rotateX(mvMatrix, degToRad(elev), mvMatrix); 15 | mat4.rotateY(mvMatrix, degToRad(ang), mvMatrix); 16 | mat4.rotateZ(mvMatrix, degToRad(-roll), mvMatrix); 17 | mat4.translate(mvMatrix, [-px, -py, -pz], mvMatrix); 18 | since it wasn't working as it was and it kind of works, until you do an extreme rotation (more than 90 degrees). 19 | 20 | This is not a deal breaker for what i'm doing, but i want to know. Is this the best i can get without moving away from calculating the camera orientation like this? 21 | 22 | [1]: https://stackoverflow.com/questions/18463868/webgl-translation-after-rotation-of-the-camera-as-an-fps 23 | 24 | ## Answer: 25 | 26 | WebGL cameras generally point down the -Z axis so to move in the direction the camera is facing you just add the camera's Z axis (elements 8, 9, 10) to the position of the camera multiplied by some velocity. 27 | 28 | {{{example url="../webgl-qna-fps-like-camera-movement-with-basic-matrix-transformations-example-1.html"}}} 29 | 30 | 31 | 32 |
    33 |
    The question and quoted portions thereof are 34 | CC BY-SA 3.0 by 35 | George Daskalakis 36 | from 37 | here 38 |
    39 |
    40 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-qna-how-can-i-get-all-the-uniforms-and-uniformblocks.md: -------------------------------------------------------------------------------- 1 | Title: How can I get all the uniforms and uniformBlocks 2 | Description: How can I get all the uniforms and uniformBlocks 3 | TOC: How can I get all the uniforms and uniformBlocks 4 | 5 | ## Question: 6 | 7 | when I write uniformBuffer in shader like this. 8 | 9 | uniform Material { 10 | uniform vec4 u_DiffuseColor; 11 | uniform vec4 u_TilingOffset; 12 | uniform vec3 u_MaterialSpecular; 13 | uniform float u_AlphaTestValue; 14 | uniform float u_Shininess; 15 | }; 16 | 17 | gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS) and gl.getActiveUniform(program, i) still contaion uniformBuffer item( for example u_DiffuseColor,it's redundant!), the only one thing I found is gl.getUniformLocation(program, uniName) will return null. 18 | 19 | is there another better way i can get uniforms not include uniformBuffer item,because the i should dispose them with two different way. 20 | 21 | https://stackoverflow.com/questions/4783912/how-can-i-find-a-list-of-all-the-uniforms-in-opengl-es-2-0-vertex-shader-pro/4970703 22 | Maybe this is not best way when have uniformBuffer block in shader with opengles3.0 23 | 24 | 25 | ## Answer: 26 | 27 | You can get all uniforms and which blocks they are in by calling `gl.getActiveUniform` and `gl.getActiveUniforms`. `gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS)` returns the number of uniforms. You then create an array of indices to pass to `gl.getActiveUniforms` and pass it `gl.UNIFORM_BLOCK_INDEX`. -1 = not in a block. 28 | 29 | 30 | {{{example url="../webgl-qna-how-can-i-get-all-the-uniforms-and-uniformblocks-example-1.html"}}} 31 | 32 | Other questions related to using uniform blocks 33 | 34 | https://stackoverflow.com/questions/56760912/what-is-the-correct-sequence-for-uploading-a-uniform-block 35 | 36 | https://stackoverflow.com/questions/38841124/updating-uniform-buffer-data-in-webgl-2 37 | 38 | https://stackoverflow.com/questions/44629165/bind-multiple-uniform-buffer-objects/ 39 | 40 |
    41 |
    The question and quoted portions thereof are 42 | CC BY-SA 4.0 by 43 | gl3336563163com 44 | from 45 | here 46 |
    47 |
    48 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-qna-how-to-achieve-moving-line-with-trail-effects.md: -------------------------------------------------------------------------------- 1 | Title: How to Achieve Moving Line with Trail Effects 2 | Description: How to Achieve Moving Line with Trail Effects 3 | TOC: How to Achieve Moving Line with Trail Effects 4 | 5 | ## Question: 6 | 7 | What's the idea of drawing such lines in the following demo? Drawing a single line with trailing effects might be simple. But those lines are also turning their directions. 8 | 9 | http://uber.github.io/deck.gl/#/examples/custom-layers/trip-routes 10 | 11 | ## Answer: 12 | 13 | you can pass in UV coordinates for lines or generate one then use that to color the line. Pass in time to scroll something like 14 | 15 | {{{example url="../webgl-qna-how-to-achieve-moving-line-with-trail-effects-example-1.html"}}} 16 | 17 | Of course you can also use a texture instead of code for the colors 18 | 19 | 20 | {{{example url="../webgl-qna-how-to-achieve-moving-line-with-trail-effects-example-2.html"}}} 21 | 22 | 23 | 24 |
    25 |
    The question and quoted portions thereof are 26 | CC BY-SA 3.0 by 27 | K.Miao 28 | from 29 | here 30 |
    31 |
    32 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-qna-how-to-control-the-color-between-vertices.md: -------------------------------------------------------------------------------- 1 | Title: How to control the color between vertices 2 | Description: How to control the color between vertices 3 | TOC: How to control the color between vertices 4 | 5 | ## Question: 6 | 7 | Is there a way to control color between vertices with shader? 8 | Like in a classic tutorials with just a triangle being drawn on the screen - vertices have red, green and blue colors assigned accordingly. Values in between are interpolated. 9 | Is there a way to control color of that middle ground, other than modifying geometry and adding more vertices inside? 10 | 11 | ## Answer: 12 | 13 | The most common way to color a triangle is to [use a texture](https://webglfundamentals.org/webgl/lessons/webgl-3d-textures.html). The second most common way would be to add vertices. As @derhass pointed out you could in theory create a fragment shader that some how colors the middle different. To do that though would require giving the fragment shader more data because a fragment shader has no idea which pixel of a triangle is being drawn. So you'll end up adding more data to your geometry to accomplish that even if you don't technically add more vertices. 14 | 15 | Further, any solution you come up with will likely be fairly inflexible where as using a texture (the most common way to color something) gives you a ton of flexibiltity. For example you might make a fragment shader that lets you pick 1 new color in the middle of the triangle. 16 | 17 | {{{example url="../webgl-qna-how-to-control-the-color-between-vertices-example-1.html"}}} 18 | 19 | Later you decide want 2 colors, one 1/3rd of the way from the first point down the line from the first point to the mid point of the other 2 points and another 2/3rd down that line. You'll need to write a completely new shader. If you'd used a texture you'd just change the texture. 20 | 21 | 22 | 23 |
    24 |
    The question and quoted portions thereof are 25 | CC BY-SA 4.0 by 26 | unknown 27 | from 28 | here 29 |
    30 |
    31 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-qna-how-to-detect-clipped-triangles-in-the-framgment-shader.md: -------------------------------------------------------------------------------- 1 | Title: How to detect clipped triangles in the framgment shader 2 | Description: How to detect clipped triangles in the framgment shader 3 | TOC: How to detect clipped triangles in the framgment shader 4 | 5 | ## Question: 6 | 7 | I am new to WEBGL, I read a lot of posts about fragment shaders. However, I cannot figure out how to access the primitive vertices (or a flag for each vertex) in the fragment shader. 8 | 9 | My goal is to discard the fragment if at least one of its primitive vertices are clipped. 10 | 11 | Thanks for the help 12 | 13 | ## Answer: 14 | 15 | You can't directly access vertices in a fragment shader. The only data a fragment shader gets by default is the screen coordinate (canvas/framebuffer coord) and depth buffer value for the current pixel being rasterized. All other data you have to pass in. 16 | 17 | Of the top of my head, in the vertex shader you could compute if a vertex is clipped and pass that info on to the fragment shaders as a varying. You'd pass 0 if not clipped and 1 if clipped. varyings get interpolated so if in the fragment shader the varying is > 0 then one of the vertices was clipped. 18 | 19 | {{{example url="../webgl-qna-how-to-detect-clipped-triangles-in-the-framgment-shader-example-1.html"}}} 20 | 21 | There are probably more efficient ways like pass all vertices of a triangle to the vertex shader and if any one of them is clipped set all vertices to be clipped so that triangle is not even rasterized. 22 | 23 | 24 | {{{example url="../webgl-qna-how-to-detect-clipped-triangles-in-the-framgment-shader-example-2.html"}}} 25 | 26 | This would arguably be more efficient since instead of rejecting 1000s of pixels one at a time we're rejecting the entire triangle and skipping even checking per pixel. It takes more data though since we need to be able to pass in all 3 vertices for every triangle to the vertex shader at the same time. 27 | 28 | note: if you're new to WebGL you might find [these articles](https://webglfundamentals.org) useful. 29 | 30 |
    31 |
    The question and quoted portions thereof are 32 | CC BY-SA 4.0 by 33 | ABotella 34 | from 35 | here 36 |
    37 |
    38 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-qna-how-to-get-audio-data-into-a-shader.md: -------------------------------------------------------------------------------- 1 | Title: How to get audio data into a shader 2 | Description: How to get audio data into a shader 3 | TOC: How to get audio data into a shader 4 | 5 | ## Question: 6 | 7 | How can i add Audio Visualization support to this class, i would like to add an Audio() object as an input to a GLSL Fragment Shader. An Example of this is https://www.shadertoy.com/view/Mlj3WV. I know this sort of thing can be done in Canvas 2d with waveform Analysis, but this opengl method is far more smooth. 8 | 9 | 10 | ``` 11 | /* Code from https://raw.githubusercontent.com/webciter/GLSLFragmentShader/1.0.0/GLSLFragmentShader.js */ 12 | 13 | /* render function */ 14 | 15 | /* set the uniform variables for the shader */ 16 | gl.uniform1f( currentProgram.uniformsCache[ 'time' ], parameters.time / 1000 ); 17 | gl.uniform2f( currentProgram.uniformsCache[ 'mouse' ], parameters.mouseX, parameters.mouseY ); 18 | 19 | /* i would like something like this */ 20 | gl.uniform2f( currentProgram.uniformsCache[ 'fft' ], waveformData ); 21 | 22 | 23 | ``` 24 | 25 | The shader at ShaderToy Example accepts a float as fft, but this just updates the entire row of bars and not individual bar values. I would like real time manipulation of all bars. 26 | 27 | Iv searched MDN but don't understand how to incorporate this, iv also looked at the source code of shadertoy.com but can't figure out how they have achieved this. 28 | 29 | ## Answer: 30 | 31 | Shadertoy does not provide FFT as a float. It provides FFT data as a texture 32 | 33 | 34 | {{{example url="../webgl-qna-how-to-get-audio-data-into-a-shader-example-1.html"}}} 35 | 36 | 37 | 38 |
    39 |
    The question and quoted portions thereof are 40 | CC BY-SA 4.0 by 41 | David Clews 42 | from 43 | here 44 |
    45 |
    46 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-qna-how-to-make-a-smudge-brush-tool.md: -------------------------------------------------------------------------------- 1 | Title: How to make a smudge brush tool 2 | Description: How to make a smudge brush tool 3 | TOC: How to make a smudge brush tool 4 | 5 | ## Question: 6 | 7 | I need idea how i can make brush who can color smudge. 8 | 9 | Example in picture: right side painting with basic brush with two different colors in left also painting but additional use smudge tool, **the result should be something like left side** 10 | 11 | ![enter image description here][1] 12 | 13 | I need advice how i can try to do it 14 | 15 | [1]: http://i.stack.imgur.com/oyaBs.png 16 | 17 | ## Answer: 18 | 19 | Here is one attempt 20 | 21 | 1. On mousedown grab a copy of the area under the mouse into a separate canvas 22 | 23 | 2. On mousemove draw that copy one pixel at a time from the previous mouse position to the current mouse position at 50% alpha, grabbing a new copy after each move. 24 | 25 | In pseudo code 26 | 27 | ``` 28 | on mouse down 29 | grab copy of canvas at mouse position 30 | prevMousePos = currentMousePos 31 | 32 | on mouse move 33 | for (pos = prevMousePos to currentMousePos step 1 pixel) 34 | draw copy at pos with 50% alpha 35 | grab new copy of canvas at pos 36 | prevMousePos = currentMousePos 37 | ``` 38 | 39 | The brush is feathered by drawing a rgba(0,0,0,0) to rgba(0,0,0,1) radial gradient over it using `globalCompositeOperation = 'destination-out'`. 40 | 41 | 42 | {{{example url="../webgl-qna-how-to-make-a-smudge-brush-tool-example-1.html"}}} 43 | 44 | 45 | 46 | 47 |
    48 |
    The question and quoted portions thereof are 49 | CC BY-SA 3.0 by 50 | Your choice 51 | from 52 | here 53 |
    54 |
    55 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-qna-i-get-invalid-type-error-when-calling-readpixels.md: -------------------------------------------------------------------------------- 1 | Title: I get invalid type error when calling readPixels 2 | Description: I get invalid type error when calling readPixels 3 | TOC: I get invalid type error when calling readPixels 4 | 5 | ## Question: 6 | 7 | context.readPixels(0, 0, context.drawingBufferWidth, context.drawingBufferHeight, context.RGBA, context.FLOAT, pixels); 8 | 9 | This is the code. I get this error in the console: 10 | **WebGL: INVALID_ENUM: readPixels: invalid type** 11 | 12 | But this works perfectly fine: 13 | 14 | context.readPixels(0, 0, context.drawingBufferWidth, context.drawingBufferHeight, context.RGBA, context.UNSIGNED_BYTE, pixels); 15 | 16 | Float or int is supposed to be supported, but only unsigned_byte works. 17 | There's no resource online on how to correctly apply a type that seems to work. 18 | Everything follows a different pattern. 19 | 20 | ## Answer: 21 | 22 | FLOAT is not guaranteed to be supported. The only format/type combination that is guaranteed to be supported is RGBA/UNSIGNED_BYTE. [See Spec, section 4.3.1](https://www.khronos.org/registry/OpenGL/specs/es/2.0/es_full_spec_2.0.pdf) 23 | 24 | After that one other **implementation dependent** format/type combo might be supported depending on the type of thing you're reading. You can query that with 25 | 26 | ``` 27 | const altFormat = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT); 28 | const altType = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE); 29 | ``` 30 | 31 | {{{example url="../webgl-qna-i-get-invalid-type-error-when-calling-readpixels-example-1.html"}}} 32 | 33 | The code above makes a RGBA/FLOAT texture and attached it to a framebuffer then checks the alternate format/type combo to read it. On Chrome it gets RGBA/UNSIGNED_BYTE, on Firefox it gets RGBA/FLOAT. Both are valid responses since the alternate combo is **implementation dependent**. 34 | 35 | 36 | 37 |
    38 |
    The question and quoted portions thereof are 39 | CC BY-SA 4.0 by 40 | Tony Arntsen 41 | from 42 | here 43 |
    44 |
    45 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-qna-passing-in-per-sprite-alpha-values-when-batching.md: -------------------------------------------------------------------------------- 1 | Title: Passing in per sprite alpha values when batching 2 | Description: Passing in per sprite alpha values when batching 3 | TOC: Passing in per sprite alpha values when batching 4 | 5 | ## Question: 6 | 7 | I'm creating a 2D rendering engine with WebGL in which I'm using Texture Atlases and batching hundreds of entities at once. I need to set a unique alpha value for each entity, and I'm at a loss of how to do this. 8 | 9 | My current fragment shader is this: 10 | 11 | precision mediump float; 12 | 13 | uniform float u_alpha; 14 | uniform sampler2D u_image; 15 | 16 | varying vec2 v_texCoord; 17 | 18 | void main () { 19 | vec4 texture = texture2D(u_image, v_texCoord); 20 | gl_FragColor = vec4(texture.rgb, texture.a * u_alpha); 21 | } 22 | 23 | I'd like to change that global uniform into a uniform buffer or an array of unique values that will be applied to the v_texCoord, but I don't know how to do this. 24 | 25 | ## Answer: 26 | 27 | You need to pass those values in as an attribute just like `v_texCoord`. 28 | 29 | in vertex shader 30 | 31 | attribute float a_alpha; 32 | varying float v_alpha; 33 | ... 34 | void main() { 35 | ... 36 | v_alpha = a_alpha; // pass the alpha values to the fragment shader. 37 | ... 38 | } 39 | 40 | in fragment shader 41 | 42 | varying float v_alpha; 43 | ... 44 | gl_FragColor = vec4(texture.rgb, texture.a * v_alpha); 45 | 46 | Instead of using a separate attribute you could also just make your texture coordinates have 3 values. u, v, and alpha. In other words, change `v_texCoord` to a `vec3`. Update the attribute in the vertex shader to take a `vec3`. Update your UV data so each UV also has an alpha. Change your fragment shader to. 47 | 48 | varying vec3 v_texCoord; 49 | 50 | void main () { 51 | vec4 texture = texture2D(u_image, v_texCoord.xy); 52 | gl_FragColor = vec4(texture.rgb, texture.a * v_texCoord.z); 53 | } 54 | 55 |
    56 |
    The question and quoted portions thereof are 57 | CC BY-SA 3.0 by 58 | Abraham Walters 59 | from 60 | here 61 |
    62 |
    63 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-readpixels.md: -------------------------------------------------------------------------------- 1 | Title: WebGL readPixels 2 | Description: Details on readPixels 3 | TOC: readPixels 4 | 5 | In WebGL you pass a format/type pair to `readPixels`. For a given 6 | texture internal format (attached to a framebuffer), only 2 combinations 7 | of format/type are valid. 8 | 9 | From the spec: 10 | 11 | > For normalized fixed-point rendering surfaces, the combination format `RGBA` and type 12 | `UNSIGNED_BYTE` is accepted. For signed integer rendering surfaces, the combination 13 | format `RGBA_INTEGER` and type `INT` is accepted. For unsigned integer 14 | rendering surfaces, the combination format `RGBA_INTEGER` and type `UNSIGNED_INT` 15 | is accepted. 16 | 17 | The second combination is implementation defined 18 | which probably means you shouldn't use it in WebGL if you want your code to be portable. 19 | You can ask what the format/type combination is by querying 20 | 21 | ```js 22 | // assuming a framebuffer is bound with the texture to read attached 23 | const format = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT); 24 | const type = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE); 25 | ``` 26 | 27 | Also note what texture formats that are renderable, meaning you can attach them to a framebuffer and render to them, 28 | are also somewhat implementation defined. WebGL1 requires only one combination to be renderable, `RGBA`/`UNSIGNED_BYTE`. 29 | All others are optional (`LUMINANCE` for example) and some 30 | are can be made renderable by extension, `RGBA`/`FLOAT` for example. 31 | 32 | **The table below is live**. You may notice that it gives different results depending on the machine, OS, GPU, or even 33 | browser. I know on my machine Chrome and Firefox give different results for some of the implementation defined values. 34 | 35 |
    36 | 37 | 38 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-shadows-continued.md: -------------------------------------------------------------------------------- 1 | Title: WebGL Shadows Continued 2 | Description: How to compute shadows continued 3 | TOC: Shadows Continued 4 | 5 | TBD 6 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-sprites.md: -------------------------------------------------------------------------------- 1 | Title: WebGL Sprites 2 | Description: How to do sprites in WebGL 3 | TOC: Sprites 4 | 5 | This article for now is just a place holder. 6 | 7 | Sprites have arguably already been covered, they just weren't called "sprites". 8 | 9 | The article on sprites is [the article on how to draw 10 | text with textures](webgl-text-texture.html). Replace the 11 | text images with sprite images and you have sprites. 12 | 13 | A related article on is [the article on reproducing 14 | canvas 2D's `drawImage` function in WebGL](webgl-2d-drawimage.html) and the following 15 | article on [matrix stacks](webgl-2d-matrix-stack.html) 16 | 17 | Together those articles mostly cover sprites in WebGL. 18 | If you have other things you want covered consider 19 | [leaving a request](https://github.com/gfxfundamentals/webgl-fundamentals/issues/new?assignees=&labels=suggested+topic&template=suggest-topic.md&title=%5BSUGGESTION%5D). 20 | -------------------------------------------------------------------------------- /webgl/lessons/webgl-state-diagram.md: -------------------------------------------------------------------------------- 1 | Title: WebGL State Diagram 2 | Description: WebGL State Diagram 3 | TOC: WebGL State Diagram 4 | Link: webgl/lessons/resources/webgl-state-diagram.html 5 | 6 | [WebGL State Diagram](/webgl/lessons/resources/webgl-state-diagram.html) 7 | -------------------------------------------------------------------------------- /webgl/lessons/zh_cn/index.md: -------------------------------------------------------------------------------- 1 | Title: WebGL 理论基础 2 | 3 | 从基础理论开始学习WebGL，稳！ 4 | 5 | 这有一系列教程，从WebGL的基本理论讲起。 6 | 它们不像大多数其他教程那样改编自旧的OpenGL文章。 7 | 它们去旧迎新，丢弃一些过时的思想，让你彻底了解WebGL的工作原理。 8 | 9 | 10 | 如果你对WebGL2感兴趣可以到这里看看 [webgl2fundamentals.org](https://webgl2fundamentals.org) 11 | 12 | {{{include "webgl/lessons/zh_cn/toc.html"}}} 13 | 14 | 15 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /webgl/lessons/zh_cn/langinfo.hanson: -------------------------------------------------------------------------------- 1 | { 2 | language: '简体中文', 3 | langCode: 'zh-cn', 4 | defaultExampleCaption: "点此在新窗口中浏览", 5 | title: 'WebGL 理论基础', 6 | description: '从理论基础开始学习WebGL, 并不复杂哦~', 7 | link: 'https://webglfundamentals.org/webgl/lessons/zh_cn', 8 | commentSectionHeader: ` 9 |
    有疑问? 在stackoverflow上提问.
    10 |
    Issue/Bug? 在GitHub上提issue.
    11 |
    12 | 使用 <pre><code> 代码 </code></pre> 的格式编写代码块 13 |
    14 | `, 15 | missing: ` 16 | 本课程还没有简体中文版翻译哦 (~￣△￣)~\n\n 17 | [欢迎参加翻译](https://github.com/gfxfundamentals/webgl-fundamentals)! 😄 18 | [英文原版地址]({{{origLink}}}) 19 | `, 20 | contribTemplate: '感谢 ${login}
    的 ${contributions} 次贡献', 21 | toc: '目录', 22 | categoryMapping: { 23 | 'fundamentals': "基础概念", 24 | 'image-processing': "图像处理", 25 | 'matrices': "二维平移，旋转，缩放和矩阵运算", 26 | '3d': "三维", 27 | 'lighting': "光照", 28 | 'organization': "组织和重构", 29 | 'geometry': "几何", 30 | 'textures': "纹理", 31 | 'shadows': "阴影", 32 | 'rendertargets': "渲染到纹理", 33 | 'techniques': "技术", 34 | '2d': "二维", 35 | 'text': "文字", 36 | 'tips': "建议", 37 | 'misc': "杂项", 38 | 'gpgpu': "GPGPU", 39 | 'reference': "参考", 40 | 'optimization': "优化", 41 | }, 42 | } -------------------------------------------------------------------------------- /webgl/lessons/zh_cn/toc.html: -------------------------------------------------------------------------------- 1 | {{{tocHtml}}} 2 | -------------------------------------------------------------------------------- /webgl/lessons/zh_cn/webgl-2d-scale.md: -------------------------------------------------------------------------------- 1 | Title: WebGL 二维缩放 2 | Description: 如何在二维中缩放物体 3 | TOC: WebGL 二维缩放 4 | 5 | 6 | 此文上接一系列文章，先[从基础概念开始](webgl-fundamentals.html)，上一篇是 7 | [物体旋转](webgl-2d-rotation.html)。 8 | 9 | 缩放和[平移](webgl-2d-translation.html)一样简单。 10 | 11 | 让我们将位置乘以期望的缩放值，这是[前例](webgl-2d-rotation.html)中的变化部分。 12 | 13 | ``` 14 | 33 | 34 | -------------------------------------------------------------------------------- /webgl/lessons/zh_cn/webgl-references.md: -------------------------------------------------------------------------------- 1 | Title: WebGL 参考 2 | Description: 其它的参考 3 | TOC: WebGL 参考 4 | 5 | 一些可能有用的链接。 6 | 7 | ## 教程 8 | 9 | * [给初学者的 3D 游戏着色器](https://lettier.github.io/3d-game-shaders-for-beginners/) 10 | 有很多很好的关于图形技术的解释。它是基于 OpenGL 的，但图文并茂的解释应该很容易应用到 WebGL 中。 11 | 12 | * [学习 OpenGL](https://learnopengl.com/)：现代 OpenGl 课程 13 | 14 | 这可能有用，也可能没用。尽管 API 相似，但 OpenGL 不是 WebGL。 15 | 一是 OpenGL 是基于 C 语言的库。另一个问题是 OpenGL 比 WebGL 有更多的特性，着色器语言也有区别。 16 | 尽管如此，展示的很多想法和技巧在 WebGL 中同样有用。 17 | 18 | ## 辅助类 / 扩展 19 | 20 | * [Spector](https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk?hl=en)：展示所有 WebGL 调用的扩展。 21 | 22 | * [Shader Editor](https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob?hl=en)：在网页实时预览和编辑着色器的扩展。 23 | 24 | * [WebGL Insight](https://chrome.google.com/webstore/detail/webgl-insight/djdcbmfacaaocoomokenoalbomllhnko?hl=en)：可视化 WebGL 使用情况的扩展。 25 | 26 | * [webgl-helpers](https://greggman.github.io/webgl-helpers/)：有助于 WebGL 的脚本 27 | 28 | ## 库 29 | 30 | * [twgl](https://twgljs.org)：简化 WebGL 的库。 31 | 32 | * [three.js](https://threejs.org)：最流行的 JavaScript 3D 库。 33 | 34 | * [PlayCanvas](https://playcanvas.com/)：带游戏编辑器的 WebGL 游戏引擎。 35 | 36 | * [regl](https://regl.party/)：无状态的函数式 WebGL 库。 37 | 38 | ## 规范 39 | 40 | * [WebGL](https://www.khronos.org/registry/webgl/specs/latest/1.0/): WebGL 规范。 41 | 42 | * [OpenGL ES 2.0](https://www.khronos.org/registry/OpenGL/specs/es/2.0/es_full_spec_2.0.pdf): WebGL 依据的规范。 43 | 44 | * [GLSL ES 1.0](https://www.khronos.org/files/opengles_shading_language.pdf): WebGL 着色器语言规范。 45 | 46 | ## 有趣的 47 | 48 | * [Shadertoy.com](https://shadertoy.com)：在严苛限制条件下产生的神奇的片段着色器。 49 | 50 | 警告：在 shadertoy.com 上使用的着色器通常不是生产环境 WebGL 应用使用的着色器。但很多技巧可以从中学习。 51 | 52 | * [glslsandbox.com](https://glslsandbox.com)：原始的片段着色器 playground。 53 | 54 | * [vertexshaerart.com](https://vertexshaderart.com)：顶点着色器 版 glslsandbox。 55 | 56 | --- 57 | 58 | 如果你知道其它好的参考，请 [open an issue](https://github.com/gfxfundamentals/webgl-fundamentals/issues). 59 | -------------------------------------------------------------------------------- /webgl/lessons/zh_cn/webgl-sprites.md: -------------------------------------------------------------------------------- 1 | Title: WebGL 精灵 2 | Description: 如何在 WebGL 中做精灵 3 | TOC: 精灵 4 | 5 | 这篇文章暂时只是占位。 6 | 7 | 精灵这个话题其实已经被提及了，只是当时不叫“精灵”。 8 | 9 | 关于精灵的文章在 [如何使用纹理绘制文字的文章](webgl-text-texture.html) 里。 10 | 只要将文字图片换成精灵图片，你就得到了精灵 ;) 11 | 12 | 一篇相关的文章是 [再造 WebGL 中 2D 画布的 `drawImage` 函数](webgl-2d-drawimage.html)， 13 | 还有 [矩阵堆栈](webgl-2d-matrix-stack.html)。 14 | 15 | 上面这些文章基本涉及到了 WebGL 中的精灵。 16 | 如果还有什么你想要涉及的，[提交请求](https://github.com/gfxfundamentals/webgl-fundamentals/issues/new?assignees=&labels=suggested+topic&template=suggest-topic.md&title=%5BSUGGESTION%5D)。 17 | -------------------------------------------------------------------------------- /webgl/lessons/zh_cn/webgl-text-canvas2d.md: -------------------------------------------------------------------------------- 1 | Title: WebGL 文字 - 二维Canvas 2 | Description: 如何使用使用二维画布显示与WebGL同步的文字 3 | TOC: WebGL 文字 - 二维Canvas 4 | 5 | 6 | 此文上接[WebGL文字绘制](webgl-text-html.html)，如果没读建议从那里开始。 7 | 8 | 除了使用HTML元素显示文字，还可以使用一个新画布，但是使用的是二维上下文. 9 | 我只是猜测它会比直接使用HTML元素要快一些,没有证明过。当然也会少一些灵活性， 10 | 比如不能使用好用的CSS样式了，但是也不需要创建并保持HTML元素了。 11 | 12 | 和其他例子一样我们先创建一个容器，但是这次放两个画布进去。 13 | 14 |
    15 | 16 | 17 |
    18 | 19 | 接下来设置CSS让画布成为覆盖层 20 | 21 | .container { 22 | position: relative; 23 | } 24 | 25 | #text { 26 | position: absolute; 27 | left: 0px; 28 | top: 0px; 29 | z-index: 10; 30 | } 31 | 32 | 在初始化时找到文字画布并创建一个二维上下文。 33 | 34 | // 找到画布 35 | var textCanvas = document.querySelector("#text"); 36 | 37 | // 创建一个二维上下文 38 | var ctx = textCanvas.getContext("2d"); 39 | 40 | 渲染时，像WebGL一样，需要每帧都清空二维画布。 41 | 42 | function drawScene() { 43 | ... 44 | 45 | // 清空二维画布 46 | ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 47 | 48 | 然后只调用 `fillText` 绘制文字 49 | 50 | ctx.fillText(someMsg, pixelX, pixelY); 51 | 52 | 这是结果 53 | 54 | {{{example url="../webgl-text-html-canvas2d.html" }}} 55 | 56 | 为什么文字变小了？因为那是二维画布的默认文字大小，如果你想使用其它大小可以 57 | [看看二维画布API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text)。 58 | 59 | 使用二维画布的另一个原因是可以很容易的绘制其他东西，例如添加一个箭头 60 | 61 | // 绘制箭头和文字 62 | 63 | // 保存画布设置 64 | ctx.save(); 65 | 66 | // 将画布原点移动到 F 的正面右上角 67 | ctx.translate(pixelX, pixelY); 68 | 69 | // 绘制箭头 70 | ctx.beginPath(); 71 | ctx.moveTo(10, 5); 72 | ctx.lineTo(0, 0); 73 | ctx.lineTo(5, 10); 74 | ctx.moveTo(0, 0); 75 | ctx.lineTo(15, 15); 76 | ctx.stroke(); 77 | 78 | // 绘制文字 79 | ctx.fillText(someMessage, 20, 20); 80 | 81 | // 还原画布设置 82 | ctx.restore(); 83 | 84 | 我们之前讲过使用二维画布[矩阵栈](webgl-2d-matrix-stack.html)的平移方法， 85 | 不需要在绘制箭头的时候做其他运算了。我们只是假设绘制在原点，并且需要把原点移动到 F 的右上角。 86 | 87 | {{{example url="../webgl-text-html-canvas2d-arrows.html" }}} 88 | 89 | 涉及到二维画布的使用，可以[查看二维画布API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) 90 | 获得更多信息。接下来我们将[用WebGL渲染文字](webgl-text-texture.html)。 91 | 92 | -------------------------------------------------------------------------------- /webgl/license.html: -------------------------------------------------------------------------------- 1 | 
     2 | Copyright (c) 2021 GFXFundamentals
 3 | All rights reserved.
 4 | 
 5 | Redistribution and use in source and binary forms, with or without
 6 | modification, are permitted provided that the following conditions are
 7 | met:
 8 | 
 9 | * Redistributions of source code must retain the above copyright notice,
10 |   this list of conditions and the following disclaimer.
11 | 
12 | * Redistributions in binary form must reproduce the above copyright notice,
13 |   this list of conditions and the following disclaimer in the documentation
14 |   and/or other materials provided with the distribution.
15 | 
16 | * Neither the name of greggman.com nor the names of its contributors
17 |   may be used to endorse or promote products derived from this software
18 |   without specific prior written permission.
19 | 
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
21 | IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
22 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
23 | PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
24 | CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
25 | EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
26 | PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
27 | PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
28 | LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
29 | NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
30 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
31 |
    32 | 33 | -------------------------------------------------------------------------------- /webgl/resources/8x8-font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/8x8-font.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-icons_228ef1_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-icons_228ef1_256x240.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-icons_ef8c08_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-icons_ef8c08_256x240.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-icons_ffd27a_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-icons_ffd27a_256x240.png -------------------------------------------------------------------------------- /webgl/resources/css/ui-lightness/images/ui-icons_ffffff_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/css/ui-lightness/images/ui-icons_ffffff_256x240.png -------------------------------------------------------------------------------- /webgl/resources/drag-and-drop.js: -------------------------------------------------------------------------------- 1 | const handlers = { 2 | onDropFile: () => {}, 3 | }; 4 | 5 | export function setup(options) { 6 | const html = ` 7 | 31 | 36 | `; 37 | 38 | const elem = document.createElement('div'); 39 | elem.innerHTML = html; 40 | document.body.appendChild(elem); 41 | 42 | const dragInfo = document.querySelector('.dragInfo'); 43 | function showDragInfo(show) { 44 | dragInfo.style.display = show ? '' : 'none'; 45 | } 46 | 47 | document.body.addEventListener('dragenter', () => { 48 | showDragInfo(true); 49 | }); 50 | 51 | const dragElem = dragInfo; 52 | 53 | dragElem.addEventListener('dragover', (e) => { 54 | e.preventDefault(); 55 | return false; 56 | }); 57 | 58 | dragElem.addEventListener('dragleave', () => { 59 | showDragInfo(false); 60 | return false; 61 | }); 62 | 63 | dragElem.addEventListener('dragend', () => { 64 | showDragInfo(false); 65 | return false; 66 | }); 67 | 68 | dragElem.addEventListener('drop', (e) => { 69 | e.preventDefault(); 70 | showDragInfo(false); 71 | if (e.dataTransfer.items && e.dataTransfer.items) { 72 | let fileNdx = 0; 73 | for (let i = 0; i < e.dataTransfer.items.length; ++i) { 74 | const item = e.dataTransfer.items[i]; 75 | if (item.kind === 'file') { 76 | handlers.onDropFile(item.getAsFile(), fileNdx++); 77 | } 78 | } 79 | } 80 | 81 | return false; 82 | }); 83 | 84 | } 85 | 86 | export function onDropFile(fn) { 87 | handlers.onDropFile = fn; 88 | } 89 | 90 | -------------------------------------------------------------------------------- /webgl/resources/eye-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/eye-icon.png -------------------------------------------------------------------------------- /webgl/resources/f-texture-pixel-coords.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/f-texture-pixel-coords.png -------------------------------------------------------------------------------- /webgl/resources/f-texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/f-texture.png -------------------------------------------------------------------------------- /webgl/resources/images/computer-history-museum/neg-x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/images/computer-history-museum/neg-x.jpg -------------------------------------------------------------------------------- /webgl/resources/images/computer-history-museum/neg-y.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/images/computer-history-museum/neg-y.jpg -------------------------------------------------------------------------------- /webgl/resources/images/computer-history-museum/neg-z.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/images/computer-history-museum/neg-z.jpg -------------------------------------------------------------------------------- /webgl/resources/images/computer-history-museum/pos-x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/images/computer-history-museum/pos-x.jpg -------------------------------------------------------------------------------- /webgl/resources/images/computer-history-museum/pos-y.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/images/computer-history-museum/pos-y.jpg -------------------------------------------------------------------------------- /webgl/resources/images/computer-history-museum/pos-z.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/images/computer-history-museum/pos-z.jpg -------------------------------------------------------------------------------- /webgl/resources/images/frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/images/frame.png -------------------------------------------------------------------------------- /webgl/resources/keyboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/keyboard.jpg -------------------------------------------------------------------------------- /webgl/resources/leaves.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/leaves.jpg -------------------------------------------------------------------------------- /webgl/resources/lesson-helper.css: -------------------------------------------------------------------------------- 1 | .contextlost { 2 | position: absolute; 3 | left: 0; 4 | top: 0; 5 | width: 100vw; 6 | height: 100vh; 7 | background: red; 8 | color: white; 9 | font-family: monospace; 10 | font-weight: bold; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | } 15 | .contextlost>div { 16 | padding: 0.5em; 17 | background: darkred; 18 | cursor: pointer; 19 | } -------------------------------------------------------------------------------- /webgl/resources/mip-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/mip-example.png -------------------------------------------------------------------------------- /webgl/resources/mip-low-res-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/mip-low-res-example.png -------------------------------------------------------------------------------- /webgl/resources/models/book-vertex-chameleon-study/LICENSE.md: -------------------------------------------------------------------------------- 1 | # Book - Vertex chameleon study 2 | 3 | From: https://sketchfab.com/3d-models/book-vertex-chameleon-study-51b0b3bdcd844a9e951a9ede6f192da8 4 | 5 | # Author: Oleaf 6 | 7 | https://sketchfab.com/homkahom0 8 | 9 | # License: CC-BY-NC 10 | 11 | http://creativecommons.org/licenses/by-nc/4.0/ 12 | -------------------------------------------------------------------------------- /webgl/resources/models/book-vertex-chameleon-study/book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/models/book-vertex-chameleon-study/book.png -------------------------------------------------------------------------------- /webgl/resources/models/chair/chair.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/models/chair/chair.jpg -------------------------------------------------------------------------------- /webgl/resources/models/chair/license.md: -------------------------------------------------------------------------------- 1 | # Chair 2 | 3 | https://sketchfab.com/3d-models/chair-aa2acddb218646a59ece132bf95aa558 4 | 5 | # By haytonm 6 | 7 | https://sketchfab.com/haytonm 8 | 9 | # License: CC-BY 4.0 10 | 11 | http://creativecommons.org/licenses/by/4.0/ -------------------------------------------------------------------------------- /webgl/resources/models/cube/cube.mtl: -------------------------------------------------------------------------------- 1 | # Blender MTL File: 'None' 2 | # Material Count: 1 3 | 4 | newmtl Material 5 | Ns 323.999994 6 | Ka 1.000000 1.000000 1.000000 7 | Kd 0.800000 0.800000 0.800000 8 | Ks 0.500000 0.500000 0.500000 9 | Ke 0.0 0.0 0.0 10 | Ni 1.450000 11 | d 1.000000 12 | illum 2 13 | -------------------------------------------------------------------------------- /webgl/resources/models/cube/cube.obj: -------------------------------------------------------------------------------- 1 | # Blender v2.80 (sub 75) OBJ File: '' 2 | # www.blender.org 3 | mtllib cube.mtl 4 | o Cube 5 | v 1.000000 1.000000 -1.000000 6 | v 1.000000 -1.000000 -1.000000 7 | v 1.000000 1.000000 1.000000 8 | v 1.000000 -1.000000 1.000000 9 | v -1.000000 1.000000 -1.000000 10 | v -1.000000 -1.000000 -1.000000 11 | v -1.000000 1.000000 1.000000 12 | v -1.000000 -1.000000 1.000000 13 | vt 0.375000 0.000000 14 | vt 0.625000 0.000000 15 | vt 0.625000 0.250000 16 | vt 0.375000 0.250000 17 | vt 0.375000 0.250000 18 | vt 0.625000 0.250000 19 | vt 0.625000 0.500000 20 | vt 0.375000 0.500000 21 | vt 0.625000 0.750000 22 | vt 0.375000 0.750000 23 | vt 0.625000 0.750000 24 | vt 0.625000 1.000000 25 | vt 0.375000 1.000000 26 | vt 0.125000 0.500000 27 | vt 0.375000 0.500000 28 | vt 0.375000 0.750000 29 | vt 0.125000 0.750000 30 | vt 0.625000 0.500000 31 | vt 0.875000 0.500000 32 | vt 0.875000 0.750000 33 | vn 0.0000 1.0000 0.0000 34 | vn 0.0000 0.0000 1.0000 35 | vn -1.0000 0.0000 0.0000 36 | vn 0.0000 -1.0000 0.0000 37 | vn 1.0000 0.0000 0.0000 38 | vn 0.0000 0.0000 -1.0000 39 | usemtl Material 40 | s off 41 | f 1/1/1 5/2/1 7/3/1 3/4/1 42 | f 4/5/2 3/6/2 7/7/2 8/8/2 43 | f 8/8/3 7/7/3 5/9/3 6/10/3 44 | f 6/10/4 2/11/4 4/12/4 8/13/4 45 | f 2/14/5 1/15/5 3/16/5 4/17/5 46 | f 6/18/6 5/19/6 1/20/6 2/11/6 47 | -------------------------------------------------------------------------------- /webgl/resources/models/cube/offset-cube.obj: -------------------------------------------------------------------------------- 1 | # Blender v2.80 (sub 75) OBJ File: '' 2 | # www.blender.org 3 | mtllib cube.mtl 4 | o Cube 5 | v 10.000000 1.000000 -1.000000 6 | v 10.000000 -1.000000 -1.000000 7 | v 10.000000 1.000000 1.000000 8 | v 10.000000 -1.000000 1.000000 9 | v 8.000000 1.000000 -1.000000 10 | v 8.000000 -1.000000 -1.000000 11 | v 8.000000 1.000000 1.000000 12 | v 8.000000 -1.000000 1.000000 13 | vt 0.375000 0.000000 14 | vt 0.625000 0.000000 15 | vt 0.625000 0.250000 16 | vt 0.375000 0.250000 17 | vt 0.375000 0.250000 18 | vt 0.625000 0.250000 19 | vt 0.625000 0.500000 20 | vt 0.375000 0.500000 21 | vt 0.625000 0.750000 22 | vt 0.375000 0.750000 23 | vt 0.625000 0.750000 24 | vt 0.625000 1.000000 25 | vt 0.375000 1.000000 26 | vt 0.125000 0.500000 27 | vt 0.375000 0.500000 28 | vt 0.375000 0.750000 29 | vt 0.125000 0.750000 30 | vt 0.625000 0.500000 31 | vt 0.875000 0.500000 32 | vt 0.875000 0.750000 33 | vn 0.0000 1.0000 0.0000 34 | vn 0.0000 0.0000 1.0000 35 | vn -1.0000 0.0000 0.0000 36 | vn 0.0000 -1.0000 0.0000 37 | vn 1.0000 0.0000 0.0000 38 | vn 0.0000 0.0000 -1.0000 39 | usemtl Material 40 | s off 41 | f 1/1/1 5/2/1 7/3/1 3/4/1 42 | f 4/5/2 3/6/2 7/7/2 8/8/2 43 | f 8/8/3 7/7/3 5/9/3 6/10/3 44 | f 6/10/4 2/11/4 4/12/4 8/13/4 45 | f 2/14/5 1/15/5 3/16/5 4/17/5 46 | f 6/18/6 5/19/6 1/20/6 2/11/6 47 | -------------------------------------------------------------------------------- /webgl/resources/models/killer_whale/thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/models/killer_whale/thumbnail.jpg -------------------------------------------------------------------------------- /webgl/resources/models/killer_whale/whale.CYCLES.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/models/killer_whale/whale.CYCLES.bin -------------------------------------------------------------------------------- /webgl/resources/models/killer_whale/whale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/models/killer_whale/whale.png -------------------------------------------------------------------------------- /webgl/resources/models/windmill/license.md: -------------------------------------------------------------------------------- 1 | This model is licensed under the Creative Commons CC-BY-SA 3.0 license 2 | 3 | http://creativecommons.org/licenses/by-sa/3.0/ 4 | 5 | It can be used as long as attribution is given and any modifications 6 | are under the same license 7 | 8 | It was created by [ahedov](https://www.blendswap.com/user/ahedov) 9 | 10 | https://www.blendswap.com/blends/view/69174 11 | -------------------------------------------------------------------------------- /webgl/resources/models/windmill/windmill-obj.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/models/windmill/windmill-obj.jpg -------------------------------------------------------------------------------- /webgl/resources/models/windmill/windmill.mtl: -------------------------------------------------------------------------------- 1 | # Blender MTL File: 'windmill_001.blend' 2 | # Material Count: 2 3 | 4 | newmtl Material 5 | Ns 0.000000 6 | Ka 1.000000 1.000000 1.000000 7 | Kd 0.800000 0.800000 0.800000 8 | Ks 0.000000 0.000000 0.000000 9 | Ke 0.000000 0.000000 0.000000 10 | Ni 1.000000 11 | d 1.000000 12 | illum 1 13 | map_Kd windmill_001_lopatky_COL.jpg 14 | map_Bump windmill_001_lopatky_NOR.jpg 15 | 16 | newmtl windmill 17 | Ns 0.000000 18 | Ka 1.000000 1.000000 1.000000 19 | Kd 0.800000 0.800000 0.800000 20 | Ks 0.000000 0.000000 0.000000 21 | Ke 0.000000 0.000000 0.000000 22 | Ni 1.000000 23 | d 1.000000 24 | illum 1 25 | map_Kd windmill_001_base_COL.jpg 26 | map_Bump windmill_001_base_NOR.jpg 27 | map_Ns windmill_001_base_SPEC.jpg 28 | -------------------------------------------------------------------------------- /webgl/resources/models/windmill/windmill_001_base_COL.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/models/windmill/windmill_001_base_COL.jpg -------------------------------------------------------------------------------- /webgl/resources/models/windmill/windmill_001_base_NOR.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/models/windmill/windmill_001_base_NOR.jpg -------------------------------------------------------------------------------- /webgl/resources/models/windmill/windmill_001_base_SPEC.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/models/windmill/windmill_001_base_SPEC.jpg -------------------------------------------------------------------------------- /webgl/resources/models/windmill/windmill_001_lopatky_COL.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/models/windmill/windmill_001_lopatky_COL.jpg -------------------------------------------------------------------------------- /webgl/resources/models/windmill/windmill_001_lopatky_NOR.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/models/windmill/windmill_001_lopatky_NOR.jpg -------------------------------------------------------------------------------- /webgl/resources/noodles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/noodles.jpg -------------------------------------------------------------------------------- /webgl/resources/rotate-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/rotate-30.png -------------------------------------------------------------------------------- /webgl/resources/rotate-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/rotate-60.png -------------------------------------------------------------------------------- /webgl/resources/rotate-90.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/rotate-90.png -------------------------------------------------------------------------------- /webgl/resources/star.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/star.jpg -------------------------------------------------------------------------------- /webgl/resources/stats.min.js: -------------------------------------------------------------------------------- 1 | // stats.js - http://github.com/mrdoob/stats.js 2 | var Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px"; 3 | i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div"); 4 | k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display= 5 | "block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:11,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height= 6 | a+"px",m=b,r=0);return b},update:function(){l=this.end()}}}; 7 | -------------------------------------------------------------------------------- /webgl/resources/tdl/error.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/tdl/error.jpg -------------------------------------------------------------------------------- /webgl/resources/tdl/screenshot.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2009, Google Inc. 3 | * All rights reserved. 4 | * 5 | * Redistribution and use in source and binary forms, with or without 6 | * modification, are permitted provided that the following conditions are 7 | * met: 8 | * 9 | * * Redistributions of source code must retain the above copyright 10 | * notice, this list of conditions and the following disclaimer. 11 | * * Redistributions in binary form must reproduce the above 12 | * copyright notice, this list of conditions and the following disclaimer 13 | * in the documentation and/or other materials provided with the 14 | * distribution. 15 | * * Neither the name of Google Inc. nor the names of its 16 | * contributors may be used to endorse or promote products derived from 17 | * this software without specific prior written permission. 18 | * 19 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 20 | * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 21 | * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 22 | * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 23 | * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 24 | * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 25 | * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 26 | * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 27 | * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 28 | * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 29 | * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 30 | */ 31 | 32 | 33 | /** 34 | * @fileoverview This file contains various functions for taking a screenshot 35 | */ 36 | 37 | tdl.provide('tdl.screenshot'); 38 | 39 | tdl.require('tdl.io'); 40 | tdl.require('tdl.log'); 41 | 42 | /** 43 | * takes a screenshot of a canvas. Sends it to the server to be saved. 44 | */ 45 | tdl.screenshot.takeScreenshot = function(canvas) { 46 | tdl.io.sendJSON( 47 | this.url, 48 | {cmd: 'screenshot', dataURL: canvas.toDataURL()}, 49 | function() {}); 50 | }; 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /webgl/resources/uv-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gfxfundamentals/webgl-fundamentals/fd4401e2741a68ebb7c3beb33ed064a5859d22d7/webgl/resources/uv-grid.png -------------------------------------------------------------------------------- /webgl/svg-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SVG Test 8 | 9 | 10 |

    SVG Test

    11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /webgl/unit-circle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Unit Circle 8 | 9 | 10 | 15 | 16 | 17 |
    18 | Drag Circle 19 |
    20 |
    21 | 22 | 23 | 24 | 25 | 26 | 33 | 34 | 35 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /webgl/webgl-precision-check-canvas-bits.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL - precision - check canvas bits 8 | 9 | 10 | 11 |
    12 | 13 | 20 | 21 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /webgl/webgl-qna-accessing-textures-by-pixel-coordinate-in-webgl2-example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 78 | -------------------------------------------------------------------------------- /webgl/webgl-qna-don-t-blend-a-polygon-that-crosses-itself-example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 87 | -------------------------------------------------------------------------------- /webgl/webgl-qna-don-t-blend-a-polygon-that-crosses-itself-example-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 92 | -------------------------------------------------------------------------------- /webgl/webgl-qna-how-to-achieve-moving-line-with-trail-effects-example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 94 | -------------------------------------------------------------------------------- /webgl/webgl-qna-how-to-control-the-color-between-vertices-example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 87 | -------------------------------------------------------------------------------- /webgl/webgl-qna-how-to-make-webgl-canvas-transparent-example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 25 | 26 | 27 | 28 | 
    29 | Some 
30 | text
31 | under
32 | the
33 | canvas
34 |
    35 | 36 | 37 | 38 | 39 | 40 | 48 | -------------------------------------------------------------------------------- /webgl/webgl-qna-how-to-make-webgl-canvas-transparent-example-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 24 | 25 | 26 | 27 | 
    28 | Some 
29 | text
30 | under
31 | the
32 | canvas
33 |
    34 | 35 | 36 | 37 | 38 | 39 | 48 | -------------------------------------------------------------------------------- /webgl/webgl-qna-how-to-make-webgl-canvas-transparent-example-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 24 | 25 | 26 | 27 | 
    28 | Some 
29 | text
30 | under
31 | the
32 | canvas
33 |
    34 | 35 | 36 | 37 | 38 | 48 | -------------------------------------------------------------------------------- /webgl/webgl-qna-how-to-process-particle-positions-example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 84 | -------------------------------------------------------------------------------- /webgl/webgl-qna-how-to-render-large-scale-images-like-32000x32000-example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 81 | -------------------------------------------------------------------------------- /webgl/webgl-qna-i-get-invalid-type-error-when-calling-readpixels-example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 47 | -------------------------------------------------------------------------------- /webgl/webgl-qna-recording-fps-in-webgl-example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 |
    fps:
    12 | 13 | 14 | 15 | 16 | 35 | -------------------------------------------------------------------------------- /webgl/webgl-qna-recording-fps-in-webgl-example-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | 16 |
    fps:
    17 |
    average fps:
    18 | 19 | 20 | 21 | 22 | 64 | -------------------------------------------------------------------------------- /webgl/webgl-qna-why-does-webgl-take-more-memory-than-canvas-2d-example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 19 | -------------------------------------------------------------------------------- /webgl/webgl-qna-why-does-webgl-take-more-memory-than-canvas-2d-example-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 21 | -------------------------------------------------------------------------------- /webgl/webgl-same-code-body-only-fullscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL - Same Code - Body Only Fullscreen 8 | 18 | 19 | 20 | 21 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /webgl/webgl-same-code-canvas-fullscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL - Same Code - Canvas Fullscreen 8 | 18 | 19 | 20 | 21 | 22 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /webgl/webgl-same-code-canvas-partscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL - Same Code - Canvas Partscreen 8 | 38 | 39 | 40 | 41 |
    Controls
    for
    an
    Editor
    would
    go
    here
    42 | 43 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /webgl/webgl-same-code-container-fullscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL - Same Code - Container Fullscreen 8 | 25 | 26 | 27 |
    28 | 29 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /webgl/webgl-same-code-container-partscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL - Same Code - Container Partscreen 8 | 43 | 44 | 45 |
    46 |
    Controls
    for
    an
    Editor
    would
    go
    here
    47 | 48 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /webgl/webgl-simple-point.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL - Simple Point 8 | 9 | 12 | 13 | 14 | 15 | 16 | 23 | 24 | 52 | 53 | -------------------------------------------------------------------------------- /webgl/webgl-simple-points.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL - Simple Points 8 | 9 | 12 | 13 | 14 | 15 | 16 | 23 | 24 | 70 | 71 | -------------------------------------------------------------------------------- /webgl/webgl-simple-scissor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL - Simple Scissor 8 | 9 | 12 | 13 | 14 | 15 | 16 | 44 | 45 | -------------------------------------------------------------------------------- /webgl/webgl-tips-tabindex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL Tips - TabIndex 8 | 22 | 23 | 24 |
    click a canvas then press a key
    25 |
    26 |
    27 | 28 |
    tabindex not set
    29 |
    30 |
    31 | 32 |
    focus style not set
    33 |
    34 |
    35 | 36 |
    tabindex and
    focus style set
    37 |
    38 |
    39 | 40 | 68 | 69 | 70 | --------------------------------------------------------------------------------