Code Monkey home page Code Monkey logo

redgpu's Introduction

RedGPU

RedGPU - Javascript WebGPU Library

Twitter Follow

RedGPU V1.x

  • See the example. Various examples are available.
RedGPU.-.Examples.-.Chrome.2021-12-11.17-50-26.mp4

Usage

  • When running localhost, port 3003 should be used.
  • Running in chrome canary.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RedGPU Example - HelloWorld</title>
    <link type="text/css" rel="stylesheet" href="../css.css"/>
    <script type="module" src="your host.js"></script>
</head>
<body></body>
</html>

module

"use strict"
import RedGPU from "dist/RedGPU.min.mjs";

const cvs = document.createElement('canvas');
document.body.appendChild(cvs);
new RedGPU.RedGPUContext(
	cvs,
	function () {
		let tView, tScene, tCamera;
		let renderer, render;
		let testMesh;
		tScene = new RedGPU.Scene();
		tCamera = new RedGPU.Camera3D(this);
		tView = new RedGPU.View(this, tScene, tCamera);
		renderer = new RedGPU.Render();
		this.addView(tView)

		testMesh = new RedGPU.Mesh(this, new RedGPU.Box(this), new RedGPU.ColorMaterial(this))
		tScene.addChild(testMesh)

		tCamera.z = -5;
		tCamera.lookAt(0, 0, 0);

		render = time => {
			renderer.render(time, this)
			requestAnimationFrame(render)
		}
		requestAnimationFrame(render);
	}
);

RedGPU 2.0 research progress.

V2.0.0 research is ongoing. Other repositories are in the works and will be released as meaningful work progresses.
The first target will be released on December 1, 2022.

redgpu's People

Contributors

redcamel avatar

Stargazers

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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

redgpu's Issues

RedPipeline

RedPipeline 이놈도 아예 객체로 빼야겠다 -_-

매쉬의 매트릭스를 공용으로 풀링할 수 있도록변경

매쉬의 매트릭스를 공용으로 풀링할 수 있도록변경

이리되면 메쉬바다... 매트릭스가 바뀌어도..
매번 setSubData 할필요가 없다..
씬 렌더후..
한방에 setSubData 할수있음으로 통신비용이 획기적으로 줌.. ㄱㄱ함

RedXXMaterial

RedXXMaterial

기초 재질 부터 생성

  • RedColorMaterial
  • RedColorPhongMaterial
  • RedBitmapMaterial
  • RedStandardMaterial
  • RedVideoMaterial
  • RedSheetMaterial

RedShareGLSL

RedShareGLSL

  • 공용 GLSL 코드를 여기다 모은다.

RedBaseContainer method update

RedBaseContainer method update

  • addChild
  • addChildAt
  • removeChild
  • removeChildAt
  • removeChildAll
  • getChildAt
  • getChildIndex
  • numChildren

다중 텍스쳐 로더가 필요함...

텍스쳐 로더가 필요함...

텍스쳐 개별 로딩 완료서 재질 업데이트 처리시 ---> 파이프라인을 변경해야함
이때 텍스쳐가 5개씩 된다면 최악....6번의 파이프라인 변경 비용이 필요함

한번에 리소스 로딩다하고 화면이 그려지도록 해야함...
마치 게임 로딩처럼

Mixin 디파인더 설정

Mixin 디파인더 설정

재질에서 반복적으로 정의되는 녀석들 믹스인으로 불러오게 변경

MSAA optional

MSAA optional
누가 먹을지는 모르곘다만 일단 옵션화 해야함

RedDetector

RedDetector

  • 기본 브라우저 디텍팅만 일단 추가..
  • 향후 webGPU 지원 제한 디텍팅되면... 업데이트

타입 방어 1차

