Scroll Down
↓
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
The EXT_frag_depth extension is part of the WebGL API and enables to set a depth value of a fragment from within the fragment shader.
3 |Generated using TypeDoc
Generated using TypeDoc
The OES_element_index_uint extension is part of the WebGL API and adds support for gl.UNSIGNED_INT types to WebGLRenderingContext.drawElements().
3 |Generated using TypeDoc
The OES_texture_float extension is part of the WebGL API and exposes floating-point pixel types for textures.
3 |Generated using TypeDoc
The OES_texture_float_linear extension is part of the WebGL API and allows linear filtering with floating-point pixel types for textures.
3 |Generated using TypeDoc
The OES_texture_half_float_linear extension is part of the WebGL API and allows linear filtering with half floating-point pixel types for textures.
3 |Generated using TypeDoc
Generated using TypeDoc
Part of the WebGL API and represents an opaque buffer object storing data such as vertices or colors.
3 |Generated using TypeDoc
Part of the WebGL API and represents a collection of buffers that serve as a rendering destination.
3 |Generated using TypeDoc
The WebGLProgram is part of the WebGL API and is a combination of two compiled WebGLShaders consisting of a vertex shader and a fragment shader (both written in GLSL).
3 |Generated using TypeDoc
Generated using TypeDoc
Part of the WebGL API and represents a buffer that can contain an image, or can be source or target of an rendering operation.
3 |Generated using TypeDoc
Generated using TypeDoc
The WebGLShader is part of the WebGL API and can either be a vertex or a fragment shader. A WebGLProgram requires both types of shaders.
3 |Generated using TypeDoc
Generated using TypeDoc
Part of the WebGL API and represents an opaque texture object providing storage and state for texturing operations.
3 |Generated using TypeDoc
Generated using TypeDoc
Part of the WebGL API and represents the location of a uniform variable in a shader program.
3 |Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
<code>
--------------------------------------------------------------------------------
/docs/instancing.a8d3693c.css:
--------------------------------------------------------------------------------
1 | body,html{height:100%}body{margin:0}
--------------------------------------------------------------------------------
/docs/kgl-auto/godray/index.html:
--------------------------------------------------------------------------------
1 | Scroll Down
↓
<code>
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/examples/index.js:
--------------------------------------------------------------------------------
1 | const CLASS_NAME_INITIAL = 'kgl'
2 | const PAGE_INITIAL = 'simple'
3 | const CLASS_NAME_CURRENT = '-current'
4 |
5 | const elExample = document.getElementById('example')
6 | const elCode = document.getElementById('code')
7 | let urlIndex
8 | let classNameCurrent
9 | let pageCurrent
10 | let elLinkCurrent
11 |
12 | const mapLink = [...document.querySelectorAll('nav a')].map((el) => {
13 | const { pathname } = new URL(el.href)
14 | const [, className, page] = pathname.match(
15 | /^\/?(?:kgl\/)?(.+?)\/(.+?)\/index\.html/
16 | )
17 |
18 | el.addEventListener('click', (e) => {
19 | e.preventDefault()
20 |
21 | urlIndex.searchParams.set('class', className)
22 | urlIndex.searchParams.set('page', page)
23 | history.pushState(null, '', urlIndex)
24 |
25 | detectExample()
26 | })
27 |
28 | return {
29 | el,
30 | className,
31 | page,
32 | }
33 | })
34 |
35 | detectExample()
36 |
37 | window.addEventListener('popstate', detectExample)
38 |
39 | function detectExample() {
40 | urlIndex = new URL(location.href)
41 | const className = urlIndex.searchParams.get('class') || CLASS_NAME_INITIAL
42 | const page = urlIndex.searchParams.get('page') || PAGE_INITIAL
43 |
44 | if (className === classNameCurrent && page === pageCurrent) return
45 |
46 | const directory = `${className}/${page}`
47 | const pathname = `${directory}/index.html`
48 | elExample.contentWindow.location.replace(pathname)
49 | elCode.href = `https://github.com/ko-yelie/kgl/blob/main/examples/${directory}`
50 |
51 | classNameCurrent = className
52 | pageCurrent = page
53 |
54 | detectLink()
55 | }
56 |
57 | function detectLink() {
58 | mapLink.some(({ el, className, page }) => {
59 | if (!(className === classNameCurrent && page === pageCurrent)) return false
60 |
61 | if (elLinkCurrent) {
62 | elLinkCurrent.classList.remove(CLASS_NAME_CURRENT)
63 | }
64 |
65 | el.classList.add(CLASS_NAME_CURRENT)
66 | elLinkCurrent = el
67 |
68 | return true
69 | })
70 | }
71 |
--------------------------------------------------------------------------------
/examples/index.styl:
--------------------------------------------------------------------------------
1 | @import 'variables'
2 |
3 | body
4 | display flex
5 | align-items flex-start
6 | margin 0
7 | font-family font-family
8 |
9 | a
10 | text-decoration none
11 | color color-link
12 |
13 | &:hover
14 | text-decoration underline
15 | color color-text
16 |
17 | header
18 | overflow auto
19 | box-sizing border-box
20 | position fixed
21 | top margin-window
22 | left margin-window
23 | z-index 1
24 | max-height 'calc(100% - %s)' % (margin-window * 2)
25 | margin auto
26 | padding 0.5rem
27 | background-color background-color
28 | color color-text
29 |
30 | nav
31 | ul
32 | margin 0
33 |
34 | a
35 | padding 0.1em 0.2em
36 | line-height 1.5
37 |
38 | &.-current
39 | pointer-events none
40 | text-decoration none
41 | outline solid 1px color-text
42 | background-color color-text
43 | color #000
44 |
45 | h1,
46 | h2
47 | margin 0
48 | font-size 1rem
49 | font-weight normal
50 |
51 | h1
52 | margin-bottom 0.5em
53 |
54 | h2
55 | margin-top 0.5em
56 |
57 | #example
58 | position absolute
59 | top 0
60 | left 0
61 | width 100%
62 | height 100%
63 |
64 | #code
65 | position absolute
66 | bottom margin-window
67 | right margin-window
68 | z-index 2
69 | padding 0 0.3em
70 | background-color background-color
71 |
--------------------------------------------------------------------------------
/examples/kgl-auto/godray/index.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | height: 100%;
4 | }
5 |
6 | body {
7 | margin: 0;
8 | }
9 |
--------------------------------------------------------------------------------
/examples/kgl-auto/godray/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Scroll Down
↓
21 | Photo by Levon Vardanyan
on Unsplash
29 | Photo by Sandro Katalina
on Unsplash
37 | Photo by kevin laminto
on Unsplash
Used by the dataset HTML attribute to represent data for custom attributes added to elements.
3 |