일단 RedXX 군들은 다 타입방어를 시작하는걸로

  • base/RedBaseLight.js
    • contructor
    • method
  • base/RedBaseMaterial.js
    • contructor
    • method
  • base/RedBaseObject3D.js
    • contructor
    • method
  • base/RedBasePostEffect.js
    • contructor
    • method
  • base/RedDisplayContainer.js
    • contructor
    • method
  • base/RedPipeline.js
    • contructor
    • method
  • base/RedShareGLSL.js
    • contructor
    • method
  • base/RedUUID.js
    • contructor
    • method
  • base/detect/RedDetectorGPU.js
    • contructor
    • method
  • buffer/RedBindGroup.js
    • contructor
    • method
  • buffer/RedBuffer.js
    • contructor
    • method
  • buffer/RedUniformBuffer.js
    • contructor
    • method
  • buffer/RedUniformBufferDescriptor.js
    • contructor
    • method
  • controller/RedCamera.js
    • contructor
    • method
  • controller/RedObitController.js
    • contructor
    • method
  • geometry/RedGeometry.js
    • contructor
    • method
  • geometry/RedInterleaveInfo.js
    • contructor
    • method
  • light/RedDirectionalLight.js
    • contructor
    • method
  • light/RedPointLight.js
    • contructor
    • method
  • loader/RedGLTFLoader.js
    • contructor
    • method
  • material/RedBitmapMaterial.js
    • contructor
    • method
  • material/RedColorMaterial.js
    • contructor
    • method
  • material/RedColorPhongMaterial.js
    • contructor
    • method
  • material/RedColorPhongTextureMaterial.js
    • contructor
    • method
  • material/RedEnvironmentMaterial.js
    • contructor
    • method
  • material/RedMaterialPreset.js
    • contructor
    • method
  • material/RedStandardMaterial.js
    • contructor
    • method
  • material/system
    • contructor
    • method
  • material/system/RedGridMaterial.js
    • contructor
    • method
  • material/system/RedPBRMaterial_System.js
    • contructor
    • method
  • material/system/RedSkyBoxMaterial.js
    • contructor
    • method
  • object3D/RedAxis.js
    • contructor
    • method
  • object3D/RedGrid.js
    • contructor
    • method
  • object3D/RedMesh.js
    • contructor
    • method
  • object3D/RedSkyBox.js
    • contructor
    • method
  • postEffect/adjustments
    • contructor
    • method
  • postEffect/bloom
    • contructor
    • method
  • postEffect/blur
    • contructor
    • method
  • postEffect/dof
    • contructor
    • method
  • postEffect/pixelate
    • contructor
    • method
  • postEffect/RedPostEffect.js
    • contructor
    • method
  • postEffect/RedPostEffect_Convolution.js
    • contructor
    • method
  • postEffect/RedPostEffect_Film.js
    • contructor
    • method
  • postEffect/RedPostEffect_Vignetting.js
    • contructor
    • method
  • postEffect/adjustments/RedPostEffect_BrightnessContrast.js
    • contructor
    • method
  • postEffect/adjustments/RedPostEffect_Gray.js
    • contructor
    • method
  • postEffect/adjustments/RedPostEffect_HueSaturation.js
    • contructor
    • method
  • postEffect/adjustments/RedPostEffect_Invert.js
    • contructor
    • method
  • postEffect/adjustments/RedPostEffect_Threshold.js
    • contructor
    • method
  • postEffect/bloom/RedPostEffect_Bloom.js
    • contructor
    • method
  • postEffect/bloom/RedPostEffect_Bloom_blend.js
    • contructor
    • method
  • postEffect/blur/RedPostEffect_Blur.js
    • contructor
    • method
  • postEffect/blur/RedPostEffect_BlurX.js
    • contructor
    • method
  • postEffect/blur/RedPostEffect_BlurY.js
    • contructor
    • method
  • postEffect/blur/RedPostEffect_GaussianBlur.js
    • contructor
    • method
  • postEffect/blur/RedPostEffect_ZoomBlur.js
    • contructor
    • method
  • postEffect/dof/RedPostEffect_DoF.js
    • contructor
    • method
  • postEffect/dof/RedPostEffect_DoF_blend.js
    • contructor
    • method
  • postEffect/pixelate/RedPostEffect_HalfTone.js
    • contructor
    • method
  • postEffect/pixelate/RedPostEffect_Pixelize.js
    • contructor
    • method
  • primitives/RedBox.js
    • contructor
    • method
  • primitives/RedCylinder.js
    • contructor
    • method
  • primitives/RedPlane.js
    • contructor
    • method
  • primitives/RedSphere.js
    • contructor
    • method
  • renderer/RedRender.js
    • contructor
    • method
  • resources/RedBitmapCubeTexture.js
    • contructor
    • method
  • resources/RedBitmapTexture.js
    • contructor
    • method
  • resources/RedSampler.js
    • contructor
    • method
  • resources/RedShaderModule_GLSL.js
    • contructor
    • method
  • resources/RedTypeSize.js
    • contructor
    • method
  • util/RedUTIL.js
    • contructor
    • method
  • util/func/RedUTILColor.js
    • contructor
    • method
  • util/func/RedUTILMath.js
    • contructor
    • method

RedUniformBufferDescriptor

RedUniformBufferDescriptor

버퍼 오프셋 자동 계산을 위해서... 객체화...

export default class RedUniformBufferDescriptor {
	constructor(redStruct, usage = GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST) {
              ... 뭔짓거릴하고..
         }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.